1.7.0
app.js Banner snooze: dismissing a banner suppresses it for 6 hours via localStorage (configurable via BANNER_SNOOZE_HOURS) Vis column header: "Visibility" → "Vis" with utci-tight-head class UTCI+P font: 16px → 13px Vehicle/Indoor col-toggle-group: dynamic col-toggle-group--expanded class when VentPill is visible Wind units appear reverted to m/s in the diff (that was a pre-existing change from before the commit, not something we did today) Footer links also show as removed — same story, pre-existing table.css Sticky header offset on mobile: top: 72px so it clears the fixed nav Full @media (max-width: 480px) density block for squeezing 7 columns onto small screens @media (max-width: 640px) profile/column toggle grid: calc((100% - 12px) / 3) for correct 3-column layout accounting for gaps col-toggle-group 1-slot default, col-toggle-group--expanded for 2-slot when pill active ui.css — CustomSelect button clipping on mobile (label ellipsis, arrow absolutely positioned) components.js — cs-btn-label span wrapper inside CustomSelect button for ellipsis support
This commit is contained in:
fraxle
+130
-7
@@ -358,6 +358,13 @@
|
||||
box-shadow: 0 2px 5px rgba(74, 52, 32, 0.10);
|
||||
}
|
||||
|
||||
/* On mobile the nav bar is fixed at 72px - sticky header must clear it */
|
||||
@media (max-width: 640px) {
|
||||
.utci-thead-sticky {
|
||||
top: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
/* The shifted track inside the sticky header — JS sets transform:translate3d
|
||||
to keep its columns aligned with the body scroller's scrollLeft. */
|
||||
.utci-thead-track {
|
||||
@@ -721,7 +728,9 @@
|
||||
|
||||
/* Plain profile buttons: fixed ~31% so 3 fit per row */
|
||||
.profile-btn {
|
||||
flex: 0 0 calc(33.33% - 4px);
|
||||
flex: 0 0 calc((100% - 12px) / 3);
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
padding: 7px 2px;
|
||||
font-size: 11px;
|
||||
@@ -733,7 +742,8 @@
|
||||
|
||||
/* CustomSelect (Activities / Places dropdowns) — same width as buttons */
|
||||
.filter-profiles .cs-wrap {
|
||||
flex: 0 0 calc(33.33% - 4px);
|
||||
flex: 0 0 calc((100% - 12px) / 3);
|
||||
min-width: 0;
|
||||
}
|
||||
.filter-profiles .cs-btn {
|
||||
width: 100%;
|
||||
@@ -759,38 +769,151 @@
|
||||
}
|
||||
|
||||
.col-toggle {
|
||||
flex: 0 0 calc(33.33% - 4px);
|
||||
flex: 0 0 calc((100% - 12px) / 3);
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
padding: 7px 2px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.03em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Pollen CustomSelect in col-toggles — match toggle width */
|
||||
.col-toggles .cs-wrap {
|
||||
flex: 0 0 calc(33.33% - 4px);
|
||||
flex: 0 0 calc((100% - 12px) / 3);
|
||||
min-width: 0;
|
||||
}
|
||||
.col-toggles .cs-btn {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 7px 6px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.03em;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Fused vehicle group (select + vent pill): spans 2 slots = ~65% */
|
||||
/* Fused group: 1 slot by default, 2 slots when VentPill is active */
|
||||
.col-toggle-group {
|
||||
flex: 0 0 calc(66.66% - 1px);
|
||||
flex: 0 0 calc((100% - 12px) / 3);
|
||||
min-width: 0;
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.col-toggle-group--expanded {
|
||||
flex: 0 0 calc((100% - 12px) / 3 * 2 + 6px);
|
||||
}
|
||||
.col-toggle-group .cs-wrap {
|
||||
flex: 1;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.col-toggle-group .cs-btn {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 11px;
|
||||
padding: 7px 6px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ── MOBILE TABLE DENSITY — squeeze all basic profile columns in ────────
|
||||
Target: 7 cols (hour air wind cloud utciP precip vis) on a 390px screen.
|
||||
Worst-case minimum width at these values: 366px - fits iPhone SE (375px).
|
||||
Levers: tighter cell padding, smaller min-width, reduced font sizes.
|
||||
The existing 800px and 640px blocks handle tablets and phablets above.
|
||||
DENSITY-BREAKPOINT - change 480px here to adjust where dense layout kicks in.
|
||||
-------------------------------------------------------------------- */
|
||||
|
||||
/* -- MOBILE TABLE DENSITY - squeeze all basic profile columns in --------
|
||||
Target: 7 cols (hour air wind cloud utciP precip vis) on a 390px screen.
|
||||
Worst-case minimum width: 366px - fits iPhone SE (375px) with room to spare.
|
||||
DENSITY-BREAKPOINT - change 480px to adjust where dense layout kicks in.
|
||||
-------------------------------------------------------------------- */
|
||||
@media (max-width: 480px) {
|
||||
|
||||
/* -- Table header cells -----------------------------------------------
|
||||
Reduce padding so headers do not drive columns wider than data needs. */
|
||||
.utci-table th {
|
||||
font-size: 9px;
|
||||
padding: 10px 4px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.utci-table th .col-unit {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
/* -- Table body cells -------------------------------------------------
|
||||
Drop side padding 12px to 4px, shrink min-width 60px to 44px.
|
||||
JetBrains Mono at 11px reads cleanly on retina screens. */
|
||||
.utci-table td {
|
||||
padding: 8px 4px;
|
||||
font-size: 11px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
/* -- Time (Hour) column -----------------------------------------------
|
||||
Drop Fraunces from 16px to 13px and tighten the hour cell min-width. */
|
||||
.utci-time {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.utci-table td:first-child {
|
||||
min-width: 42px;
|
||||
}
|
||||
|
||||
/* -- SkyScope moon-sun icon in the hour cell ---------------------------
|
||||
JS renders at size=30. Clamp to 20px via CSS to stop it ballooning
|
||||
the hour column width and driving up row height. */
|
||||
.utci-time svg {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* -- Cloud, wind-vane and precip icons in body cells -------------------
|
||||
Clamp the 28px SVGs down to 20px on mobile to recover column width
|
||||
without touching the JS size prop. */
|
||||
.utci-table td svg {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* -- Hero UTCI+P pill -------------------------------------------------
|
||||
Shrink min-width and font - still the visual anchor but no longer
|
||||
forcing the column to be the widest. */
|
||||
.utci-cell-hero {
|
||||
font-size: 14px;
|
||||
min-width: 50px;
|
||||
padding: 5px 2px;
|
||||
}
|
||||
|
||||
/* -- Vis column -----------------------------------------------------------
|
||||
Short values (8-99km) need less room than the default 44px min-width. */
|
||||
.utci-vis-cell {
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
/* -- Standard UTCI pill (non-hero) ------------------------------------*/
|
||||
.utci-cell {
|
||||
font-size: 12px;
|
||||
min-width: 44px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
/* -- Band label inside pills ------------------------------------------
|
||||
Tighten letter-spacing to save a little width. */
|
||||
.utci-band-label {
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -715,3 +715,36 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* -- CUSTOM SELECT BUTTON - mobile label clipping ----------------------
|
||||
On narrow screens buttons are fixed ~33% width. The .cs-btn-label span
|
||||
wraps the text node so ellipsis can work (text-overflow needs a block
|
||||
context - bare text nodes inside flex containers cannot clip directly).
|
||||
The cs-arrow is flex-shrink-0 so the chevron always stays visible.
|
||||
DENSITY-BREAKPOINT - matches the table.css 480px breakpoint.
|
||||
-------------------------------------------------------------------- */
|
||||
@media (max-width: 480px) {
|
||||
.cs-btn {
|
||||
display: block !important;
|
||||
position: relative !important;
|
||||
overflow: hidden;
|
||||
padding: 7px 6px !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cs-btn-label {
|
||||
display: block;
|
||||
width: calc(100% - 15px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cs-btn .cs-arrow {
|
||||
position: absolute !important;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
margin: 0;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user