d1ec114b4a
The all-time-records redesign (#106) removed the min-width floor that let the wide records tables scroll, so the month and season records tables — still five columns (value + separate date, twice) — compressed below their content on phones and overlapped/clipped. Fold each record's date under its value so those tables become three columns (period · record high · record low), which fit any width without horizontal scroll. Also tighten all climate tables under 560px (smaller font + padding) so a hot city's 3-digit °F values with °C in parens never collide in the city page's normals table.
88 lines
4.3 KiB
Django/Jinja
88 lines
4.3 KiB
Django/Jinja
{% extends "base.html.j2" %}
|
||
{% block title %}{{ page_title }}{% endblock %}
|
||
{% block description %}{{ page_description }}{% endblock %}
|
||
{% block canonical_path %}{{ canonical_path }}{% endblock %}
|
||
{% block jsonld %}<script type="application/ld+json">{{ jsonld_str | safe }}</script>{% endblock %}
|
||
{% block content %}
|
||
<nav class="breadcrumb" aria-label="Breadcrumb">
|
||
{% for label, href in breadcrumb %}{% if href %}<a href="{{ href }}">{{ label }}</a>{% else %}<span>{{ label }}</span>{% endif %}{% if not loop.last %} <span class="sep">›</span> {% endif %}{% endfor %}
|
||
</nav>
|
||
|
||
<article class="climate-page">
|
||
<h1>{{ display }} weather records</h1>
|
||
<p class="lede">Record high and low temperatures for <b>{{ display }}</b> — by month, by season, and
|
||
all-time — with the dates they occurred, across {{ year_range[0] }}–{{ year_range[1] }} of daily
|
||
climate history.{% if all_time.tmax and all_time.tmin %} Its hottest day on record reached
|
||
{{ all_time.tmax.max | round | int }}°F ({{ ((all_time.tmax.max - 32) * 5 / 9) | round | int }}°C)
|
||
on {{ all_time.tmax.max_date }}; its coldest fell to
|
||
{{ all_time.tmin.min | round | int }}°F ({{ ((all_time.tmin.min - 32) * 5 / 9) | round | int }}°C)
|
||
on {{ all_time.tmin.min_date }}.{% endif %}</p>
|
||
|
||
<section class="climate-records-section">
|
||
<h2>Records by month</h2>
|
||
<p>The warmest and coldest {{ name }} has ever been in each calendar month. Tap a month for its full
|
||
averages and typical range.</p>
|
||
<div class="table-wrap">
|
||
<table class="normals-table records-table">
|
||
<thead><tr><th>Month</th><th>Record high</th><th>Record low</th></tr></thead>
|
||
<tbody>
|
||
{% for m in monthly %}
|
||
<tr>
|
||
<td><a href="{{ base }}/climate/{{ city.slug }}/{{ m.slug }}">{{ m.name }}</a></td>
|
||
<td class="t-cell t-{{ temp_class(m.high_f) }}">{{ m.high }}<span class="rec-on">{{ m.high_date }}</span></td>
|
||
<td class="t-cell t-{{ temp_class(m.low_f) }}">{{ m.low }}<span class="rec-on">{{ m.low_date }}</span></td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="climate-records-section">
|
||
<h2>Records by season</h2>
|
||
<p>Meteorological seasons for the {{ hemisphere }} Hemisphere — each a three-month span — and the
|
||
most extreme {{ name }} has recorded within each.</p>
|
||
<div class="table-wrap">
|
||
<table class="normals-table records-table">
|
||
<thead><tr><th>Season</th><th>Record high</th><th>Record low</th></tr></thead>
|
||
<tbody>
|
||
{% for s in seasonal %}
|
||
<tr>
|
||
<td>{{ s.name }} <span class="season-span">({{ s.span }})</span></td>
|
||
<td class="t-cell t-{{ temp_class(s.high_f) }}">{{ s.high }}<span class="rec-on">{{ s.high_date }}</span></td>
|
||
<td class="t-cell t-{{ temp_class(s.low_f) }}">{{ s.low }}<span class="rec-on">{{ s.low_date }}</span></td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="climate-records-section">
|
||
<h2>All-time records</h2>
|
||
<p>The most extreme value {{ name }} has recorded for each metric across its entire history.</p>
|
||
<div class="records-grid">
|
||
{% for r in rows %}
|
||
<div class="record-card">
|
||
<h3 class="rc-metric">{{ r.label }}</h3>
|
||
<div class="rc-row rc-high">
|
||
<span class="rc-tag">{% if r.label == 'Precip' %}Wettest{% else %}Highest{% endif %}</span>
|
||
<span class="rc-val">{{ r.high }}</span>
|
||
<span class="rc-date">{{ r.high_date }}</span>
|
||
</div>
|
||
<div class="rc-row rc-low">
|
||
<span class="rc-tag">{% if r.label == 'Precip' %}Driest{% else %}Lowest{% endif %}</span>
|
||
<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>
|
||
</section>
|
||
|
||
<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>
|
||
</article>
|
||
{% endblock %}
|