Upgrade async GPU analysis and workbench UX
This commit is contained in:
Jens
@@ -0,0 +1,139 @@
|
||||
/*
|
||||
* Kleine, route-onafhankelijke basis.
|
||||
*
|
||||
* De kaartwerkbank importeert zijn omvangrijke app.css zelf via de lazy
|
||||
* WorkbenchApp-chunk. Houd hier alleen de globale regels die ook het
|
||||
* aanmeldscherm en de korte laadstatus nodig hebben; MapLibre hoort niet in de
|
||||
* publieke landing-bundel.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--bg: #f4f7f5;
|
||||
--panel: #ffffff;
|
||||
--panel-soft: #fafcfb;
|
||||
--surface-raised: #ffffff;
|
||||
--surface-sunken: #f7faf8;
|
||||
--text: #132018;
|
||||
--muted: #5f6f67;
|
||||
--line: #dbe4de;
|
||||
--line-strong: #b8c8bf;
|
||||
--accent: #0f766e;
|
||||
--accent-strong: #115e59;
|
||||
--accent-soft: #e3f4ef;
|
||||
--focus-ring: #0f766e;
|
||||
--focus-ring-soft: rgba(15, 118, 110, 0.2);
|
||||
--warning: #b45309;
|
||||
--danger: #991b1b;
|
||||
--shadow: 0 10px 26px rgba(33, 48, 41, 0.06);
|
||||
--shadow-soft: 0 6px 18px rgba(33, 48, 41, 0.045);
|
||||
|
||||
/* De landing gebruikt dezelfde vormtaal, maar laadt het volledige
|
||||
werkbank-designsysteem bewust pas na authenticatie. */
|
||||
--gi-radius-sm: 6px;
|
||||
--gi-radius-md: 10px;
|
||||
--gi-radius-lg: 14px;
|
||||
--gi-radius-xl: 20px;
|
||||
--gi-radius-pill: 999px;
|
||||
--gi-shadow-md: 0 12px 28px rgba(6, 37, 31, 0.1);
|
||||
--gi-shadow-lg: 0 24px 60px rgba(6, 37, 31, 0.16);
|
||||
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
font-family: 'Public Sans', 'Segoe UI', Arial, sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 118, 110, 0.08), rgba(238, 244, 241, 0) 18rem),
|
||||
var(--bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 2.35rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--gi-radius-sm);
|
||||
padding: 0.52rem 0.78rem;
|
||||
background: linear-gradient(180deg, #ffffff, #eef8f6);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
|
||||
}
|
||||
|
||||
button:active:not(:disabled) { transform: translateY(1px); }
|
||||
button:disabled { cursor: not-allowed; opacity: 0.52; }
|
||||
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible,
|
||||
a:focus-visible {
|
||||
border-color: var(--focus-ring);
|
||||
outline: 3px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 5px var(--focus-ring-soft);
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 2.35rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--gi-radius-sm);
|
||||
padding: 0.52rem 0.62rem;
|
||||
background: #ffffff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
border-color: var(--accent);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p { overflow-wrap: anywhere; }
|
||||
|
||||
h1 {
|
||||
max-width: 42rem;
|
||||
margin: 0;
|
||||
font-size: clamp(1.85rem, 2.6vw, 2.7rem);
|
||||
letter-spacing: 0;
|
||||
line-height: 1.02;
|
||||
}
|
||||
|
||||
h2 { margin: 0 0 0.9rem; font-size: 1.28rem; letter-spacing: 0; line-height: 1.15; }
|
||||
h3 { margin: 1.1rem 0 0.55rem; font-size: 1rem; letter-spacing: 0; line-height: 1.2; }
|
||||
p { line-height: 1.45; }
|
||||
@@ -918,6 +918,24 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Een mislukte analyse is geen lege toestand: houd de resultatenlade open en
|
||||
maak de herstelactie bereikbaar zonder hover op de smalle ladegreep. */
|
||||
.geo-results-error {
|
||||
display: grid;
|
||||
gap: var(--gi-space-3);
|
||||
place-content: center;
|
||||
justify-items: center;
|
||||
min-height: 15rem;
|
||||
padding: var(--gi-space-6) var(--gi-space-4);
|
||||
border: 1px solid var(--gi-danger-soft);
|
||||
border-radius: var(--gi-radius-sm);
|
||||
background: color-mix(in srgb, var(--gi-danger-soft) 26%, var(--gi-surface));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.geo-results-error strong { color: var(--gi-danger); }
|
||||
.geo-results-error p { max-width: 22rem; margin: 0; color: var(--gi-ink-600); }
|
||||
|
||||
/* -- 3. Bedieningspaneel compacter ----------------------------------------- */
|
||||
|
||||
/* Het statuslabel stond in een derde kolom en duwde de titel kapot
|
||||
@@ -2368,6 +2386,7 @@ button.overview-command-card { cursor: pointer; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.workbench-layout { display: block; min-height: 100dvh; }
|
||||
.workbench-topbar { top: 0; }
|
||||
.workbench-sidebar {
|
||||
position: fixed; z-index: 120; top: auto; right: 0; bottom: 0; left: 0; width: 100%;
|
||||
min-height: 4.15rem; max-height: 4.15rem; border-top: 1px solid rgba(153, 218, 202, 0.22);
|
||||
@@ -2415,6 +2434,17 @@ button.overview-command-card { cursor: pointer; }
|
||||
.geo-map-actions button { min-width: 0; justify-content: center; padding-inline: 0.45rem; }
|
||||
.geo-map-actions button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.geo-map-actions button:last-child span { display: none; }
|
||||
.live-analysis-journey {
|
||||
top: 4.4rem;
|
||||
right: 3.25rem;
|
||||
bottom: auto;
|
||||
left: 0.5rem;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
padding: 0.45rem 0.55rem;
|
||||
}
|
||||
.live-analysis-status-card { display: none; }
|
||||
.live-analysis-steps { width: 100%; }
|
||||
.geo-results-panel {
|
||||
position: fixed; z-index: 130; top: 0; right: 0; bottom: 4.15rem;
|
||||
width: min(31rem, calc(100% - 2.75rem)); height: auto; max-height: none;
|
||||
@@ -2760,6 +2790,25 @@ body:not([data-theme='light']) .workbench-shell :where(input, select, textarea)
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
/* De primaire navigatie staat op smartphones onderaan. De kop toont daarom
|
||||
alleen merk, werkstand en sessie; de werkcontext staat direct eronder in
|
||||
het kaartscherm. Dit voorkomt dat logo en afgekorte contextlabels in
|
||||
dezelfde smalle rastercel over elkaar heen worden getekend. */
|
||||
.workbench-topbar {
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
}
|
||||
|
||||
.workbench-topbar .context-bar,
|
||||
.workbench-topbar .context-health {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workbench-topbar .mobile-brand {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
AI-vragen: raster zonder botsingen
|
||||
----------------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user