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

Records: color-accented cards, vertical on mobile (#106)

Browse source 
Replace the 5-column records table (which forced horizontal scrolling on mobile —
only high OR low visible) with a responsive card grid: one card per metric, each
with a red-accented 'Highest' row and a blue-accented 'Lowest' row (tier colors).
Grids on desktop, stacks to a single column on mobile with high/low stacked
vertically — no horizontal scroll. Precip reads Wettest / longest dry spell.
This commit is contained in:
Emi Griffith 2026-07-15 20:37:51 -07:00 committed by GitHub
parent 5f380bcadd
commit d24049a78d
1 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
templates/records.html.j2
View file

@ -12,23 +12,25 @@
<p class="lede">All-time record highs and lows for {{ display }}, and the dates they occurred, across <p class="lede">All-time record highs and lows for {{ display }}, and the dates they occurred, across
{{ year_range[0] }}–{{ year_range[1] }} of daily climate history.</p> {{ year_range[0] }}–{{ year_range[1] }} of daily climate history.</p>
<div class="table-wrap"> <div class="records-grid">
<table class="normals-table records-table">
<thead><tr><th>Metric</th><th>Record high</th><th>On</th><th>Record low</th><th>On</th></tr></thead>
<tbody>
{% for r in rows %} {% for r in rows %}
<tr> <div class="record-card">
<td>{{ r.label }}</td> <h2 class="rc-metric">{{ r.label }}</h2>
<td>{{ r.high }}</td><td>{{ r.high_date }}</td> <div class="rc-row rc-high">
<td>{{ r.low }}</td><td>{{ r.low_date }}</td> <span class="rc-tag">{% if r.label == 'Precip' %}Wettest{% else %}Highest{% endif %}</span>
</tr> <span class="rc-val">{{ r.high }}</span>
{% endfor %} <span class="rc-date">{{ r.high_date }}</span>
</tbody>
</table>
</div> </div>
<p class="records-note muted">Rainfall has no meaningful record low, so its “record low” <div class="rc-row rc-low">
column shows the <b>longest run of consecutive days without measurable rain</b> and the <span class="rc-tag">{% if r.label == 'Precip' %}Driest{% else %}Lowest{% endif %}</span>
date that dry spell began.</p> <span class="rc-val">{{ r.low }}</span>
<span class="rc-date">{{ r.low_date }}</span>
</div>
</div>
{% endfor %}
</div>
<p class="records-note muted">For rainfall, the “driest” figure is the <b>longest run of consecutive
days without measurable rain</b>, dated to when that dry spell began.</p>
<p><a class="cta" href="{{ base }}/#{{ '%.5f,%.5f' | format(city.lat, city.lon) }}">Grade {{ name }}'s weather now →</a></p> <p><a class="cta" href="{{ base }}/#{{ '%.5f,%.5f' | format(city.lat, city.lon) }}">Grade {{ name }}'s weather now →</a></p>
<p class="climate-foot muted"><a href="{{ base }}/climate/{{ city.slug }}">‹ Back to {{ name }} climate</a></p> <p class="climate-foot muted"><a href="{{ base }}/climate/{{ city.slug }}">‹ Back to {{ name }} climate</a></p>