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

Make weather widget more compact and informative

Browse Source 
Update the weather widget component to display temperature, weather description, city, wind speed, and humidity in a more compact, single-line layout.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d391d31b-d28a-42c0-884b-d4aa19bfcf94
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 21:52:06 +00:00
parent 2c5feb8ea3
commit fd7ecad753
1 changed files with 12 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/components/weather-widget.tsx
View File

@ -107,28 +107,21 @@ export function WeatherWidget() {
if (error || !weather) return null;
return (
<div className="bg-card rounded-lg border border-card-border p-4 h-full" data-testid="widget-weather">
<div className="flex items-center gap-2 mb-3">
<Thermometer className="w-4 h-4 text-primary" />
<h3 className="font-bold text-card-foreground text-sm">Wetter</h3>
</div>
<div className="flex items-center gap-4">
<div className="flex-shrink-0">
{getWeatherIcon(weather.weatherCode)}
</div>
<div className="bg-card rounded-lg border border-card-border px-3 py-2" data-testid="widget-weather">
<div className="flex items-center gap-3">
<div className="flex-shrink-0">{getWeatherIcon(weather.weatherCode)}</div>
<div className="flex-1 min-w-0">
<div className="text-2xl font-bold text-card-foreground">{weather.temperature}°C</div>
<div className="text-xs text-muted-foreground">{getWeatherText(weather.weatherCode)}</div>
<div className="flex items-baseline gap-1.5">
<span className="text-lg font-bold text-card-foreground">{weather.temperature}°C</span>
<span className="text-[10px] text-muted-foreground">{getWeatherText(weather.weatherCode)}</span>
</div>
<div className="flex items-center gap-3 text-[10px] text-muted-foreground">
<span className="flex items-center gap-0.5"><MapPin className="w-2.5 h-2.5" />{weather.city}</span>
<span className="flex items-center gap-0.5"><Wind className="w-2.5 h-2.5" />{weather.windSpeed} km/h</span>
<span className="flex items-center gap-0.5"><Droplets className="w-2.5 h-2.5" />{weather.humidity}%</span>
</div>
</div>
</div>
<div className="flex items-center gap-1 mt-2 text-[10px] text-muted-foreground">
<MapPin className="w-3 h-3" />
<span>{weather.city}</span>
</div>
<div className="flex items-center gap-4 mt-2 text-[10px] text-muted-foreground">
<span className="flex items-center gap-1"><Wind className="w-3 h-3" /> {weather.windSpeed} km/h</span>
<span className="flex items-center gap-1"><Droplets className="w-3 h-3" /> {weather.humidity}%</span>
</div>
</div>
);
}