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 {
@apply text-xl font-bold pb-2 pt-4;
@apply text-xl font-bold pb-4 pt-4;
}
.subsection-heading {
@ -112,8 +112,13 @@
@apply pb-4 border-b border-gray-400;
}
/* containers */
.circular-container {
@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 */}
<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>
Für {recipeWorkingCopy.servings.amount} {recipeWorkingCopy.servings.unit}
</p>
@ -117,11 +117,11 @@ export default function RecipeDetailPage() {
<div key={i}>
{/* the title is optional, only print if present */}
{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) => (
<li key={j}>
<li key={j} className="border-b border-gray-300 last:border-b-0 p-2">
{ing.amount ?? ""} {ing.unit ?? ""} {ing.name}
</li>
))}
@ -130,7 +130,8 @@ export default function RecipeDetailPage() {
))}
</ul>
{/* Instructions - @todo add reasonable list delegate component*/}
{/* Instructions */}
<h2 className="section-heading">Zubereitung</h2>
<ol className="space-y-4">
{recipe.instructionStepList.map((step, j) => (
<NumberedListItem key={j} index={j} text={step.text}/>