2.2
Add new quick summary panels and update layout to make space for them
This commit is contained in:
fraxle
+47
-4
@@ -6,17 +6,41 @@
|
||||
|
||||
.utci-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr; /* title | dial | search */
|
||||
gap: 32px;
|
||||
grid-template-columns: 1fr auto 1fr; /* left | dial | why */
|
||||
grid-template-areas:
|
||||
"hleft dial hright"
|
||||
". env .";
|
||||
column-gap: 32px;
|
||||
row-gap: 6px;
|
||||
align-items: center;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* Side columns occupy only the dial's row, so they vertically centre against
|
||||
the dial itself; the environment selector drops to its own row beneath. */
|
||||
.header-left { grid-area: hleft; }
|
||||
.scope-col { grid-area: dial; }
|
||||
.scope-env-bar { grid-area: env; }
|
||||
.header-right { grid-area: hright; }
|
||||
|
||||
/* Left column — wordmark, tagline, search and location stacked together */
|
||||
.header-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-left .utci-search-wrap {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* Right column — now hosts the "Why it feels like this" panel,
|
||||
sitting close to the dial it explains. */
|
||||
.header-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -61,7 +85,7 @@
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
color: #1e1208;
|
||||
text-align: right;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* The lat/lon below the location */
|
||||
@@ -91,6 +115,16 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* The environment selector sits just below the dial, centred under it.
|
||||
Kept out of .scope-col so the dial alone defines that column's height
|
||||
and stays vertically centred against the side columns. */
|
||||
.scope-env-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.scope-env-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -261,11 +295,20 @@
|
||||
@media (max-width: 640px) {
|
||||
.utci-header {
|
||||
grid-template-columns: 1fr; /* single column — stack title, dial, search */
|
||||
grid-template-areas: none; /* flow in DOM order: left, dial, selector, why */
|
||||
gap: 20px;
|
||||
padding-bottom: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* Clear the desktop area placement so children stack in DOM order */
|
||||
.header-left,
|
||||
.scope-col,
|
||||
.scope-env-bar,
|
||||
.header-right {
|
||||
grid-area: auto;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
align-items: flex-start; /* left-align location on mobile */
|
||||
}
|
||||
|
||||
@@ -158,8 +158,8 @@
|
||||
justify-content: safe center; /* fall back to flex-start if it overflows */
|
||||
overflow-x: auto;
|
||||
overflow-y: auto; /* forced by browser when overflow-x is non-visible */
|
||||
padding-bottom: 260px; /* extends clip boundary so dropdown panels aren't cut off */
|
||||
margin-bottom: -260px; /* cancel that extra space in the layout */
|
||||
padding-bottom: 400px; /* extends clip boundary so the tallest dropdown (Activities) isn't cut off */
|
||||
margin-bottom: -400px; /* cancel that extra space in the layout */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
padding-right: 4px; /* breathing room at right edge */
|
||||
@@ -210,6 +210,7 @@
|
||||
.profile-btn {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex: none; /* never shrink below 80px — the row scrolls instead */
|
||||
padding: 0;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
|
||||
@@ -1127,3 +1127,164 @@
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ════════════════════════════════════════════════════════════════════════
|
||||
INSIGHT PANELS - Why it feels like this + Today at a glance.
|
||||
Sits between the header dial and the day tabs.
|
||||
════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* "Why it feels like this" — sits in the header's right column, beside the dial */
|
||||
.insight-panel--why {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
/* Hourly table paired with the "Today at a glance" rail on its right */
|
||||
.table-with-rail {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Left column: the columns-toggle bar stacked above the table, both
|
||||
sharing the table's width so the rail can top-align with the toggles. */
|
||||
.table-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.glance-rail {
|
||||
width: 240px;
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.insight-panel--glance {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.insight-panel {
|
||||
background: #fffcf2;
|
||||
border: 1px solid #c9b08a;
|
||||
border-radius: 4px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
/* Section heading - "WHY IT FEELS LIKE THIS" */
|
||||
.insight-panel-title {
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #b09870;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Each factor row */
|
||||
.insight-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #ede4cc;
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.insight-row:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.insight-icon {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.insight-label {
|
||||
flex: 1;
|
||||
color: #4a3420;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Delta values for "Why it feels like this" */
|
||||
.insight-delta {
|
||||
font-family: JetBrains Mono, monospace;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
min-width: 44px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.delta-pos {
|
||||
color: #c8522a; /* warm orange-red - heat contribution */
|
||||
}
|
||||
|
||||
.delta-neg {
|
||||
color: #3a78a8; /* cool blue - cooling contribution */
|
||||
}
|
||||
|
||||
/* Values for "Today at a glance" */
|
||||
.insight-value {
|
||||
font-family: JetBrains Mono, monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #4a3420;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Alert state - draws attention without being aggressive */
|
||||
.insight-row--alert .insight-value {
|
||||
color: #b84020;
|
||||
}
|
||||
|
||||
.insight-row--alert .insight-label {
|
||||
color: #1e1208;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ── Wide screens - the rail is narrow (240px), so stack each value
|
||||
beneath its label instead of letting long values overflow sideways.
|
||||
Mobile keeps the inline label/value layout (plenty of width there). */
|
||||
@media (min-width: 901px) {
|
||||
.insight-panel--glance .insight-row {
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr;
|
||||
grid-template-areas:
|
||||
"icon label"
|
||||
"icon value";
|
||||
column-gap: 8px;
|
||||
row-gap: 1px;
|
||||
align-items: start;
|
||||
}
|
||||
.insight-panel--glance .insight-icon {
|
||||
grid-area: icon;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.insight-panel--glance .insight-label {
|
||||
grid-area: label;
|
||||
}
|
||||
.insight-panel--glance .insight-value {
|
||||
grid-area: value;
|
||||
text-align: left; /* value sits left-aligned under its label */
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Narrow screens - drop the rail below the table ─────────────────── */
|
||||
@media (max-width: 900px) {
|
||||
.table-with-rail {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.glance-rail {
|
||||
width: 100%;
|
||||
position: static;
|
||||
order: -1; /* show the summary above the filters + table */
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user