Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 9 Projects Releases Packages Wiki Activity Actions

Stack the location head context top-down; drop sq-mi-cell wording (#19)

Browse source 
The Weekly location card joined coordinates, cell size, climatology range
and sample count into one dot-separated meta line. Stack them as one fact
per line so the important context reads top-down instead of as a run of
tags. Drop the '~N sq mi cell' wording from the Weekly/Day/Calendar meta
lines and the map hint.
This commit is contained in:
Emi Griffith 2026-07-11 00:10:46 -07:00 committed by GitHub
parent 313a593a44
commit c09ec958d6
5 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
static/app.js
View file

@ -131,8 +131,11 @@ function render(data) {
<div class="loc-head">
<div class="loc-title">
<h2>${placeLabel(data)}</h2>
<p class="meta">${data.place ? coords + " · " : ""}~${cell.area_sq_mi} sq mi cell · climatology from ${yrs}
(${c.n_samples.toLocaleString()} days around this date)</p>
<ul class="loc-meta">
${data.place ? `<li>${coords}</li>` : ""}
<li>Climatology from ${yrs}</li>
<li>${c.n_samples.toLocaleString()} days around this date</li>
</ul>
</div>
<div class="share">
<button id="btn-link" title="Copy a link back to this exact view">${IC.link} Copy link</button>

2
static/calendar.js
View file

@ -552,7 +552,7 @@ function renderHead(remaining, loading) {
calHead.innerHTML = `
<h2>${place}</h2>
<p class="meta">${data.range.start} → ${data.range.end} · ${data.days.length.toLocaleString()} days graded
(~${years.toFixed(1)} yr) · ~${cell.area_sq_mi} sq mi cell${note}</p>
(~${years.toFixed(1)} yr)${note}</p>
<p class="cal-hint">${IC_POINTER} Tap or click any day for its weather and grades</p>`;
}

2
static/day.js
View file

@ -137,7 +137,7 @@ function render(data) {
dayHead.innerHTML = `
<h2>${nice}</h2>
${wt ? `<p class="day-weather">${wt.icon} ${wt.text}</p>` : ""}
<p class="meta">${place} · ~${cell.area_sq_mi} sq mi cell
<p class="meta">${place}
· ${d.n_samples.toLocaleString()} days around this date (${yrs})</p>`;
dayBody.innerHTML = [

2
static/index.html
View file

@ -35,7 +35,7 @@
<input id="date-input" type="date" />
</label>
<button type="button" id="today-btn" class="today-chip" title="Reset the target date to today">Today</button>
<span class="hint">Cells are ~4&nbsp;sq&nbsp;mi. <a href="legend">What do the grades mean? →</a></span>
<span class="hint"><a href="legend">What do the grades mean? →</a></span>
</div>
</section>

3
static/style.css
View file

@ -134,6 +134,9 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
.loc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.loc-head h2 { margin: 0 0 2px; font-size: 18px; }
.loc-head .meta { color: var(--muted); font-size: 12.5px; margin: 0; }
/* Context stacked top-down, one fact per line, instead of dot-joined tags. */
.loc-meta { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.loc-meta li { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.share { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.share button, .share .share-btn {
padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border);