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

Optimize servings control

Browse source
This commit is contained in:
araemer 2025-10-21 07:36:49 +02:00
parent e6ea18bef8
commit f980d4d86d
4 changed files with 220 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -77,7 +77,7 @@ export default function RecipeDetailPage() {
{/* Container defining the maximum width of the content */}
<div className="content-container">
{/* Header - remains in position when scrolling */}
<div className="sticky bg-gray-100 top-0 left-0 right-0 pb-6 border-b-2 border-gray-300">
<div className="sticky-header">
<h1 className="content-title mb-0">{recipeWorkingCopy.title}</h1>
</div>
@ -93,19 +93,44 @@ export default function RecipeDetailPage() {
)}
{/* Servings */}
<div className="flex flex-row items-center gap-2 bg-blue-100 columns-2 rounded p-2 mb-4">
<p className="mb-2">For {recipeWorkingCopy.servings.amount} {recipeWorkingCopy.servings.unit}</p>
<input
type="number"
className="input-field w-20 ml-auto"
value={recipeWorkingCopy.servings.amount}
onChange={
e => {
recalculateIngredients(Number(e.target.value))
}
}
/>
<div
className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 bg-gray-200 rounded p-3 mb-4">
<p>
Für {recipeWorkingCopy.servings.amount} {recipeWorkingCopy.servings.unit}
</p>
<div className="flex items-center justify-end sm:justify-center gap-2">
{/* Minus button */}
<button
type="button"
onClick={() => recalculateIngredients(Math.max(1, recipeWorkingCopy.servings.amount - 1))}
className="enumeration-indicator primary-button-bg"
>
–
</button>
{/* Number input (no spin buttons) */}
<input
type="number"
inputMode="numeric"
pattern="[0-9]*"
className="w-16 text-center input-field"
value={recipeWorkingCopy.servings.amount}
onChange={e => recalculateIngredients(Number(e.target.value))}
min={1}
/>
{/* Plus button */}
<button
type="button"
onClick={() => recalculateIngredients(recipeWorkingCopy.servings.amount + 1)}
className="enumeration-indicator primary-button-bg"
>
+
</button>
</div>
</div>
{/* Ingredients */}
<h2 className="section-heading">Zutaten</h2>
<ul>