fred/recipe_app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile spacing

Browse source
This commit is contained in:
fred 2025-08-08 11:55:59 -07:00
parent fdaf4cff1f
commit cc7cb9edc9
2 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/pages/AddRecipe.tsx
View file

@ -64,21 +64,23 @@ function AddRecipe() {
<form onSubmit={addRecipeForm} className="add-recipe-form">
<input
type="text"
placeholder="recipe name"
placeholder="Title"
className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
value={recipeName}
maxLength={35}
onChange={(e) => setRecipeName(e.target.value)}
/>
<input
type="text"
placeholder="cuisine"
placeholder="Cuisine"
className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
value={recipeCuisine}
maxLength={15}
onChange={(e) => setRecipeCuisine(e.target.value)}
/>
<input
type="text"
placeholder="author or source"
placeholder="Author"
className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
value={author}
onChange={(e) => setAuthor(e.target.value)}

19
frontend/src/pages/RecipePage.tsx
View file

@ -99,14 +99,17 @@ function RecipePage() {
</div>
) : (
<div className="recipe-card relative">
<button onClick={openModal} className="ar-button bg-amber-500 text-white py-1 px-2 rounded hover:bg-amber-600 m-2 absolute top-0 right-0">
🗑️
</button>
<div className="border-b-2 border-amber-300 pb-4 mb-6">
<h3 className="text-2xl lg:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
<p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
<p>prep: <TimeDisplay minutes={recipe.details.prep_minutes ?? 0} /> | cook: <TimeDisplay minutes={recipe.details.cook_minutes ?? 0} /></p>
<div className="border-b-2 border-amber-300 pb-4">
<div className="recipe-card">
<div className="flex relative justify-between">
<button onClick={() => { }} className="invisible ar-button py-1 px-1 rounded self-start">🗑️</button>
<h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-amber-900">{recipe.details.name}</h3>
<button onClick={openModal} className="ar-button bg-amber-500 text-white py-1 px-1 rounded hover:bg-amber-600 self-start">🗑️</button>
</div>
<div className="mt-1">
<p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
<p>prep: <TimeDisplay minutes={recipe.details.prep_minutes ?? 0} /> | cook: <TimeDisplay minutes={recipe.details.cook_minutes ?? 0} /></p>
</div>
</div>
<div className="grid lg:grid-cols-2 gap-6 mb-6">