thermograph/frontend/server/internal/render/templates/month.html.tmpl

60 lines
3 KiB
Cheetah
Raw Normal View History

{{/* Ported from templates/month.html.j2. Extra data (all display values are
pre-formatted by the handler inside the city's unit scope, as in Python):
.Breadcrumb; .City (needs .Slug); .Display/.Name/.MonthName string;
.YearRange [2]int; .AvgHigh/.AvgLow template.HTML (temp spans);
.AvgHighCls/.AvgLowCls string (temp_class names);
.Stats []{Label string; Value template.HTML};
.Records []{Label, HighTag, LowTag string; High, Low template.HTML;
HighDate, LowDate string};
.ToolHref string — the full "{base}/#{lat:.5f},{lon:.5f}" href, built by
the handler: composed inline (Jinja's {{ base }}/#{{ tool_hash }}) the
fragment would hit html/template's urlEscaper and %-escape the comma;
.CompareURL string; .Prev/.Next {Slug, Name string}. */}}{{template "base_head_start" .}}{{template "base_head_end" .}}{{template "base_body_start" .}}{{template "breadcrumb" .}}
<article class="climate-page">
<h1>Weather in {{.Display}} in {{.MonthName}}</h1>
<p class="lede">In an average {{.MonthName}}, {{.Name}} sees a daily high around
<b class="t-inline t-{{.AvgHighCls}}">{{.AvgHigh}}</b> and a low around
<b class="t-inline t-{{.AvgLowCls}}">{{.AvgLow}}</b>, based on
{{index .YearRange 0}}{{index .YearRange 1}} of local climate records.</p>
<table class="normals-table" style="max-width:520px">
<tbody>
{{range .Stats}} <tr><th style="width:55%">{{.Label}}</th><td>{{.Value}}</td></tr>
{{end}} </tbody>
</table>
{{if .Records}} <h2>{{.MonthName}} records</h2>
<p class="muted">The most extreme {{.MonthName}} on record for each metric, across
{{index .YearRange 0}}{{index .YearRange 1}}. For rainfall, the wettest and driest are by
total {{.MonthName}} accumulation.</p>
<div class="records-grid">
{{range .Records}} <div class="record-card">
<h3 class="rc-metric">{{.Label}}</h3>
<div class="rc-row rc-high">
<span class="rc-tag">{{.HighTag}}</span>
<span class="rc-val">{{.High}}</span>
<span class="rc-date">{{.HighDate}}</span>
</div>
<div class="rc-row rc-low">
<span class="rc-tag">{{.LowTag}}</span>
<span class="rc-val">{{.Low}}</span>
<span class="rc-date">{{.LowDate}}</span>
</div>
</div>
{{end}} </div>
{{end}}
<p><a class="cta" href="{{.ToolHref}}">See {{.Name}}'s live weather grade →</a></p>
<div class="travel-note">
<p>Visiting <b>{{.Name}}</b> in {{.MonthName}}? See how its comfort stacks up against
where you live.</p>
<a class="cta" href="{{.CompareURL}}">Compare {{.Name}} with your city →</a>
</div>
<p class="climate-foot muted">
<a href="{{.Base}}/climate/{{.City.Slug}}/{{.Prev.Slug}}"> {{.Prev.Name}}</a> ·
<a href="{{.Base}}/climate/{{.City.Slug}}">{{.Name}} climate overview</a> ·
<a href="{{.Base}}/climate/{{.City.Slug}}/{{.Next.Slug}}">{{.Next.Name}} </a>
</p>
</article>
{{template "base_body_end" .}}{{template "base_scripts_default" .}}{{template "base_tail" .}}