Climate hub: client-side search + alphabetical results (#110)
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:
parent
39d4b7f725
commit
b3faaae717
1 changed files with 15 additions and 0 deletions
|
|
@ -1568,6 +1568,21 @@ td.rec-date { color: var(--muted); font-size: 13px; }
|
|||
|
||||
/* Hub / directory of cities */
|
||||
/* 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 > summary {
|
||||
cursor: pointer; padding: 12px 4px; font-weight: 700; font-size: 16px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue