Skip to content

Commit 7f985e4

Browse files
rubiojrrubiojr
committed
open-meteo tweaks
1 parent fdd48b0 commit 7f985e4

File tree

3 files changed

+267
-206
lines changed

3 files changed

+267
-206
lines changed

‎pkg/datasources/openmeteo/renderer/weather.css‎

Lines changed: 68 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,18 @@
9292
min-width: 0;
9393
}
9494

95-
.weather-location {
95+
.weather-location-link {
9696
color: var(--text);
9797
font-size: 15px;
9898
font-weight: 600;
9999
line-height: 1.2;
100+
text-decoration: none;
101+
transition: color 0.2s ease;
102+
}
103+
104+
.weather-location-link:hover {
105+
color: var(--accent);
106+
text-decoration: underline;
100107
}
101108

102109
.weather-meta {
@@ -133,6 +140,51 @@
133140
color: var(--accent);
134141
}
135142

143+
/* Weather Main */
144+
.weather-main {
145+
display: flex;
146+
gap: 14px;
147+
padding: 12px 14px;
148+
}
149+
150+
.weather-left {
151+
display: flex;
152+
align-items: center;
153+
gap: 12px;
154+
flex: 0 0 auto;
155+
}
156+
157+
.temp-icon {
158+
font-size: 48px;
159+
line-height: 1;
160+
flex-shrink: 0;
161+
}
162+
163+
.temp-info {
164+
display: flex;
165+
flex-direction: column;
166+
gap: 2px;
167+
}
168+
169+
.temp-value {
170+
font-size: 32px;
171+
font-weight: 700;
172+
color: var(--text);
173+
line-height: 1;
174+
}
175+
176+
.temp-condition {
177+
font-size: 14px;
178+
font-weight: 500;
179+
color: var(--text-dim);
180+
}
181+
182+
.temp-feels {
183+
font-size: 11px;
184+
color: var(--text-faint);
185+
font-style: italic;
186+
}
187+
136188
.weather-details {
137189
display: flex;
138190
gap: 24px;
@@ -143,23 +195,21 @@
143195
.weather-detail {
144196
display: flex;
145197
flex-direction: column;
146-
align-items: flex-start;
198+
align-items: center;
147199
gap: 2px;
148200
}
149201

150202
.detail-label {
151-
font-size: 10px;
203+
font-size: 16px;
152204
color: var(--text-dim);
153-
font-weight: 500;
154-
text-align: left;
155-
white-space: nowrap;
205+
text-align: center;
156206
}
157207

158208
.detail-value {
159209
font-size: 13px;
160210
font-weight: 600;
161211
color: var(--text);
162-
text-align: left;
212+
text-align: center;
163213
white-space: nowrap;
164214
}
165215

@@ -170,6 +220,15 @@
170220
margin-top: 2px;
171221
}
172222

223+
.rain-yes {
224+
color: rgb(59, 130, 246);
225+
font-weight: 700;
226+
}
227+
228+
.rain-no {
229+
color: var(--text-faint);
230+
}
231+
173232
/* Hourly Forecast */
174233
.hourly-forecast-section {
175234
border-top: 1px solid var(--border);
@@ -309,12 +368,7 @@
309368
font-size: 28px;
310369
}
311370

312-
.weather-info {
313-
flex: 1;
314-
min-width: 150px;
315-
}
316-
317-
.weather-location {
371+
.weather-location-link {
318372
font-size: 14px;
319373
}
320374

@@ -341,7 +395,7 @@
341395
}
342396

343397
.detail-label {
344-
font-size: 9px;
398+
font-size: 14px;
345399
}
346400

347401
.detail-value {

‎pkg/datasources/openmeteo/renderer/weather.templ‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -146,71 +146,76 @@ templ WeatherCompact(block core.Block) {
146146
}
147147
</div>
148148
<div class="weather-info">
149-
<div class="weather-location">
150-
if location, ok := block.Metadata()["location"].(string); ok {
151-
{ location }
152-
} else {
153-
Unknown
149+
if lat, latOk := block.Metadata()["latitude"].(float64); latOk {
150+
if lon, lonOk := block.Metadata()["longitude"].(float64); lonOk {
151+
<a
152+
href={ templ.URL(fmt.Sprintf("https://www.openstreetmap.org/?mlat=%.4f&mlon=%.4f&zoom=12", lat, lon)) }
153+
target="_blank"
154+
class="weather-location-link"
155+
>
156+
if location, ok := block.Metadata()["location"].(string); ok {
157+
{ location }
158+
} else {
159+
Unknown
160+
}
161+
if country, ok := block.Metadata()["country"].(string); ok {
162+
, { country }
163+
}
164+
</a>
154165
}
155-
if country, ok := block.Metadata()["country"].(string); ok {
156-
, { country }
157-
}
158-
</div>
166+
}
159167
<div class="weather-meta">
160168
<span class="weather-time">{ formatRelativeTime(block.CreatedAt()) }</span>
161-
if timezone, ok := block.Metadata()["timezone"].(string); ok && timezone != "" {
162-
<span class="weather-separator">|</span>
163-
<span class="weather-timezone">{ timezone }</span>
164-
}
165-
if lat, latOk := block.Metadata()["latitude"].(float64); latOk {
166-
if lon, lonOk := block.Metadata()["longitude"].(float64); lonOk {
167-
<span class="weather-separator">|</span>
168-
<a
169-
href={ templ.URL(fmt.Sprintf("https://www.openstreetmap.org/?mlat=%.4f&mlon=%.4f&zoom=12", lat, lon)) }
170-
target="_blank"
171-
class="weather-map"
172-
>
173-
view map
174-
</a>
175-
}
176-
}
177169
</div>
178170
</div>
179171
<div class="weather-details">
180172
<div class="weather-detail">
181173
if temp, ok := block.Metadata()["temperature"].(float64); ok {
182-
<span class="detail-label">🌡️ Temperature</span>
174+
<span class="detail-label">🌡️</span>
183175
<span class="detail-value">{ fmt.Sprintf("%.1f", temp) }°</span>
184176
}
185177
</div>
186178
if windSpeed, ok := block.Metadata()["wind_speed"].(float64); ok {
187179
<div class="weather-detail">
188-
<span class="detail-label">💨 Wind</span>
180+
<span class="detail-label">💨</span>
189181
<span class="detail-value">{ fmt.Sprintf("%.1f", windSpeed) } km/h</span>
190182
</div>
191183
}
192184
if humidity, ok := block.Metadata()["humidity"].(float64); ok {
193185
<div class="weather-detail">
194-
<span class="detail-label">💧 Humidity</span>
186+
<span class="detail-label">💧</span>
195187
<span class="detail-value">{ fmt.Sprintf("%.1f", humidity) }%</span>
196188
</div>
197189
}
198190
if uvIndex, ok := block.Metadata()["uv_index"].(float64); ok {
199191
<div class="weather-detail">
200-
<span class="detail-label">☀️ UV Index</span>
192+
<span class="detail-label">☀️</span>
201193
<span class="detail-value">{ fmt.Sprintf("%.0f", uvIndex) }</span>
202194
</div>
203195
}
204196
if pressure, ok := block.Metadata()["surface_pressure"].(float64); ok {
205197
<div class="weather-detail">
206-
<span class="detail-label">📊 Pressure</span>
198+
<span class="detail-label">📊</span>
207199
<span class="detail-value">{ fmt.Sprintf("%.1f", pressure) } hPa</span>
208200
</div>
209201
}
202+
if hourlyForecast, ok := block.Metadata()["hourly_forecast"].([]interface{}); ok && len(hourlyForecast) > 0 {
203+
<div class="weather-detail">
204+
if hasRain(hourlyForecast) {
205+
<span class="detail-label">🌧️</span>
206+
<span class="detail-value rain-yes">Yes</span>
207+
} else {
208+
<span class="detail-label">🌧️</span>
209+
<span class="detail-value rain-no">No</span>
210+
}
211+
</div>
212+
}
210213
</div>
211214
</div>
212215
}
213216

217+
218+
214219
// HourlyForecast displays collapsible hourly forecast table
215220
templ HourlyForecast(metadata map[string]interface{}) {
216221
if hourlyForecast, ok := metadata["hourly_forecast"].([]interface{}); ok && len(hourlyForecast) > 0 {

0 commit comments

Comments
 (0)