Polish map-first workbench visuals
This commit is contained in:
Codex
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import './styles/app.css'
|
||||
import './styles/premium.css'
|
||||
import './styles/visual-polish.css'
|
||||
import { ChangeDetectionPanel } from './components/analysis/ChangeDetectionPanel'
|
||||
import { GeoAssistantPanel } from './components/assistant/GeoAssistantPanel'
|
||||
import { DatasetPanel } from './components/datasets/DatasetPanel'
|
||||
|
||||
@@ -0,0 +1,515 @@
|
||||
/* GeoIntel visual polish: a restrained map-first presentation layer. */
|
||||
|
||||
:root {
|
||||
--visual-canvas: #eef2f1;
|
||||
--visual-surface: #ffffff;
|
||||
--visual-surface-soft: #f7f9f8;
|
||||
--visual-ink: #172a2d;
|
||||
--visual-muted: #657477;
|
||||
--visual-line: #d7e1df;
|
||||
--visual-line-strong: #b8c8c4;
|
||||
--visual-teal: #087d73;
|
||||
--visual-teal-deep: #056057;
|
||||
--visual-teal-soft: #e7f4f1;
|
||||
--visual-amber: #a76616;
|
||||
--visual-amber-soft: #fff7e9;
|
||||
}
|
||||
|
||||
.workbench-shell {
|
||||
background: var(--visual-canvas);
|
||||
color: var(--visual-ink);
|
||||
}
|
||||
|
||||
.app-shell > header.workbench-topbar {
|
||||
min-height: 4.35rem;
|
||||
grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
|
||||
gap: 1.15rem;
|
||||
padding-inline: clamp(1rem, 1.5vw, 1.75rem);
|
||||
background: rgba(255, 255, 255, 0.985);
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
flex-basis: 2.35rem;
|
||||
border: 1px solid #20464a;
|
||||
border-radius: 8px;
|
||||
background: #153b40;
|
||||
box-shadow: 0 2px 5px rgba(21, 59, 64, 0.14);
|
||||
}
|
||||
|
||||
.brand-block h1 {
|
||||
color: var(--visual-ink);
|
||||
font-size: 1.08rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.app-shell > header.workbench-topbar .brand-block p {
|
||||
color: #718083;
|
||||
font-size: 0.71rem;
|
||||
}
|
||||
|
||||
.context-bar {
|
||||
border-color: var(--visual-line);
|
||||
border-radius: 8px;
|
||||
background: var(--visual-surface-soft);
|
||||
}
|
||||
|
||||
.context-bar > div {
|
||||
min-height: 2.8rem;
|
||||
padding-inline: 0.8rem;
|
||||
}
|
||||
|
||||
.context-bar span {
|
||||
color: #708082;
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.context-bar strong {
|
||||
color: var(--visual-ink);
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
.workbench-layout {
|
||||
grid-template-columns: 13.25rem minmax(0, 1fr);
|
||||
height: calc(100dvh - 4.35rem);
|
||||
}
|
||||
|
||||
.workbench-sidebar {
|
||||
padding: 1rem 0.8rem;
|
||||
border-right-color: var(--visual-line);
|
||||
background: #f6f8f7;
|
||||
}
|
||||
|
||||
.workbench-sidebar nav {
|
||||
gap: 1.15rem;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
gap: 0.28rem;
|
||||
}
|
||||
|
||||
.nav-section-label {
|
||||
padding-inline: 0.62rem;
|
||||
color: #7c898a;
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item {
|
||||
min-height: 2.55rem;
|
||||
border-radius: 7px;
|
||||
padding: 0.48rem 0.7rem;
|
||||
color: #3e5153;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item span {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item-active {
|
||||
border-color: #b8d9d2;
|
||||
background: var(--visual-teal-soft);
|
||||
color: var(--visual-teal-deep);
|
||||
box-shadow: inset 3px 0 0 var(--visual-teal);
|
||||
}
|
||||
|
||||
.workbench-main {
|
||||
padding: 1.25rem clamp(1rem, 1.8vw, 2rem) 2rem;
|
||||
}
|
||||
|
||||
.workbench-main > * {
|
||||
width: min(100%, 118rem);
|
||||
}
|
||||
|
||||
.workspace-heading {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.82rem;
|
||||
border-bottom-color: var(--visual-line);
|
||||
}
|
||||
|
||||
.workspace-heading h2 {
|
||||
color: var(--visual-ink);
|
||||
font-size: 1.48rem;
|
||||
}
|
||||
|
||||
.workspace-heading-actions > p {
|
||||
color: var(--visual-muted);
|
||||
}
|
||||
|
||||
/* Normal desktop keeps the three map steps in one purposeful working row. */
|
||||
@media (min-width: 1181px) {
|
||||
.geo-explorer-layout {
|
||||
grid-template-columns: minmax(15rem, 16.5rem) minmax(0, 1fr) minmax(17rem, 19rem);
|
||||
gap: 0.85rem;
|
||||
height: clamp(36rem, calc(100dvh - 9.8rem), 68rem);
|
||||
min-height: 36rem;
|
||||
}
|
||||
|
||||
.geo-theme-panel,
|
||||
.geo-results-panel,
|
||||
.geo-map-stage {
|
||||
border-color: var(--visual-line);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(23, 42, 45, 0.035);
|
||||
}
|
||||
|
||||
.geo-results-panel {
|
||||
grid-column: auto;
|
||||
display: flex;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.geo-map-toolbar {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.geo-map-actions {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
.workbench-layout {
|
||||
grid-template-columns: 14rem minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.workbench-main {
|
||||
padding-inline: clamp(1.5rem, 2.2vw, 3rem);
|
||||
}
|
||||
|
||||
.geo-explorer-layout {
|
||||
grid-template-columns: minmax(17rem, 19rem) minmax(42rem, 1fr) minmax(21rem, 24rem);
|
||||
}
|
||||
}
|
||||
|
||||
.geo-explorer {
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.geo-explorer-header {
|
||||
gap: 1.25rem;
|
||||
border-bottom-color: var(--visual-line);
|
||||
padding-bottom: 0.95rem;
|
||||
}
|
||||
|
||||
.geo-explorer-header h2 {
|
||||
color: var(--visual-ink);
|
||||
font-size: clamp(1.45rem, 1.8vw, 1.9rem);
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.geo-explorer-header p:last-child {
|
||||
color: var(--visual-muted);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.geo-analysis-mode {
|
||||
border-color: var(--visual-line-strong);
|
||||
background: #f3f7f6;
|
||||
}
|
||||
|
||||
.geo-analysis-mode button {
|
||||
color: #687879;
|
||||
}
|
||||
|
||||
.geo-analysis-mode button.active {
|
||||
color: var(--visual-teal-deep);
|
||||
box-shadow: 0 1px 4px rgba(23, 42, 45, 0.11);
|
||||
}
|
||||
|
||||
.geo-panel-heading > span {
|
||||
background: var(--visual-ink);
|
||||
}
|
||||
|
||||
.geo-panel-heading h3,
|
||||
.geo-results-title-row h4 {
|
||||
color: var(--visual-ink);
|
||||
}
|
||||
|
||||
.geo-panel-heading p,
|
||||
.geo-results-empty p {
|
||||
color: var(--visual-muted);
|
||||
}
|
||||
|
||||
.geo-theme-panel,
|
||||
.geo-results-panel,
|
||||
.geo-map-stage {
|
||||
background: var(--visual-surface);
|
||||
}
|
||||
|
||||
.geo-theme-panel,
|
||||
.geo-results-panel {
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.geo-theme-list {
|
||||
gap: 0.42rem;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.geo-theme-option {
|
||||
min-height: 3.35rem;
|
||||
border-color: #dce6e3;
|
||||
border-radius: 7px;
|
||||
padding: 0.52rem 0.56rem;
|
||||
}
|
||||
|
||||
.geo-theme-option:not(:disabled):hover {
|
||||
border-color: #98c5ba;
|
||||
background: #f5faf8;
|
||||
}
|
||||
|
||||
.geo-theme-option-active {
|
||||
border-color: #6da99b;
|
||||
background: var(--visual-teal-soft);
|
||||
box-shadow: inset 3px 0 0 var(--visual-teal);
|
||||
}
|
||||
|
||||
.geo-theme-option strong {
|
||||
color: #233639;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.geo-theme-option small {
|
||||
color: #6e7d7f;
|
||||
font-size: 0.66rem;
|
||||
}
|
||||
|
||||
.geo-theme-option i {
|
||||
color: var(--visual-teal-deep);
|
||||
font-size: 0.57rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.geo-loaded-scope {
|
||||
border-color: #d6e5e1;
|
||||
border-radius: 7px;
|
||||
background: #f6faf9;
|
||||
}
|
||||
|
||||
.geo-source-summary {
|
||||
border-top-color: var(--visual-line);
|
||||
}
|
||||
|
||||
.geo-source-summary strong {
|
||||
color: #223639;
|
||||
}
|
||||
|
||||
.geo-map-stage {
|
||||
border-color: var(--visual-line-strong);
|
||||
box-shadow: 0 3px 14px rgba(23, 42, 45, 0.08);
|
||||
}
|
||||
|
||||
.geo-map-toolbar {
|
||||
border-bottom-color: var(--visual-line);
|
||||
background: #fbfcfc;
|
||||
}
|
||||
|
||||
.geo-map-actions .primary-action,
|
||||
.geo-result-next-actions .primary-action {
|
||||
border-color: var(--visual-teal);
|
||||
background: var(--visual-teal);
|
||||
}
|
||||
|
||||
.geo-map-actions .primary-action:hover:not(:disabled),
|
||||
.geo-result-next-actions .primary-action:hover:not(:disabled) {
|
||||
border-color: var(--visual-teal-deep);
|
||||
background: var(--visual-teal-deep);
|
||||
}
|
||||
|
||||
.geo-map-canvas {
|
||||
background: #dce9e6;
|
||||
}
|
||||
|
||||
.geo-map-legend {
|
||||
border-color: rgba(23, 42, 45, 0.18);
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 3px 12px rgba(23, 42, 45, 0.12);
|
||||
}
|
||||
|
||||
.geo-results-panel {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.geo-results-empty,
|
||||
.geo-results-loading {
|
||||
border-color: #cbdad6;
|
||||
background: #fafcfb;
|
||||
}
|
||||
|
||||
.geo-primary-metrics > div {
|
||||
border-color: #dbe6e3;
|
||||
border-radius: 6px;
|
||||
background: #f7faf9;
|
||||
}
|
||||
|
||||
.geo-primary-metrics > div:first-child {
|
||||
border-top: 2px solid var(--visual-teal);
|
||||
}
|
||||
|
||||
.geo-primary-metrics strong {
|
||||
color: #183c3b;
|
||||
}
|
||||
|
||||
.geo-theme-result-row {
|
||||
border-color: #e0e9e7;
|
||||
background: #fbfcfc;
|
||||
}
|
||||
|
||||
.geo-theme-result-row:hover {
|
||||
border-color: #b9d4cc;
|
||||
background: #f4faf8;
|
||||
}
|
||||
|
||||
.geo-result-next-actions {
|
||||
border-color: #c4ddd7;
|
||||
border-radius: 7px;
|
||||
background: #f2faf7;
|
||||
}
|
||||
|
||||
.geo-result-next-actions strong {
|
||||
color: #174a42;
|
||||
}
|
||||
|
||||
.geo-result-next-actions small {
|
||||
color: #607773;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) and (min-width: 921px) {
|
||||
.geo-explorer-layout {
|
||||
grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.geo-results-panel {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(13rem, 0.7fr) minmax(0, 1.3fr);
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1359px) and (min-width: 921px) {
|
||||
/* Keep the map readable until the viewport can support a result rail. */
|
||||
.geo-explorer-layout {
|
||||
grid-template-columns: minmax(15rem, 17rem) minmax(28rem, 1fr);
|
||||
grid-template-rows: clamp(34rem, calc(100dvh - 10rem), 54rem) auto;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.geo-results-panel {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(13rem, 0.7fr) minmax(0, 1.3fr);
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1799px) and (min-width: 1360px) {
|
||||
/* A two-column work row keeps the selection step wide at standard desktop sizes. */
|
||||
.geo-explorer-layout {
|
||||
grid-template-columns: minmax(16rem, 18rem) minmax(34rem, 1fr);
|
||||
grid-template-rows: clamp(36rem, calc(100dvh - 10rem), 58rem) auto;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.geo-results-panel {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr);
|
||||
align-items: start;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.app-shell > header.workbench-topbar {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.65rem;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.app-shell > header.workbench-topbar {
|
||||
padding-block: 0.7rem;
|
||||
}
|
||||
|
||||
.workbench-sidebar {
|
||||
background: #ffffff;
|
||||
scrollbar-color: #a9bfba transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.workbench-sidebar::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.workbench-sidebar::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background: #a9bfba;
|
||||
}
|
||||
|
||||
.workbench-sidebar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item-active {
|
||||
border-color: #b8d9d2;
|
||||
box-shadow: inset 0 -3px 0 var(--visual-teal);
|
||||
}
|
||||
|
||||
.geo-explorer-layout {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.workbench-main {
|
||||
padding-inline: 0.75rem;
|
||||
}
|
||||
|
||||
.geo-explorer-header {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.geo-explorer-header h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.geo-theme-panel,
|
||||
.geo-results-panel {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.geo-map-stage {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.geo-map-canvas .map-container {
|
||||
min-height: 25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.workbench-shell button {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user