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

Fix component layout

Browse source
This commit is contained in:
araemer 2025-10-25 08:16:00 +02:00
parent c866c01dfe
commit 7c01ed5894
2 changed files with 38 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/App.css
View file

@ -4,8 +4,9 @@
@tailwind utilities; @tailwind utilities;
/* Custom recipe app styles */ /* Custom recipe app styles */
@layer preflight {
/* headlines */ @layer components {
h1 { h1 {
@apply text-3xl font-black text-blue-900; @apply text-3xl font-black text-blue-900;
} }
@ -18,18 +19,15 @@
@apply font-semibold; @apply font-semibold;
} }
/* labels */
label {
@apply text-gray-600;
}
/* input fields */ /* input fields */
input, textarea { input, textarea {
@apply p-2 w-full border rounded-md bg-white placeholder-gray-400 border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900; @apply p-2 w-full border rounded-md bg-white placeholder-gray-400 border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900;
} }
}
@layer components { /* labels */
label {
@apply text-gray-600;
}
/* background */ /* background */
.app-bg { .app-bg {

61
frontend/src/components/recipes/RecipeListItem.tsx
View file

@ -1,40 +1,41 @@
import { Link } from "react-router-dom" import {Link} from "react-router-dom"
type RecipeListItemProps = { type RecipeListItemProps = {
title: string title: string
targetPath: string targetPath: string
imageUrl?: string imageUrl?: string
} }
/** /**
* List item for the recipe list. Selecting an item navigates to the recipe * List item for the recipe list. Selecting an item navigates to the recipe
*/ */
export default function RecipeListItem({ title, targetPath, imageUrl }: RecipeListItemProps) { export default function RecipeListItem({title, targetPath, imageUrl}: RecipeListItemProps) {
return ( return (
<Link <Link
to={targetPath} to={targetPath}
className="h-60 w-60 block rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow bg-white dark:bg-gray-800" className="h-60 w-60 block rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow bg-white dark:bg-gray-800 flex flex-col"
> >
{/* Optional recipe image */} {/* Image or placeholder */}
{imageUrl ? ( {imageUrl ? (
<img <img
src={imageUrl} src={imageUrl}
alt={title} alt={title}
className="w-full h-40 object-cover" className="w-full h-2/3 object-cover"
/> />
) ) : (
: <div className="bg-gray-300 w-full h-40 flex justify-center items-center"> <div className="bg-gray-300 w-full h-2/3 flex justify-center items-center">
<label className="font-black text-gray-500" >no image</label> <label className="font-black text-gray-600">no image</label>
</div> </div>
} )}
{/* Card content */} {/* Recipe name section (takes remaining space) */}
<div className="p-4"> <div className="flex-1 flex items-center justify-center p-2">
<h2 className="text-lg font-semibold text-blue-400 dark:text-gray-100"> <label className="text-lg font-semibold text-blue-400 dark:text-gray-100 text-center">
{title} {title}
</h2> </label>
</div> </div>
</Link> </Link>
) );
} }