feat(whereami): redesign layout, move location name to sidebar, group weather fields
This commit is contained in:
Adriano Caloiaro
parent
36c4dab00d
commit
f941254f58
1 changed files with 40 additions and 41 deletions
|
|
@ -1,8 +1,9 @@
|
|||
{{ define "title" }}
|
||||
{{ try }}
|
||||
{{ $d := resources.GetRemote "https://jellybee.bison-lizard.ts.net/whereami" | transform.Unmarshal }}
|
||||
{{ $title := "Where Am I? :: adriano.fyi" }}
|
||||
{{ $desc := "" }}
|
||||
{{ $title := "Where Am I? :: adriano.fyi" }}
|
||||
{{ $desc := "" }}
|
||||
{{ $r := try (resources.GetRemote "https://jellybee.bison-lizard.ts.net/whereami") }}
|
||||
{{ if not $r.Err }}
|
||||
{{ $d := $r.Value | transform.Unmarshal }}
|
||||
{{ with $d.location.name }}{{ $title = printf "Adriano is in %s :: adriano.fyi" . }}{{ end }}
|
||||
{{ with $d.weather }}
|
||||
{{ $parts := slice }}
|
||||
|
|
@ -11,55 +12,53 @@
|
|||
{{ with .windspeedmph }}{{ $parts = $parts | append (printf "wind %.1f mph" .) }}{{ end }}
|
||||
{{ $desc = delimit $parts ", " }}
|
||||
{{ end }}
|
||||
<title>{{ $title }}</title>
|
||||
<meta property="og:title" content="{{ $title }}">
|
||||
{{ with $desc }}<meta property="og:description" content="{{ . }}">{{ end }}
|
||||
<meta property="og:url" content="https://adriano.fyi/whereami">
|
||||
<meta property="og:type" content="website">
|
||||
{{ catch }}
|
||||
<title>Where Am I? :: adriano.fyi</title>
|
||||
<meta property="og:title" content="Where Am I? :: adriano.fyi">
|
||||
<meta property="og:url" content="https://adriano.fyi/whereami">
|
||||
<meta property="og:type" content="website">
|
||||
{{ end }}
|
||||
<title>{{ $title }}</title>
|
||||
<meta property="og:title" content="{{ $title }}">
|
||||
{{ with $desc }}<meta property="og:description" content="{{ . }}">{{ end }}
|
||||
<meta property="og:url" content="https://adriano.fyi/whereami">
|
||||
<meta property="og:type" content="website">
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
|
||||
<style>
|
||||
#location-name { min-height: 1.5em; }
|
||||
.container { max-width: 1200px; width: 95%; }
|
||||
#page-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
#page-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
#map { height: 520px; }
|
||||
#sidebar { display: flex; flex-direction: column; gap: 0; }
|
||||
#location-name { margin: 0 0 0.15rem 0; min-height: 1.4em; }
|
||||
#wx-meta { font-size: 0.75em; color: #888; margin: 0 0 1rem 0; }
|
||||
#weather-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.4rem 1rem;
|
||||
gap: 0.5rem 1rem;
|
||||
}
|
||||
.wx-card {
|
||||
border-left: 2px solid #ddd;
|
||||
padding: 0.2rem 0 0.2rem 0.5rem;
|
||||
border-left: 2px solid #444;
|
||||
padding: 0.2rem 0 0.2rem 0.6rem;
|
||||
}
|
||||
.wx-label { font-size: 0.72em; color: #888; margin: 0; line-height: 1.2; }
|
||||
.wx-value { font-size: 1.05em; margin: 0; line-height: 1.3; }
|
||||
#weather-updated { font-size: 0.75em; color: #888; margin-bottom: 0.6rem; }
|
||||
.wx-label { font-size: 0.7em; color: #888; margin: 0; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.wx-value { font-size: 1.05em; margin: 0; line-height: 1.4; }
|
||||
</style>
|
||||
|
||||
<div class="container" role="main">
|
||||
<h2 id="location-name">Fetching location…</h2>
|
||||
|
||||
<div id="page-grid">
|
||||
<div id="map"></div>
|
||||
<div id="weather"></div>
|
||||
<div id="sidebar">
|
||||
<h2 id="location-name">Fetching location…</h2>
|
||||
<p id="wx-meta"></p>
|
||||
<div id="weather-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
@ -84,7 +83,6 @@
|
|||
fillColor: '#f03',
|
||||
fillOpacity: 0.25
|
||||
}).addTo(map);
|
||||
|
||||
if (loc.name) {
|
||||
document.getElementById('location-name').textContent = loc.name;
|
||||
} else {
|
||||
|
|
@ -105,10 +103,12 @@
|
|||
function fmt1(v) { return v !== undefined && v !== null ? Math.round(v * 10) / 10 : null; }
|
||||
function fmt0(v) { return v !== undefined && v !== null ? Math.round(v) : null; }
|
||||
var cards = [
|
||||
{ label: 'Temperature', value: fmt1(w.tempf), unit: '°F' },
|
||||
{ label: 'Outdoor temp', value: fmt1(w.tempf), unit: '°F' },
|
||||
{ label: 'Indoor temp', value: fmt1(w.tempinf), unit: '°F' },
|
||||
{ label: 'Feels like', value: fmt1(w.feelsLike), unit: '°F' },
|
||||
{ label: 'Humidity', value: fmt0(w.humidity), unit: '%' },
|
||||
{ label: 'Dew point', value: fmt1(w.dewPoint), unit: '°F' },
|
||||
{ label: 'Humidity', value: fmt0(w.humidity), unit: '%' },
|
||||
{ label: 'Indoor humidity', value: fmt0(w.humidityin), unit: '%' },
|
||||
{ label: 'Wind speed', value: fmt1(w.windspeedmph), unit: 'mph' },
|
||||
{ label: 'Wind gust', value: fmt1(w.windgustmph), unit: 'mph' },
|
||||
{ label: 'Pressure', value: fmt1(w.baromrelin), unit: 'inHg' },
|
||||
|
|
@ -116,21 +116,20 @@
|
|||
{ label: 'Solar', value: fmt0(w.solarradiation), unit: 'W/m²' },
|
||||
{ label: 'Rain (hourly)', value: w.hourlyrainin, unit: 'in' },
|
||||
{ label: 'Rain (daily)', value: w.dailyrainin, unit: 'in' },
|
||||
{ label: 'Indoor temp', value: fmt1(w.tempinf), unit: '°F' },
|
||||
{ label: 'Indoor humidity', value: fmt0(w.humidityin), unit: '%' },
|
||||
].filter(function(c) { return c.value !== null && c.value !== undefined; });
|
||||
|
||||
if (cards.length > 0) {
|
||||
var updated = w.lastUpdated ? new Date(w.lastUpdated).toLocaleTimeString() : '';
|
||||
var html = '<h3 style="margin-bottom:0.3rem">My Weather Station</h3>';
|
||||
if (updated) html += '<div id="weather-updated">updated ' + updated + '</div>';
|
||||
html += '<div id="weather-grid">';
|
||||
cards.forEach(function(c) {
|
||||
html += '<div class="wx-card"><p class="wx-label">' + c.label + '</p><p class="wx-value">' + c.value + (c.unit ? ' ' + c.unit : '') + '</p></div>';
|
||||
});
|
||||
html += '</div>';
|
||||
document.getElementById('weather').innerHTML = html;
|
||||
}
|
||||
var updated = w.lastUpdated ? new Date(w.lastUpdated).toLocaleTimeString() : '';
|
||||
var meta = 'My Weather Station';
|
||||
if (updated) meta += ' · updated ' + updated;
|
||||
document.getElementById('wx-meta').textContent = meta;
|
||||
|
||||
var grid = document.getElementById('weather-grid');
|
||||
cards.forEach(function(c) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'wx-card';
|
||||
div.innerHTML = '<p class="wx-label">' + c.label + '</p><p class="wx-value">' + c.value + (c.unit ? ' ' + c.unit : '') + '</p>';
|
||||
grid.appendChild(div);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(function() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue