Michael/LogiFlow
1
0 Fork 0
mirror of https://github.com/R0m1k3/LogiFlow.git synced 2026-10-11 17:27:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve weather widget readability with clear daily and yearly temperature labels

Browse Source 
Refactor the WeatherWidget component to add "Aujourd'hui" and "Année dernière" headers for better temperature comparison, adjusting layout with flex and self-center properties.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d43bd811-9372-45a7-8ac9-4a954c0538e1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/d43bd811-9372-45a7-8ac9-4a954c0538e1/g5c0JYM
This commit is contained in:
michaelschal committed 2025-08-15 09:23:17 +00:00
1 parent 1a94e4c4ca
commit 77e3214491
1 file changed
+10 -10
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/WeatherWidget.tsx
+10 -10
View File
@@ -169,31 +169,31 @@ export default function WeatherWidget() {
</div>
</div>
{/* Températures actuelles */}
<div className="flex items-center gap-3">
{/* Températures avec en-têtes */}
<div className="flex items-stretch gap-3">
<div className="text-center">
<div className="text-xs text-slate-500 dark:text-slate-400 mb-1 font-medium">
Aujourd'hui
</div>
<div className="text-2xl font-bold text-slate-800 dark:text-slate-100">
{currentTemp !== undefined ? `${Math.round(currentTemp)}°` : '--°'}
</div>
<div className="text-xs text-slate-500 dark:text-slate-400">
Aujourd'hui
</div>
</div>
{/* Comparaison avec l'an dernier */}
{previousTemp !== undefined && (
<>
<div className="h-12 w-px bg-slate-300 dark:bg-slate-600"></div>
<div className="text-center min-w-[80px]">
<div className="h-12 w-px bg-slate-300 dark:bg-slate-600 self-center"></div>
<div className="text-center min-w-[90px]">
<div className="text-xs text-slate-500 dark:text-slate-400 mb-1 font-medium">
Année dernière
</div>
<div className="flex items-center justify-center gap-1 mb-1">
<WeatherIcon condition={weather.previousYear?.condition || ''} size={16} />
<div className="text-lg font-semibold text-slate-600 dark:text-slate-300">
{Math.round(previousTemp)}°
</div>
</div>
<div className="text-xs text-slate-500 dark:text-slate-400 mb-1">
Année dernière
</div>
<div className="text-xs text-slate-600 dark:text-slate-300 font-medium leading-tight">
{translateToFrench(weather.previousYear?.condition || '')}
</div>