explorigin/weather_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add wind/precip

Browse Source
This commit is contained in:
Timothy Farrell 2026-07-24 02:30:32 +00:00
parent ddce5c15b3
commit adeb1690e8
1 changed files with 58 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/HourlyForecast.svelte
View File

@ -55,15 +55,16 @@
<span class="hour-temp">{Math.round(hour.temp)}{unit}</span> <span class="hour-temp">{Math.round(hour.temp)}{unit}</span>
{#if hour.precip > 0} {#if hour.precip > 0}
<div class="precip-bar-container"> <div class="precip-bar-container">
<div class="precip-bar" style="height: {Math.min(hour.precip, 100)}%"></div> <div class="precip-bar" style="--precip: {Math.min(hour.precip, 100)}%"></div>
</div> </div>
<span class="precip-value">{hour.precip}%</span> <span class="precip-value">{hour.precip}%</span>
{:else} {:else}
<div class="precip-bar-container"> <div class="precip-bar-container">
<div class="precip-bar" style="height: 0"></div> <div class="precip-bar" style="--precip: 0%"></div>
</div> </div>
<span class="precip-value">--</span> <span class="precip-value">--</span>
{/if} {/if}
<span class="hour-wind" title="Wind speed">💨 {Math.round(hour.windSpeed)}</span>
</div> </div>
{/each} {/each}
</div> </div>
@ -144,9 +145,10 @@
.precip-bar { .precip-bar {
width: 100%; width: 100%;
height: var(--precip);
background: var(--color-rain); background: var(--color-rain);
border-radius: 2px; border-radius: 2px;
transition: height 0.3s ease; transition: height 0.3s ease, width 0.3s ease;
min-height: 0; min-height: 0;
} }
@ -156,23 +158,70 @@
white-space: nowrap; white-space: nowrap;
} }
.hour-wind {
font-size: 0.68rem;
color: var(--color-text-muted);
white-space: nowrap;
margin-top: 2px;
}
@media (max-width: 1023px) { @media (max-width: 1023px) {
.hour-item { .hourly-scroll {
min-width: 64px; display: flex;
padding: 10px 6px; flex-direction: column;
gap: 4px; gap: 4px;
overflow-x: visible;
scroll-snap-type: none;
}
.hour-item {
flex-direction: row;
align-items: center;
justify-content: space-between;
min-width: 0;
padding: 10px 12px;
gap: 8px;
scroll-snap-align: none;
}
.hour-time {
font-size: 0.78rem;
min-width: 42px;
} }
.hour-icon { .hour-icon {
font-size: 1.2rem; font-size: 1.3rem;
} }
.hour-temp { .hour-temp {
font-size: 0.82rem; font-size: 0.85rem;
min-width: 40px;
text-align: right;
} }
.precip-bar-container { .precip-bar-container {
height: 24px; width: 50px;
height: 4px;
}
.precip-bar {
height: 100%;
width: var(--precip);
min-width: 0;
}
.precip-value {
font-size: 0.7rem;
min-width: 28px;
text-align: right;
}
.hour-wind {
font-size: 0.7rem;
color: var(--color-text-muted);
white-space: nowrap;
min-width: 48px;
text-align: right;
} }
} }
</style> </style>