sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move recipe category from image overlay to text

Browse Source 
Adjusted recipe display to move the category badge from an image overlay to a text element below the title, affecting both the card view and the modal view.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8a68b15e-9591-4bfc-855e-8c035eed3662
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/oYq1Msd
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 19:59:51 +00:00
parent 4963edd636
commit c1bb3bda24
1 changed files with 3 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/pages/recipes.tsx
View File

@ -261,13 +261,11 @@ function RecipeModal({ recipe, onClose }: { recipe: Recipe; onClose: () => void
<button onClick={onClose} className="absolute top-3 right-3 bg-black/60 rounded-full p-1.5 text-white hover:bg-black/80" data-testid="button-recipe-modal-close"> <button onClick={onClose} className="absolute top-3 right-3 bg-black/60 rounded-full p-1.5 text-white hover:bg-black/80" data-testid="button-recipe-modal-close">
<X className="w-4 h-4" /> <X className="w-4 h-4" />
</button> </button>
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
<span className="text-[10px] font-medium text-primary bg-primary/20 px-2 py-0.5 rounded">{recipe.category}</span>
</div>
</div> </div>
<div className="p-5"> <div className="p-5">
<h2 className="text-xl font-bold text-foreground mb-1">{recipe.title}</h2> <h2 className="text-xl font-bold text-foreground mb-1">{recipe.title}</h2>
<p className="text-sm text-muted-foreground mb-3">{recipe.description}</p> <span className="text-[11px] font-medium text-primary">{recipe.category}</span>
<p className="text-sm text-muted-foreground mb-3 mt-1">{recipe.description}</p>
<div className="flex items-center gap-4 text-sm text-muted-foreground mb-5"> <div className="flex items-center gap-4 text-sm text-muted-foreground mb-5">
<span className="flex items-center gap-1"><Clock className="w-4 h-4" />{recipe.time}</span> <span className="flex items-center gap-1"><Clock className="w-4 h-4" />{recipe.time}</span>
<span className="flex items-center gap-1"><Users className="w-4 h-4" />{recipe.servings}</span> <span className="flex items-center gap-1"><Users className="w-4 h-4" />{recipe.servings}</span>
@ -336,13 +334,10 @@ export default function RecipesPage() {
> >
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
<img src={recipe.image} alt={recipe.title} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" /> <img src={recipe.image} alt={recipe.title} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
<div className="absolute bottom-2 left-2">
<span className="text-[10px] font-medium text-primary bg-primary/20 px-2 py-0.5 rounded">{recipe.category}</span>
</div>
</div> </div>
<div className="p-4"> <div className="p-4">
<h3 className="font-bold text-card-foreground text-base group-hover:text-primary transition-colors">{recipe.title}</h3> <h3 className="font-bold text-card-foreground text-base group-hover:text-primary transition-colors">{recipe.title}</h3>
<span className="text-[10px] font-medium text-primary">{recipe.category}</span>
<p className="text-xs text-muted-foreground mt-1 line-clamp-2">{recipe.description}</p> <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{recipe.description}</p>
<div className="flex items-center gap-3 mt-3 text-xs text-muted-foreground"> <div className="flex items-center gap-3 mt-3 text-xs text-muted-foreground">
<span className="flex items-center gap-1"><Clock className="w-3 h-3" />{recipe.time}</span> <span className="flex items-center gap-1"><Clock className="w-3 h-3" />{recipe.time}</span>