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

Climate hub: client-side search + alphabetical results (#110)

Browse source 
Add a search box to /climate that filters to a flat, alphabetical list of matching
cities (by city or country name), shown with their country; clearing it restores the
collapsible directory. The index is built from the already-crawlable links, so it's
a pure progressive enhancement (no SEO impact). Also sort cities alphabetically
within each country in the directory (were population-ordered).
This commit is contained in:
Emi Griffith 2026-07-15 21:44:18 -07:00 committed by GitHub
parent 39d4b7f725
commit b3faaae717
1 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
static/style.css
View file

@ -1568,6 +1568,21 @@ td.rec-date { color: var(--muted); font-size: 13px; }
/* Hub / directory of cities */ /* Hub / directory of cities */
/* Collapsible country sections (native <details>). */ /* Collapsible country sections (native <details>). */
/* Hub search box + flat alphabetical results. */
.hub-search { margin: 16px 0 4px; }
.hub-search input {
width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
background: var(--bg); color: var(--text); font-size: 16px;
}
.hub-search input:focus { outline: none; border-color: var(--accent); }
.hub-results { list-style: none; margin: 8px 0; padding: 0; }
.hub-results[hidden] { display: none; }
.hub-results li { padding: 11px 4px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 12px; }
.hub-results li a { text-decoration: none; font-weight: 600; }
.hub-r-country { color: var(--muted); font-size: 13px; margin-left: auto; text-align: right; white-space: nowrap; }
.hub-results .hub-empty { color: var(--muted); }
#hub-directory[hidden] { display: none; }
details.hub-country { border-bottom: 1px solid var(--border); } details.hub-country { border-bottom: 1px solid var(--border); }
details.hub-country > summary { details.hub-country > summary {
cursor: pointer; padding: 12px 4px; font-weight: 700; font-size: 16px; cursor: pointer; padding: 12px 4px; font-weight: 700; font-size: 16px;