da94b082c5
The month and season records tables showed only the record high (of the daytime high) and the record low (of the overnight low) — one extreme each. Show both ends of both metrics: for the daytime high, its record hottest (▲) and the coldest a day ever stayed (▼, its record-low high); for the overnight low, its mildest night (▲, its record-high low) and its record low (▼). All four already came out of all_time_records; they were just being dropped. Restructure each table to Period · Daytime high · Overnight low, with each metric cell carrying two tinted, dated chips (▲ warmest / ▼ coldest). Fits mobile in three columns; the all-time cards already showed both extremes, so this brings the per-period tables in line.
98 lines
4.9 KiB
Django/Jinja
98 lines
4.9 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 %}
|
||
{# A metric's two extremes — ▲ warmest and ▼ coldest it has ever been — as tinted
|
||
chips with the date each occurred. Used for the daytime-high and overnight-low
|
||
columns of the month and season tables. #}
|
||
{% macro extremes(metric) %}
|
||
{% if metric and metric.warm and metric.cold %}
|
||
<div class="rec-ext"><span class="rec-arrow up" aria-hidden="true">▲</span><span class="t-inline t-{{ metric.warm.cls }}">{{ metric.warm.txt }}</span><span class="rec-on">{{ metric.warm.date }}</span></div>
|
||
<div class="rec-ext"><span class="rec-arrow down" aria-hidden="true">▼</span><span class="t-inline t-{{ metric.cold.cls }}">{{ metric.cold.txt }}</span><span class="rec-on">{{ metric.cold.date }}</span></div>
|
||
{% else %}—{% endif %}
|
||
{% endmacro %}
|
||
<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 (▼) both the daytime high and the overnight low have ever been in
|
||
each calendar month — so each column shows its record high <i>and</i> its record low. Tap a
|
||
month for its full averages and typical range.</p>
|
||
<div class="table-wrap">
|
||
<table class="normals-table records-table records-ext">
|
||
<thead><tr><th>Month</th><th>Daytime high</th><th>Overnight low</th></tr></thead>
|
||
<tbody>
|
||
{% for m in monthly %}
|
||
<tr>
|
||
<td><a href="{{ base }}/climate/{{ city.slug }}/{{ m.slug }}">{{ m.name }}</a></td>
|
||
<td>{{ extremes(m.high) }}</td>
|
||
<td>{{ extremes(m.low) }}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="climate-records-section">
|
||
<h2>Records by season</h2>
|
||
<p>The warmest (▲) and coldest (▼) both the daytime high and the overnight low have reached in each
|
||
meteorological season ({{ hemisphere }} Hemisphere — each a three-month span).</p>
|
||
<div class="table-wrap">
|
||
<table class="normals-table records-table records-ext">
|
||
<thead><tr><th>Season</th><th>Daytime high</th><th>Overnight low</th></tr></thead>
|
||
<tbody>
|
||
{% for s in seasonal %}
|
||
<tr>
|
||
<td>{{ s.name }} <span class="season-span">({{ s.span }})</span></td>
|
||
<td>{{ extremes(s.high) }}</td>
|
||
<td>{{ extremes(s.low) }}</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 %}
|