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

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

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