feat(ui): refine governed workbench and dual-screen flows
This commit is contained in:
Jens
@@ -851,7 +851,7 @@
|
||||
|
||||
.geo-results-panel {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
z-index: 20;
|
||||
inset-block: 0;
|
||||
right: 0;
|
||||
width: clamp(20rem, 21vw, 26rem);
|
||||
@@ -1043,6 +1043,7 @@
|
||||
.geo-results-panel {
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.geo-results-panel > .geo-panel-heading {
|
||||
@@ -1052,6 +1053,8 @@
|
||||
}
|
||||
|
||||
.geo-results-panel > * {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
margin: 0;
|
||||
padding-inline: var(--gi-space-4);
|
||||
@@ -1790,9 +1793,35 @@ button.overview-command-card { cursor: pointer; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
.geo-panel-close {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.35rem;
|
||||
min-width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
border: 1px solid var(--gi-line-strong);
|
||||
border-radius: var(--gi-radius-md);
|
||||
background: var(--gi-surface-raised);
|
||||
color: var(--gi-ink-700);
|
||||
}
|
||||
|
||||
.geo-panel-close:hover,
|
||||
.geo-panel-close:focus-visible {
|
||||
border-color: var(--gi-brand-500);
|
||||
background: var(--gi-brand-50);
|
||||
color: var(--gi-brand-800);
|
||||
}
|
||||
|
||||
.geo-panel-close svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.workbench-shell .geo-results-toggle {
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
z-index: 21;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
display: inline-flex;
|
||||
@@ -3342,3 +3371,226 @@ body:not([data-theme='light']) .workbench-shell :where(input, select, textarea)
|
||||
margin-top: var(--gi-space-2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Frontend review repairs: compact explorer, drawer and keyboard selection
|
||||
========================================================================== */
|
||||
|
||||
/* Keep the source summary in its column and give the theme list a real scroll
|
||||
viewport. Flex shrinking previously reduced this list to less than one row
|
||||
at 1366 × 768 while the panel's other blocks consumed the full height. */
|
||||
.workbench-shell .geo-theme-panel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workbench-shell .geo-theme-list {
|
||||
flex: 1 1 10rem;
|
||||
min-height: 8rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.workbench-shell .geo-theme-panel > :where(
|
||||
.geo-panel-heading,
|
||||
.geo-loaded-scope,
|
||||
.geo-theme-search,
|
||||
.geo-theme-actions,
|
||||
.geo-source-summary,
|
||||
.geo-data-notice,
|
||||
.error
|
||||
) {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.workbench-shell .geo-source-summary :where(strong, small) {
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
/* On laptop-height workspaces these cards repeat the active work area and
|
||||
source already present in the context bar and footer. Reclaim the space for
|
||||
the actual theme choices, while keeping the full provenance cards on large
|
||||
displays. */
|
||||
@media (max-height: 940px) and (min-width: 761px) {
|
||||
.workbench-shell .geo-loaded-scope,
|
||||
.workbench-shell .geo-source-summary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Explicit open state outranks the older empty-state :has() rule. */
|
||||
.workbench-shell .geo-explorer-layout:has(.geo-results-empty) .geo-results-panel.geo-results-panel-open {
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transform: translateX(0);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
/* MapLibre's sprite is dark in the light theme. The global dark-mode filter
|
||||
must not invert it on white control buttons. */
|
||||
body[data-theme='light'] .workbench-shell .maplibregl-ctrl-group {
|
||||
border: 1px solid var(--gi-line-strong);
|
||||
background: var(--gi-surface);
|
||||
box-shadow: var(--gi-shadow-sm);
|
||||
}
|
||||
|
||||
body[data-theme='light'] .workbench-shell .maplibregl-ctrl-group button {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body[data-theme='light'] .workbench-shell .maplibregl-ctrl-group button:hover {
|
||||
background: var(--gi-surface-soft);
|
||||
}
|
||||
|
||||
body[data-theme='light'] .workbench-shell .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
body[data-theme='light'] .workbench-shell .maplibregl-ctrl-attrib {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
color: var(--gi-ink-600);
|
||||
}
|
||||
|
||||
.secondary-display-brand h1 {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: var(--gi-font-display);
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.secondary-display-brand h1:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Pointer drawing remains the fastest route; this disclosure provides an
|
||||
equivalent keyboard path without permanently crowding the map toolbar. */
|
||||
.geo-coordinate-selection {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.geo-coordinate-selection > summary {
|
||||
min-height: 1.9rem;
|
||||
border: 1px solid var(--gi-line);
|
||||
border-radius: var(--gi-radius-sm);
|
||||
padding: 0.42rem 0.66rem;
|
||||
color: var(--gi-ink-700);
|
||||
font-size: 0.66rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
list-style-position: inside;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.geo-coordinate-selection[open] > summary {
|
||||
border-color: var(--gi-brand-500);
|
||||
color: var(--gi-brand-700);
|
||||
}
|
||||
|
||||
.geo-coordinate-selection-body {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
top: calc(100% + 0.45rem);
|
||||
right: 0;
|
||||
display: grid;
|
||||
width: min(23rem, calc(100vw - 2rem));
|
||||
gap: var(--gi-space-3);
|
||||
border: 1px solid var(--gi-line-strong);
|
||||
border-radius: var(--gi-radius-md);
|
||||
padding: var(--gi-space-3);
|
||||
background: var(--gi-surface);
|
||||
box-shadow: var(--gi-shadow-lg);
|
||||
}
|
||||
|
||||
.geo-coordinate-selection-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--gi-space-2);
|
||||
}
|
||||
|
||||
.geo-coordinate-selection-grid label {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
color: var(--gi-ink-600);
|
||||
font-size: var(--gi-text-3xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.geo-coordinate-selection-grid input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.geo-coordinate-selection-body small {
|
||||
color: var(--gi-ink-500);
|
||||
font-size: var(--gi-text-3xs);
|
||||
line-height: var(--gi-leading-snug);
|
||||
}
|
||||
|
||||
@media (max-height: 800px) and (min-width: 761px) {
|
||||
.workbench-shell .geo-theme-panel > .geo-panel-heading p,
|
||||
.workbench-shell .geo-loaded-scope small,
|
||||
.workbench-shell .geo-theme-actions small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workbench-shell .geo-theme-panel > .geo-panel-heading {
|
||||
min-height: 3.25rem;
|
||||
padding: var(--gi-space-2) var(--gi-space-3);
|
||||
}
|
||||
|
||||
.workbench-shell .geo-loaded-scope {
|
||||
margin-top: var(--gi-space-2);
|
||||
padding-block: var(--gi-space-2);
|
||||
}
|
||||
|
||||
.workbench-shell .geo-theme-search {
|
||||
min-height: 2.25rem;
|
||||
height: 2.25rem;
|
||||
margin-block: var(--gi-space-2);
|
||||
padding-block: var(--gi-space-1);
|
||||
}
|
||||
|
||||
.workbench-shell .geo-theme-search input {
|
||||
min-height: 0;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.workbench-shell .geo-theme-list {
|
||||
min-height: 8rem;
|
||||
margin-top: 0;
|
||||
padding-block: var(--gi-space-2);
|
||||
}
|
||||
|
||||
.workbench-shell .geo-theme-option {
|
||||
min-height: 2.8rem;
|
||||
padding-block: 0.4rem;
|
||||
}
|
||||
|
||||
.workbench-shell .geo-source-summary small {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.workbench-shell .geo-theme-actions,
|
||||
.workbench-shell .geo-source-summary {
|
||||
padding-block: var(--gi-space-2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.workbench-shell .geo-theme-panel {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.workbench-shell .geo-theme-list {
|
||||
flex: 0 0 auto;
|
||||
min-height: 8rem;
|
||||
max-height: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -794,6 +794,39 @@ body.landing-body {
|
||||
transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.landing-authentik-submit {
|
||||
display: inline-flex;
|
||||
min-height: 3rem;
|
||||
gap: 0.55rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--landing-primary);
|
||||
border-radius: var(--gi-radius-md);
|
||||
padding: 0.72rem 1rem;
|
||||
background: var(--landing-primary);
|
||||
color: #fff;
|
||||
font-size: 0.77rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
box-shadow: var(--gi-shadow-md);
|
||||
transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.landing-authentik-submit:hover {
|
||||
background: var(--landing-primary-strong);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.landing-authentik-submit:focus-visible {
|
||||
outline: 3px solid color-mix(in srgb, var(--landing-primary) 38%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.landing-authentik-submit svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.landing-operator-submit:hover:not(:disabled) {
|
||||
background: var(--landing-primary-strong);
|
||||
box-shadow: var(--gi-shadow-md);
|
||||
|
||||
Reference in New Issue
Block a user