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

3.5

Browse Source 
UI Overhaul
Profiles now in popup
Current profile always on screen
Hidden columns only when edit neeeded
Add pulldowns in to profile config
Customised the day tabs for vehicle, indoor and pet
This commit is contained in:
fraxle
2026-07-18 15:45:20 +01:00
parent f92e191a44
commit 916efca55e
13 changed files with 1594 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/ui.css
+51 -8
View File
@@ -634,12 +634,14 @@
border-radius: 0;
}
/* The floating dropdown panel */
/* The floating dropdown panel. Centred under/over its button and clamped to
the nearest scrollable ancestor's edges via an inline `left` (px) set in
JS (see the useLayoutEffect in CustomSelect) — `left: 0` here is only the
pre-measurement fallback for the very first paint. */
.cs-panel {
position: absolute;
top: calc(100% + 4px);
left: 0; /* left edge flushes with button's left edge by default */
right: auto;
left: 0;
z-index: 1000;
background: #fffcf2;
border: 1.5px solid #c9b08a;
@@ -647,13 +649,47 @@
box-shadow: 0 4px 16px rgba(30,18,8,0.13);
min-width: 100%;
white-space: nowrap;
overflow: hidden;
/* Safety net only — long lists (SunSoak, Indoors, ...) lay out as two
columns instead (see .cs-panel--cols) so every option is visible at a
glance rather than relying on people to notice a cropped list needs
scrolling. This cap only bites in the rare case even that doesn't fit
the space available (see the JS-computed inline max-height). */
max-height: min(300px, 60vh);
overflow-y: auto;
overflow-x: hidden;
transform-origin: top center;
animation: cs-panel-in 0.15s ease-out;
}
/* Flip panel to right-align when left-align would overflow the viewport */
.cs-panel.cs-panel--right {
left: auto;
right: 0;
/* Two-column layout for longer option lists (>5 items) — halves the height
needed so lists fit in the available space without scrolling. */
.cs-panel.cs-panel--cols {
column-count: 2;
column-gap: 0;
width: max-content;
max-width: 90vw;
}
.cs-panel.cs-panel--cols .cs-option {
break-inside: avoid;
}
@keyframes cs-panel-in {
from { opacity: 0; transform: translateY(-6px) scaleY(0.92); }
to { opacity: 1; transform: translateY(0) scaleY(1); }
}
/* Flip panel to open upward when it would overflow the bottom of the
viewport — e.g. these selectors sitting inside the profile/config bottom
sheet, which is anchored to the bottom of the screen. Animates in from
the opposite direction so it still reads as growing toward the button. */
.cs-panel.cs-panel--up {
top: auto;
bottom: calc(100% + 4px);
transform-origin: bottom center;
animation: cs-panel-in-up 0.15s ease-out;
}
@keyframes cs-panel-in-up {
from { opacity: 0; transform: translateY(6px) scaleY(0.92); }
to { opacity: 1; transform: translateY(0) scaleY(1); }
}
/* Card-grid panel — wrapping flex grid of scene cards */
@@ -665,6 +701,7 @@
min-width: 0;
width: max-content;
max-width: min(320px, 90vw);
max-height: none;
white-space: normal;
overflow: visible;
}
@@ -1233,6 +1270,12 @@
font-weight: 600;
}
.utci-legend-label--secondary {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #d4c0a0;
}
.utci-legend-row {
display: flex;
flex-wrap: wrap;