araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

alignment of recipe list

Browse source
This commit is contained in:
Anika Raemer 2025-09-17 20:15:49 +02:00
parent 686eddbaee
commit 635bec7f64
1 changed files with 11 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

41
frontend/src/components/recipes/RecipeListPage.tsx
View file

@ -40,7 +40,7 @@ export default function RecipeListPage() {
/*Container spanning entire screen used to center content horizontally */
<div className="w-screen min-h-screen flex justify-center">
{/* Container defining the maximum width of the content */}
<div className="bg-gray-100 w-full min-h-screen max-w-5xl shadow-xl p-8">
<div className="bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8">
{/* Header - remains in position when scrolling */}
<div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
<h1 className="content-title text-blue-900">Recipes</h1>
@ -65,7 +65,8 @@ export default function RecipeListPage() {
</div>
</div>
{/*Content - List of recipe cards */}
<div className="grid pt-4 gap-6 grid-cols-[repeat(auto-fit,minmax(220px,1fr))]">
<div className="w-full pt-4">
<div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(220px,auto))] max-w-6xl mx-auto justify-center">
{recipeList.map((recipe) => (
<RecipeListItem
key={recipe.id}
@ -76,40 +77,6 @@ export default function RecipeListPage() {
</div>
</div>
</div>
</div>
)
}
// /*Container spanning entire screen used to center content horizontally */
// <div className="w-screen min-h-screen flex justify-center">
// {/* Container defining the maximum width of the content */}
// <div className="bg-gray-100 w-full min-h-screen max-w-5xl shadow-xl p-8">
// {/* Header - remains in position when scrolling */}
// <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
// <h1 className="content-title text-blue-900">Recipes</h1>
// <div className="flex columns-4 content-stretch gap-2 items-center">
// {/* Number of recipes inlist */}
// <label className="label w-2/3">{recipeList.length} Recipes</label>
// {/* Search field */}
// <SearchField
// onSearchStringChanged={setSearchString}
// />
// {/* Add recipe button */}
// <button className="primary-button"
// onClick={handleAdd}
// >
// Add recipe
// </button>
// </div>
// </div>
// {/*Content - List of recipe cards */}
// <div className="grid pt-4 gap-6 grid-cols-[repeat(auto-fit,minmax(220px,1fr))]">
// {recipeList.map((recipe) => (
// <RecipeListItem
// key={recipe.id}
// title = {recipe.title}
// targetPath={getRecipeDetailUrl(recipe.id)}
// />
// ))}
// </div>
// </div>
// </div>