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

Unify content width for details view and editor.

Browse source
This commit is contained in:
araemer 2025-10-22 20:15:57 +02:00
parent 37b8279ab5
commit ada4396405
4 changed files with 69 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/App.css
View file

@ -11,10 +11,14 @@
@apply flex items-center w-screen justify-center min-h-screen bg-gray-50;
}
.content-container {
.content-bg {
@apply bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8;
}
.content-container {
@apply p-6 max-w-2xl mx-auto;
}
/* headings */
.sticky-header {
@apply sticky bg-gray-100 top-0 left-0 right-0 pb-6 border-b-2 border-gray-300;

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

@ -59,7 +59,7 @@ export default function RecipeDetailPage() {
ingredientList: ingGrp.ingredientList.map((ing) => ({
...ing,
// ensure only to recalculate the amount of ingredients that actually have an amout...
amount: (ing.amount && ing.amount !== undefined) ? ing.amount * factor : undefined,
amount: (ing.amount) ? ing.amount * factor : undefined,
}))
}))
@ -78,14 +78,14 @@ export default function RecipeDetailPage() {
/*Container spanning entire screen used to center content horizontally */
<div className="app-bg">
{/* Container defining the maximum width of the content */}
<div className="content-container">
<div className="content-bg">
{/* Header - remains in position when scrolling */}
<div className="sticky-header">
<h1 className="content-title mb-0 pb-0">{recipeWorkingCopy.title}</h1>
</div>
{/* Content */}
<div className="p-6 max-w-2xl mx-auto">
<div className="content-container">
{/* Recipe image */}
{recipe.imageUrl && (
<img

116
frontend/src/components/recipes/RecipeEditor.tsx
View file

@ -87,71 +87,73 @@ export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorPro
/*Container spanning entire screen used to center content horizontally */
<div className="app-bg">
{/* Container defining the maximum width of the content */}
<div className="content-container">
<div className="content-bg">
<h1 className="content-title border-b-2 border-gray-300">
{recipe.id ? "Rezept bearbeiten" : "Neues Rezept"}
</h1>
{/* Title */}
<h2 className="section-heading">Titel</h2>
<input
className={`input-field ${errors.title ? "error-text" : ""}`}
placeholder="Titel"
value={draft.title}
onChange={e => setDraft({...draft, title: e.target.value})}
/>
{/* Servings */}
<h2 className="section-heading">Portionen</h2>
<div className="columns-3 gap-2 flex items-center">
<label>Für</label>
<div className="content-container">
{/* Title */}
<h2 className="section-heading">Titel</h2>
<input
type="number"
className="input-field w-20"
placeholder="1"
value={draft.servings.amount}
onChange={e => {
const tempServings = draft.servings
tempServings.amount = Number(e.target.value)
setDraft({...draft, servings: tempServings})
}}
className={`input-field ${errors.title ? "error-text" : ""}`}
placeholder="Titel"
value={draft.title}
onChange={e => setDraft({...draft, title: e.target.value})}
/>
<input
className="input-field"
placeholder="Personen"
value={draft.servings.unit}
onChange={e => {
const tempServings = draft.servings
tempServings.unit = e.target.value
setDraft({...draft, servings: tempServings})
}}
/>
</div>
{/* Ingredient List - @todo better visualization of errors! */}
<div className={errors.ingredients ? "border error-text rounded p-2" : ""}>
<IngredientGroupListEditor
ingredientGroupList={draft.ingredientGroupList}
onChange={updateIngredientGroupList}
/>
</div>
{/* Servings */}
<h2 className="section-heading">Portionen</h2>
<div className="columns-3 gap-2 flex items-center">
<label>Für</label>
<input
type="number"
className="input-field w-20"
placeholder="1"
value={draft.servings.amount}
onChange={e => {
const tempServings = draft.servings
tempServings.amount = Number(e.target.value)
setDraft({...draft, servings: tempServings})
}}
/>
<input
className="input-field"
placeholder="Personen"
value={draft.servings.unit}
onChange={e => {
const tempServings = draft.servings
tempServings.unit = e.target.value
setDraft({...draft, servings: tempServings})
}}
/>
</div>
{/* Ingredient List - @todo better visualization of errors! */}
<div className={errors.ingredients ? "border error-text rounded p-2" : ""}>
<IngredientGroupListEditor
ingredientGroupList={draft.ingredientGroupList}
onChange={updateIngredientGroupList}
/>
</div>
{/* Instruction List*/}
<InstructionStepListEditor
instructionStepList={draft.instructionStepList}
onChange={updateInstructionList}
/>
{/* Instruction List*/}
<InstructionStepListEditor
instructionStepList={draft.instructionStepList}
onChange={updateInstructionList}
/>
<div className="button-group">
{/* Save Button */}
<Button
onClick={() => handleSave(draft)}
text={"Speichern"}
buttonType={ButtonType.PrimaryButton}
/>
<Button
onClick={() => onCancel()}
text={"Abbrechen"}
/>
<div className="button-group">
{/* Save Button */}
<Button
onClick={() => handleSave(draft)}
text={"Speichern"}
buttonType={ButtonType.PrimaryButton}
/>
<Button
onClick={() => onCancel()}
text={"Abbrechen"}
/>
</div>
</div>
</div>
</div>

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

@ -30,7 +30,7 @@ export default function RecipeListPage() {
}
}
loadRecipeList()
}, [, searchString])
}, [searchString])
const handleAdd = () => {
navigate(getRecipeAddUrl())
@ -43,7 +43,7 @@ export default function RecipeListPage() {
/*Container spanning entire screen used to center content horizontally */
<div className="app-bg">
{/* Container defining the maximum width of the content */}
<div className="content-container">
<div className="content-bg">
{/* Header - remains in position when scrolling */}
<div className="sticky-header">
<h1 className="content-title">Recipes</h1>