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

tuned header of recipe lists for smartphones

Browse source
This commit is contained in:
Anika Raemer 2025-09-14 17:30:33 +02:00
parent 5c3c74b32e
commit 686eddbaee
24 changed files with 2563 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -35,7 +35,7 @@ export default function RecipeListPage() {
navigate(getRecipeAddUrl())
}
if(!recipeList) { return <div>Unable to load recipes!</div>}
if(!recipeList) { return <div>Loading!</div>}
return (
/*Container spanning entire screen used to center content horizontally */
<div className="w-screen min-h-screen flex justify-center">
@ -44,20 +44,24 @@ export default function RecipeListPage() {
{/* 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
searchString=""
onSearchStringChanged={setSearchString}
/>
{/* Add recipe button */}
<button className="primary-button"
onClick={handleAdd}
>
Add recipe
</button>
<div className="flex flex-wrap items-center gap-2 w-full">
{/* Label: left-aligned on medium+ screens, full-width on small screens */}
<div className="order-2 md:order-1 w-full md:w-auto md:flex-1">
<label className="label">{recipeList.length} Recipes</label>
</div>
{/* Search + Add button container: right-aligned on medium+ screens */}
<div className="order-1 md:order-2 flex flex-1 md:flex-none justify-end gap-2 min-w-[160px]">
<div className="flex-1 md:flex-none md:max-w-[500px]">
<SearchField onSearchStringChanged={setSearchString} />
</div>
<button
className="primary-button flex-shrink-0"
onClick={handleAdd}
>
Add recipe
</button>
</div>
</div>
</div>
{/*Content - List of recipe cards */}
@ -74,3 +78,38 @@ export default function RecipeListPage() {
</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>