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

Update layout and aspect ratios for all widgets on the homepage

Browse Source 
Adjusted aspect ratios for PhotoGallery, Recipe, Horoscope, and News widgets to 4:5 for a filled and taller appearance. Increased the number of news items displayed and updated styling for better visual presentation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: dc86575c-1a2c-4bad-be6f-bf7c15dcafd7
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic
2026-02-28 18:33:14 +00:00
parent 394b439ddc
commit f3614e4640
7 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/recipe-widget.tsx
+10 -7
View File
@@ -113,24 +113,27 @@ export function RecipeWidget() {
<>
<button
onClick={() => setShowRecipe(recipe)}
className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full text-left cursor-pointer group hover:border-primary/50 transition-colors"
className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full text-left cursor-pointer group hover:border-primary/50 transition-colors flex flex-col"
data-testid="widget-recipe"
>
<div className="p-3 flex items-center gap-2 border-b border-card-border">
<div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
<ChefHat className="w-4 h-4 text-primary" />
<h3 className="font-bold text-card-foreground text-sm">Rezept des Tages</h3>
</div>
<div className="relative">
<div className="relative flex-1">
<img
src={recipe.image}
alt={recipe.title}
className="w-full aspect-[16/10] object-cover transition-transform duration-500 group-hover:scale-105"
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
loading="lazy"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
<div className="absolute bottom-0 left-0 right-0 p-3">
<h4 className="text-white font-semibold text-sm">{recipe.title}</h4>
<p className="text-white/60 text-xs mt-0.5">{recipe.time} · {recipe.servings}</p>
<h4 className="text-white font-bold text-base">{recipe.title}</h4>
<p className="text-white/60 text-xs mt-0.5 flex items-center gap-2">
<span className="flex items-center gap-1"><Clock className="w-3 h-3" />{recipe.time}</span>
<span className="flex items-center gap-1"><Users className="w-3 h-3" />{recipe.servings}</span>
</p>
</div>
</div>
</button>