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

Layout adjustments to details page

Browse source
This commit is contained in:
araemer 2025-10-23 20:25:02 +02:00
parent c85e3ba083
commit 5a4e04a47c
2 changed files with 12 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/App.css
View file

@ -29,7 +29,7 @@
} }
.section-heading { .section-heading {
@apply text-xl font-bold pb-2 pt-4; @apply text-xl font-bold pb-4 pt-4;
} }
.subsection-heading { .subsection-heading {
@ -112,8 +112,13 @@
@apply pb-4 border-b border-gray-400; @apply pb-4 border-b border-gray-400;
} }
/* containers */
.circular-container { .circular-container {
@apply flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white flex items-center justify-center shadow-sm; @apply flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white flex items-center justify-center shadow-sm;
} }
.highlight-container-bg {
@apply bg-gray-200 rounded p-2;
}
} }

11
frontend/src/components/recipes/RecipeDetailPage.tsx
View file

@ -97,7 +97,7 @@ export default function RecipeDetailPage() {
{/* Servings */} {/* Servings */}
<div <div
className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 bg-gray-200 rounded p-3 mb-4"> className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 highlight-container-bg mb-4">
<p> <p>
Für {recipeWorkingCopy.servings.amount} {recipeWorkingCopy.servings.unit} Für {recipeWorkingCopy.servings.amount} {recipeWorkingCopy.servings.unit}
</p> </p>
@ -117,11 +117,11 @@ export default function RecipeDetailPage() {
<div key={i}> <div key={i}>
{/* the title is optional, only print if present */} {/* the title is optional, only print if present */}
{group.title && group.title.trim() !== "" && ( {group.title && group.title.trim() !== "" && (
<h3 className="subsection-heading">{group.title}</h3> <h3 className="subsection-heading highlight-container-bg mb-2">{group.title}</h3>
)} )}
<ul className="default-list"> <ul>
{group.ingredientList.map((ing, j) => ( {group.ingredientList.map((ing, j) => (
<li key={j}> <li key={j} className="border-b border-gray-300 last:border-b-0 p-2">
{ing.amount ?? ""} {ing.unit ?? ""} {ing.name} {ing.amount ?? ""} {ing.unit ?? ""} {ing.name}
</li> </li>
))} ))}
@ -130,7 +130,8 @@ export default function RecipeDetailPage() {
))} ))}
</ul> </ul>
{/* Instructions - @todo add reasonable list delegate component*/} {/* Instructions */}
<h2 className="section-heading">Zubereitung</h2>
<ol className="space-y-4"> <ol className="space-y-4">
{recipe.instructionStepList.map((step, j) => ( {recipe.instructionStepList.map((step, j) => (
<NumberedListItem key={j} index={j} text={step.text}/> <NumberedListItem key={j} index={j} text={step.text}/>