feat: make Mol explorer map-first
This commit is contained in:
Codex
@@ -5412,6 +5412,699 @@ section {
|
||||
}
|
||||
}
|
||||
|
||||
/* Map-first geographic explorer: one calm path from theme to selection to evidence. */
|
||||
.geo-explorer {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.geo-explorer-header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
border-bottom: 1px solid #d7e0dc;
|
||||
padding: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.geo-explorer-header h2 {
|
||||
margin: 0.12rem 0 0;
|
||||
color: #17211e;
|
||||
font-size: clamp(1.35rem, 2vw, 1.85rem);
|
||||
letter-spacing: 0;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.geo-explorer-header p:last-child {
|
||||
max-width: 48rem;
|
||||
margin: 0.32rem 0 0;
|
||||
color: #5a6964;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.geo-explorer-advanced {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.geo-explorer-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(15.5rem, 17rem) minmax(30rem, 1fr) minmax(18rem, 20rem);
|
||||
gap: 0.72rem;
|
||||
align-items: stretch;
|
||||
min-width: 0;
|
||||
min-height: calc(100dvh - 13.8rem);
|
||||
}
|
||||
|
||||
.geo-theme-panel,
|
||||
.geo-results-panel,
|
||||
.geo-map-stage {
|
||||
min-width: 0;
|
||||
border: 1px solid #d7e0dc;
|
||||
border-radius: 7px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 2px rgba(23, 33, 30, 0.05);
|
||||
}
|
||||
|
||||
.geo-theme-panel,
|
||||
.geo-results-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
padding: 0.78rem;
|
||||
}
|
||||
|
||||
.geo-panel-heading {
|
||||
display: grid;
|
||||
grid-template-columns: 1.65rem minmax(0, 1fr);
|
||||
gap: 0.55rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.geo-panel-heading > span {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 1.65rem;
|
||||
height: 1.65rem;
|
||||
border-radius: 5px;
|
||||
background: #173e38;
|
||||
color: #ffffff;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.geo-panel-heading h3,
|
||||
.geo-results-title-row h4 {
|
||||
margin: 0;
|
||||
color: #17211e;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.geo-panel-heading p {
|
||||
margin: 0.16rem 0 0;
|
||||
color: #6a7773;
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.geo-theme-list {
|
||||
display: grid;
|
||||
gap: 0.36rem;
|
||||
}
|
||||
|
||||
.geo-theme-option {
|
||||
display: grid;
|
||||
grid-template-columns: 0.72rem minmax(0, 1fr) auto;
|
||||
gap: 0.48rem;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 3.25rem;
|
||||
border: 1px solid #e0e7e4;
|
||||
border-radius: 6px;
|
||||
padding: 0.48rem 0.52rem;
|
||||
background: #ffffff;
|
||||
color: #26332f;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.geo-theme-option:not(:disabled):hover {
|
||||
border-color: #8eb8ac;
|
||||
background: #f5faf8;
|
||||
}
|
||||
|
||||
.geo-theme-option-active {
|
||||
border-color: #397c6e;
|
||||
background: #edf7f4;
|
||||
box-shadow: inset 3px 0 0 #176a5c;
|
||||
}
|
||||
|
||||
.geo-theme-option:disabled {
|
||||
cursor: not-allowed;
|
||||
background: #f6f8f7;
|
||||
color: #7c8884;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.geo-theme-option > span:nth-child(2) {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.geo-theme-option strong,
|
||||
.geo-theme-option small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.geo-theme-option strong {
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
.geo-theme-option small {
|
||||
margin-top: 0.12rem;
|
||||
color: #65736e;
|
||||
font-size: 0.66rem;
|
||||
}
|
||||
|
||||
.geo-theme-option i {
|
||||
color: #357061;
|
||||
font-size: 0.58rem;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.geo-theme-option:disabled i {
|
||||
color: #89938f;
|
||||
}
|
||||
|
||||
.geo-theme-symbol {
|
||||
display: block;
|
||||
width: 0.6rem;
|
||||
height: 1.85rem;
|
||||
border-radius: 2px;
|
||||
background: #5c7c73;
|
||||
}
|
||||
|
||||
.geo-theme-symbol-buildings { background: #d45f3d; }
|
||||
.geo-theme-symbol-population { background: #7559a6; }
|
||||
.geo-theme-symbol-forest { background: #347950; }
|
||||
.geo-theme-symbol-water { background: #2676a8; }
|
||||
.geo-theme-symbol-roads { background: #6b7280; }
|
||||
.geo-theme-symbol-parcels { background: #a7792f; }
|
||||
|
||||
.geo-source-summary {
|
||||
display: grid;
|
||||
gap: 0.18rem;
|
||||
border-top: 1px solid #e3e9e6;
|
||||
padding-top: 0.65rem;
|
||||
}
|
||||
|
||||
.geo-source-summary span,
|
||||
.geo-primary-metrics span,
|
||||
.geo-selected-feature > span {
|
||||
color: #6a7773;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.geo-source-summary strong {
|
||||
overflow: hidden;
|
||||
color: #26332f;
|
||||
font-size: 0.76rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.geo-source-summary small {
|
||||
color: #697671;
|
||||
font-size: 0.68rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.geo-scope-select {
|
||||
margin-top: auto;
|
||||
color: #4c5b56;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.geo-scope-select select {
|
||||
min-height: 2.35rem;
|
||||
margin-top: 0.28rem;
|
||||
}
|
||||
|
||||
.geo-map-stage {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(30rem, 1fr);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.geo-map-toolbar {
|
||||
display: flex;
|
||||
gap: 0.7rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #d7e0dc;
|
||||
padding: 0.62rem 0.7rem;
|
||||
background: #fbfcfc;
|
||||
}
|
||||
|
||||
.geo-map-step {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.geo-map-actions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.geo-map-actions button,
|
||||
.geo-result-actions button {
|
||||
min-height: 2.15rem;
|
||||
padding: 0.4rem 0.58rem;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.geo-draw-active {
|
||||
background: #9a4d24;
|
||||
}
|
||||
|
||||
.geo-map-canvas {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
background: #e7ece9;
|
||||
}
|
||||
|
||||
.geo-map-canvas .map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 30rem;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.geo-map-canvas-drawing .map-container {
|
||||
box-shadow: inset 0 0 0 3px #b5572d;
|
||||
}
|
||||
|
||||
.geo-map-legend {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 0.65rem;
|
||||
bottom: 0.65rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.55rem;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(23, 33, 30, 0.18);
|
||||
border-radius: 5px;
|
||||
padding: 0.38rem 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
color: #42504b;
|
||||
font-size: 0.64rem;
|
||||
box-shadow: 0 2px 8px rgba(23, 33, 30, 0.1);
|
||||
}
|
||||
|
||||
.geo-map-legend span {
|
||||
display: inline-flex;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.geo-map-legend i {
|
||||
display: inline-block;
|
||||
width: 0.9rem;
|
||||
height: 0.55rem;
|
||||
border: 2px solid #176a5c;
|
||||
background: rgba(23, 106, 92, 0.15);
|
||||
}
|
||||
|
||||
.geo-map-legend .geo-legend-layer {
|
||||
border-color: #d45f3d;
|
||||
background: rgba(212, 95, 61, 0.24);
|
||||
}
|
||||
|
||||
.geo-map-legend .geo-legend-selection {
|
||||
border-color: #6b4aaa;
|
||||
background: rgba(107, 74, 170, 0.18);
|
||||
}
|
||||
|
||||
.geo-draw-instruction,
|
||||
.geo-viewport-status {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 50%;
|
||||
display: grid;
|
||||
width: min(31rem, calc(100% - 2rem));
|
||||
transform: translateX(-50%);
|
||||
border-radius: 6px;
|
||||
padding: 0.58rem 0.72rem;
|
||||
box-shadow: 0 4px 16px rgba(23, 33, 30, 0.18);
|
||||
}
|
||||
|
||||
.geo-draw-instruction {
|
||||
top: 0.72rem;
|
||||
border: 1px solid #d8936c;
|
||||
background: rgba(255, 248, 242, 0.96);
|
||||
color: #6f3218;
|
||||
}
|
||||
|
||||
.geo-draw-instruction strong,
|
||||
.geo-draw-instruction span {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.geo-viewport-status {
|
||||
bottom: 2.8rem;
|
||||
border: 1px solid #b7ccc5;
|
||||
background: rgba(248, 252, 250, 0.95);
|
||||
color: #38534b;
|
||||
font-size: 0.68rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.geo-viewport-status-error {
|
||||
border-color: #e3a6a6;
|
||||
background: rgba(255, 246, 246, 0.96);
|
||||
color: #8b2d2d;
|
||||
}
|
||||
|
||||
.geo-results-empty,
|
||||
.geo-results-loading {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
flex: 1 1 auto;
|
||||
min-height: 15rem;
|
||||
border: 1px dashed #ccd7d3;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
background: #fafcfa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.geo-results-empty strong,
|
||||
.geo-results-loading strong {
|
||||
color: #31413b;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.geo-results-empty p {
|
||||
max-width: 15rem;
|
||||
margin: 0.35rem auto 0;
|
||||
color: #6a7773;
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.geo-results-loading span {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin: 0 auto 0.6rem;
|
||||
border: 2px solid #c6d6d0;
|
||||
border-top-color: #176a5c;
|
||||
border-radius: 50%;
|
||||
animation: geo-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes geo-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.geo-primary-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.geo-primary-metrics > div {
|
||||
display: grid;
|
||||
gap: 0.18rem;
|
||||
min-width: 0;
|
||||
border: 1px solid #e1e8e5;
|
||||
border-radius: 5px;
|
||||
padding: 0.48rem;
|
||||
background: #f8faf9;
|
||||
}
|
||||
|
||||
.geo-primary-metrics strong {
|
||||
overflow: hidden;
|
||||
color: #1e302a;
|
||||
font-size: 0.86rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.geo-theme-results {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
border: 1px solid #e1e8e5;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.geo-results-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.48rem 0.55rem;
|
||||
background: #f4f7f5;
|
||||
}
|
||||
|
||||
.geo-results-title-row span {
|
||||
color: #697671;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.geo-theme-result-row {
|
||||
display: grid;
|
||||
grid-template-columns: 0.55rem minmax(0, 1fr) auto;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
min-height: 2.65rem;
|
||||
border-top: 1px solid #e7ecea;
|
||||
padding: 0.38rem 0.5rem;
|
||||
}
|
||||
|
||||
.geo-theme-result-row .geo-theme-symbol {
|
||||
width: 0.45rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.geo-theme-result-row > span:nth-child(2) {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.geo-theme-result-row strong {
|
||||
font-size: 0.73rem;
|
||||
}
|
||||
|
||||
.geo-theme-result-row small {
|
||||
overflow: hidden;
|
||||
color: #71807a;
|
||||
font-size: 0.61rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.geo-theme-result-row b {
|
||||
color: #24342e;
|
||||
font-size: 0.7rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.geo-data-notice {
|
||||
margin: 0;
|
||||
border-left: 3px solid #b17a31;
|
||||
padding: 0.45rem 0.55rem;
|
||||
background: #fffbeb;
|
||||
color: #76501d;
|
||||
font-size: 0.68rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.geo-result-details {
|
||||
border: 1px solid #e1e8e5;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.geo-result-details summary {
|
||||
padding: 0.5rem 0.55rem;
|
||||
color: #40514b;
|
||||
cursor: pointer;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.geo-result-details dl {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
border-top: 1px solid #e7ecea;
|
||||
}
|
||||
|
||||
.geo-result-details dl > div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(6rem, 0.8fr) minmax(0, 1.2fr);
|
||||
gap: 0.5rem;
|
||||
border-top: 1px solid #edf1ef;
|
||||
padding: 0.36rem 0.5rem;
|
||||
}
|
||||
|
||||
.geo-result-details dl > div:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.geo-result-details dt,
|
||||
.geo-result-details dd {
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.geo-result-details dt {
|
||||
color: #66736f;
|
||||
}
|
||||
|
||||
.geo-result-details dd {
|
||||
margin: 0;
|
||||
color: #283832;
|
||||
}
|
||||
|
||||
.geo-selected-feature {
|
||||
display: grid;
|
||||
gap: 0.16rem;
|
||||
border-left: 3px solid #a7792f;
|
||||
padding: 0.48rem 0.55rem;
|
||||
background: #fffaf0;
|
||||
}
|
||||
|
||||
.geo-selected-feature strong {
|
||||
overflow-wrap: anywhere;
|
||||
color: #4d3d22;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.geo-selected-feature small {
|
||||
color: #786a51;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.geo-result-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.35rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.geo-explorer-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem 1rem;
|
||||
align-items: center;
|
||||
color: #687570;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.geo-explorer-footer strong {
|
||||
color: #45534f;
|
||||
}
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
.geo-explorer-layout {
|
||||
grid-template-columns: minmax(17rem, 19rem) minmax(38rem, 1fr) minmax(20rem, 23rem);
|
||||
min-height: calc(100dvh - 14.2rem);
|
||||
}
|
||||
|
||||
.geo-map-canvas .map-container {
|
||||
min-height: 38rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.geo-explorer-layout {
|
||||
grid-template-columns: minmax(14rem, 16rem) minmax(28rem, 1fr);
|
||||
}
|
||||
|
||||
.geo-results-panel {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(12rem, 0.6fr) repeat(2, minmax(15rem, 1fr));
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.geo-results-panel > .geo-panel-heading,
|
||||
.geo-results-panel > .error,
|
||||
.geo-results-panel > .geo-data-notice,
|
||||
.geo-results-panel > .geo-result-actions {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.geo-results-empty,
|
||||
.geo-results-loading {
|
||||
grid-column: 2 / -1;
|
||||
min-height: 9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.geo-explorer-header {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.geo-explorer-layout {
|
||||
display: block;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.geo-theme-panel,
|
||||
.geo-map-stage,
|
||||
.geo-results-panel {
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.geo-theme-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.geo-map-toolbar {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.geo-map-actions {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.geo-results-panel {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.geo-explorer-header {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.geo-explorer-advanced {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.geo-theme-list,
|
||||
.geo-primary-metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.geo-map-toolbar {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.geo-map-actions,
|
||||
.geo-result-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.geo-map-actions button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.geo-map-canvas .map-container {
|
||||
min-height: 24rem;
|
||||
}
|
||||
|
||||
.geo-map-legend {
|
||||
right: 0.4rem;
|
||||
bottom: 0.4rem;
|
||||
left: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.workspace-grid-data,
|
||||
.map-inspection-surface {
|
||||
|
||||
Reference in New Issue
Block a user