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

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>