gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.44 - New Filters, profiles & Mobile fixes

Browse Source
This commit is contained in:
fraxle
2026-05-17 16:01:34 +01:00
parent bc4fd3e6f1
commit 1cd2cd0ab4
11 changed files with 640 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/base.css
+1 -2
View File
@@ -31,7 +31,6 @@
JetBrains Mono numeric monospace table data
════════════════════════════════════════════════════════════════════════ */
/* ── 1. FONTS + RESET ───────────────────────────────────────────────── */
/* Font loading is handled in index.html via a non-blocking <link rel="preload">
@@ -177,7 +176,7 @@ body {
/* ── Mobile nav drawer ──────────────────────────────────────────────── */
@media (max-width: 640px) {
.utci-app {
padding: 88px 16px 24px; /* 88px = 72px nav height + 16px breathing room */
padding: 96px 16px 24px; /* 96px = 72px nav height + 24px breathing room */
}
/* Show wordmark in nav bar, hide it from main content */
assets/css/header.css
-33
View File
@@ -2,7 +2,6 @@
header.css — Page header: title wordmark, UTCI dial, and search box.
════════════════════════════════════════════════════════════════════════ */
/* ── 4. HEADER (title + dial + search, three-column grid) ──────────── */
.utci-header {
@@ -45,15 +44,6 @@
color: #1e1208;
}
.utci-title .title-beta { /* the small "beta" subscript */
font-size: 0.38em;
text-transform: none;
font-weight: 400;
letter-spacing: 0.05em;
vertical-align: super;
color: #b09870;
}
/* "See the sun the way..." */
.utci-tagline {
font-family: Fraunces, serif;
@@ -63,29 +53,6 @@
margin-top: 14px;
}
/* The credits line under the tagline */
.utci-subtitle {
font-family: Manrope, sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 10px;
color: #b09870;
}
.utci-subtitle-link { /* The "UTCI" link in the credits */
color: #c8922a;
text-decoration: none;
border-bottom: 1px solid rgba(200, 146, 42, 0.4);
transition: border-color 0.2s, color 0.2s;
}
.utci-subtitle-link:hover {
color: #a06e18;
border-bottom-color: #a06e18;
}
/* "↳ Pangbourne, Berkshire" */
.utci-current-loc {
font-family: Fraunces, serif;
assets/css/table.css
+103 -89
View File
@@ -3,7 +3,6 @@
now-row and night-row decorations.
════════════════════════════════════════════════════════════════════════ */
/* ── 5. DAY TABS (today / tomorrow / etc.) ─────────────────────────── */
/* Note: each tab's background colour comes from inline styles in
app.js (the confidence bands). This file only handles spacing,
@@ -241,31 +240,6 @@
color: #fff;
}
/* Burn select — unlike regular col-toggle buttons, the select never
goes full-brass background so the native dropdown list stays readable.
Active state = brass border + brass text on parchment.
Inactive state = same as a regular col-toggle pill. */
.burn-select {
cursor: pointer;
outline: none;
}
/* Override the inherited .col-toggle.on brass background */
.col-toggle.burn-select.on {
background: #f5edd6;
color: #c8922a;
border-color: #c8922a;
font-weight: 600;
}
.col-toggle.burn-select.on:hover {
background: #fef3dc;
color: #c8922a;
border-color: #c8922a;
}
.burn-select:focus {
border-color: #c8922a;
outline: none;
}
/* ── Vehicle group: select + windows-open checkbox fused together ── */
.col-toggle-group {
display: inline-flex;
@@ -287,69 +261,12 @@
}
.col-toggle-group .grouped-left {
border-right: none !important;
border-radius: 20px 0 0 20px !important;
border-radius: 0 !important;
}
.col-toggle-group .cs-wrap:only-child .grouped-left,
.col-toggle-group .cs-wrap:last-child .grouped-left {
border-right: 1.5px solid #c9b08a !important;
border-radius: 20px !important;
}
/* The checkbox pill — same height/padding as a col-toggle but styled as a label */
.col-toggle-vent {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px 5px 10px;
font-size: 12px;
font-family: Manrope, sans-serif;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
border: 1.5px solid #c9b08a;
border-left: 1px solid #d4c0a0; /* softer join line */
border-radius: 0 20px 20px 0;
background: #fef8ee;
color: #6b4228;
user-select: none;
transition: background 0.15s, color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.col-toggle-vent:hover {
border-color: #c8922a;
color: #6b4f2a;
background: #fef3dc;
}
.col-toggle-vent.on {
background: #c8922a;
border-color: #c8922a;
color: #fff;
}
/* Custom checkbox square inside the vent label */
.vent-checkbox {
display: inline-block;
width: 12px;
height: 12px;
border: 1.5px solid currentColor;
border-radius: 3px;
background: transparent;
flex-shrink: 0;
position: relative;
transition: background 0.12s;
}
.vent-checkbox.checked::after {
content: '';
position: absolute;
left: 2px;
top: -1px;
width: 5px;
height: 8px;
border: 2px solid currentColor;
border-top: none;
border-left: none;
transform: rotate(45deg);
border-radius: 0 !important;
}
@@ -636,10 +553,6 @@
.col-info-close:hover {
color: #4a3420;
}
then sit with balanced visual padding on either side. */
.utci-table th.utci-tight-head {
letter-spacing: 0.04em;
}
/* ── 8. NOW-ROW & NIGHT-ROW DECORATIONS ─────────────────────────────── */
@@ -715,3 +628,104 @@
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ── FILTER PROFILES + COLUMN TOGGLES — mobile fixes ───────────────── */
@media (max-width: 640px) {
/* ── Profile bar ────────────────────────────────────────────────────
Keep flex-wrap but make every child a consistent ~31% width so
they land in tidy rows of 3. The label gets its own full row. */
.filter-profiles {
flex-wrap: wrap;
gap: 6px;
padding: 10px 10px;
align-items: stretch;
}
.filter-profiles-label {
flex: 0 0 100%; /* own row */
margin-right: 0;
margin-bottom: 0;
}
/* Hide vertical pipe dividers — not needed when wrapping */
.profile-divider {
display: none;
}
/* Plain profile buttons: fixed ~31% so 3 fit per row */
.profile-btn {
flex: 0 0 calc(33.33% - 4px);
text-align: center;
padding: 7px 2px;
font-size: 11px;
letter-spacing: 0.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* CustomSelect (Activities / Places dropdowns) — same width as buttons */
.filter-profiles .cs-wrap {
flex: 0 0 calc(33.33% - 4px);
}
.filter-profiles .cs-btn {
width: 100%;
padding: 7px 6px;
font-size: 11px;
letter-spacing: 0.03em;
justify-content: center;
}
/* ── Column toggles bar ─────────────────────────────────────────────
Same approach — label full row, toggles at ~31% each. */
.col-toggles {
flex-wrap: wrap;
gap: 6px;
padding: 10px 10px;
align-items: stretch;
}
.col-toggles-label {
flex: 0 0 100%;
margin-right: 0;
margin-bottom: 0;
}
.col-toggle {
flex: 0 0 calc(33.33% - 4px);
text-align: center;
padding: 7px 2px;
font-size: 11px;
letter-spacing: 0.03em;
}
/* Pollen CustomSelect in col-toggles — match toggle width */
.col-toggles .cs-wrap {
flex: 0 0 calc(33.33% - 4px);
}
.col-toggles .cs-btn {
width: 100%;
padding: 7px 6px;
font-size: 11px;
letter-spacing: 0.03em;
justify-content: center;
}
/* Fused vehicle group (select + vent pill): spans 2 slots = ~65% */
.col-toggle-group {
flex: 0 0 calc(66.66% - 1px);
display: inline-flex;
align-items: stretch;
}
.col-toggle-group .cs-wrap {
flex: 1;
}
.col-toggle-group .cs-btn {
width: 100%;
font-size: 11px;
padding: 7px 6px;
justify-content: center;
}
}
assets/css/ui.css
+50 -10
View File
@@ -2,7 +2,6 @@
ui.css — Status banners, legend, about block, footer, and responsive.
════════════════════════════════════════════════════════════════════════ */
/* ── EVENT BANNER ───────────────────────────────────────────────────── */
/* Animated slide-down banner for cosmic/weather/promo events. */
@@ -196,9 +195,8 @@
.almanac-entry-desc {
font-family: Manrope, sans-serif;
font-size: 12px;
color: '#4a3420';
line-height: 1.55;
color: #4a3420;
line-height: 1.55;
}
.almanac-entry-visibility {
display: inline-block;
@@ -236,6 +234,51 @@
}
}
/* ── EVENT BANNER — mobile fixes ────────────────────────────────────── */
@media (max-width: 640px) {
.event-banner-wrap.visible {
max-height: 260px; /* generous — banner can be tall with dates line */
}
.event-banner-wrap {
margin-top: 8px; /* push banner clear of the fixed nav bar */
margin-bottom: 18px; /* breathing room between banner and header */
}
.event-banner {
align-items: flex-start; /* stop dismiss ✕ drifting downward */
gap: 10px;
padding: 18px 12px 14px 14px;
margin-bottom: 0;
border-radius: 4px;
}
.event-banner-emoji {
font-size: 20px;
margin-top: 3px; /* visually balance the dates-line margin-top below */
}
.event-banner-title {
font-size: 15px;
line-height: 1.25;
margin-bottom: 3px;
}
.event-banner-msg {
font-size: 12px;
line-height: 1.5;
}
.event-banner-dismiss {
margin-top: 0; /* keep ✕ pinned flush to the top-right */
padding: 0 2px;
font-size: 16px;
line-height: 1.4;
flex-shrink: 0;
align-self: flex-start;
}
}
/* ── CUSTOM SELECT DROPDOWN ─────────────────────────────────────────── */
/* Cross-platform replacement for native <select> on the col-toggles bar */
@@ -252,6 +295,7 @@
padding: 5px 10px 5px 13px;
cursor: pointer;
border: 1.5px solid #c9b08a;
border-radius: 0;
background: #f5edd6;
color: #6b4228;
font-family: Manrope, sans-serif;
@@ -299,19 +343,15 @@
transform: rotate(225deg);
margin-bottom: -1px;
}
.cs-wrap.open .cs-arrow-old {
transform: rotate(180deg);
}
/* Grouped left (fused with checkbox pill) */
.cs-btn.grouped-left {
border-right: none;
border-radius: 20px 0 0 20px;
border-radius: 0;
}
.cs-btn.grouped-left:only-child,
.cs-btn.grouped-left.last-child {
border-right: 1.5px solid #c9b08a;
border-radius: 20px;
border-radius: 0;
}
/* The floating dropdown panel */
@@ -384,7 +424,7 @@
border-left: none;
margin-left: -1px;
padding-left: 11px;
border-radius: 0 20px 20px 0;
border-radius: 0;
background: #f5edd6;
color: #6b4228;
user-select: none;