Improve data and map usability layout
This commit is contained in:
Codex
@@ -4122,3 +4122,362 @@ section {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Sprint 114 data/map usability pass: make the core select-and-extract flow calmer and map-first. */
|
||||
.workspace-grid-data {
|
||||
grid-template-columns: minmax(18rem, 0.78fr) minmax(24rem, 1.22fr);
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.workspace-grid-data > section {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.workspace-grid-data .workspace-panel {
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.data-selection-summary {
|
||||
border-left-width: 3px;
|
||||
padding: 0.55rem 0.65rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.data-selection-summary strong {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.data-panel-form-block,
|
||||
.data-panel-list-block {
|
||||
border-radius: 6px;
|
||||
padding: 0.62rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.dataset-upload-form {
|
||||
grid-template-columns: repeat(3, minmax(8rem, 1fr)) minmax(11rem, 1.15fr) auto;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.dataset-upload-form label {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.dataset-upload-form button {
|
||||
min-height: 2.35rem;
|
||||
align-self: end;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dataset-role-summary-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.dataset-role-summary {
|
||||
min-height: 3.1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.48rem 0.55rem;
|
||||
}
|
||||
|
||||
.dataset-role-summary strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dataset-role-summary span,
|
||||
.dataset-role-summary small {
|
||||
font-size: 0.66rem;
|
||||
}
|
||||
|
||||
.dataset-list {
|
||||
gap: 0.52rem;
|
||||
}
|
||||
|
||||
.dataset-card {
|
||||
border-radius: 6px;
|
||||
padding: 0.65rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.dataset-card-active {
|
||||
background: #f8fbf9;
|
||||
box-shadow: inset 3px 0 0 var(--accent);
|
||||
}
|
||||
|
||||
.dataset-card-header {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.dataset-card-kicker {
|
||||
margin-bottom: 0.18rem;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.dataset-role-badge {
|
||||
min-height: 1.24rem;
|
||||
padding: 0.12rem 0.42rem;
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
|
||||
.dataset-card-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.dataset-card .entity-meta {
|
||||
gap: 0.22rem 0.52rem;
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.dataset-metrics {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.5rem;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.dataset-metrics span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
padding: 0.32rem 0.42rem;
|
||||
background: #f8fafc;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dataset-action-hint {
|
||||
margin-top: 0.48rem;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.dataset-action-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.38rem;
|
||||
margin-top: 0.52rem;
|
||||
}
|
||||
|
||||
.dataset-action-button {
|
||||
min-height: 2.45rem;
|
||||
padding: 0.38rem 0.48rem;
|
||||
}
|
||||
|
||||
.dataset-action-button span {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.dataset-action-button small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.map-workspace-shell {
|
||||
gap: 0.62rem;
|
||||
}
|
||||
|
||||
.map-workspace-shell .panel-title-row {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.map-context-summary {
|
||||
order: 1;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.map-context-summary > div {
|
||||
border-left-width: 3px;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.58rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.map-context-summary span {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.map-context-summary strong {
|
||||
margin-top: 0.12rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.map-context-summary small {
|
||||
margin-top: 0.12rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.map-frame-surface {
|
||||
order: 2;
|
||||
padding: 0.35rem;
|
||||
background: #eef4f1;
|
||||
}
|
||||
|
||||
.workbench-main .map-container,
|
||||
.map-frame-surface .map-container {
|
||||
min-height: 34rem;
|
||||
}
|
||||
|
||||
.map-control-surface {
|
||||
order: 3;
|
||||
gap: 0.5rem;
|
||||
padding: 0.58rem;
|
||||
}
|
||||
|
||||
.map-workspace-shell .map-toolbar {
|
||||
grid-template-columns: minmax(11rem, 1.1fr) repeat(2, minmax(9rem, 1fr)) minmax(11rem, 1.1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.map-workspace-shell .map-toolbar label {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.layer-control-card,
|
||||
.map-status {
|
||||
border-radius: 6px;
|
||||
padding: 0.46rem 0.55rem;
|
||||
}
|
||||
|
||||
.map-status strong {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.map-status span {
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.layer-provenance-rail {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.layer-provenance-rail > div {
|
||||
border-radius: 6px;
|
||||
padding: 0.46rem 0.55rem;
|
||||
}
|
||||
|
||||
.layer-provenance-rail span {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.layer-provenance-rail strong {
|
||||
min-height: auto;
|
||||
font-size: 0.74rem;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.qa-evidence-map-status {
|
||||
order: 4;
|
||||
border-left-width: 3px;
|
||||
border-radius: 6px;
|
||||
padding: 0.58rem;
|
||||
}
|
||||
|
||||
.map-empty-state {
|
||||
order: 5;
|
||||
}
|
||||
|
||||
.map-inspection-surface {
|
||||
order: 6;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
|
||||
gap: 0.65rem;
|
||||
padding: 0.62rem;
|
||||
}
|
||||
|
||||
.bbox-select-surface,
|
||||
.feature-extract-surface,
|
||||
.map-inspection-surface .feature-inspector {
|
||||
margin: 0;
|
||||
border-radius: 6px;
|
||||
padding: 0.62rem;
|
||||
}
|
||||
|
||||
.bbox-select-surface {
|
||||
border-left-width: 3px;
|
||||
}
|
||||
|
||||
.map-inspection-surface .feature-inspector {
|
||||
border: 1px solid var(--line);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.bbox-select-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.bbox-select-grid label {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.bbox-select-grid input {
|
||||
min-height: 2.1rem;
|
||||
}
|
||||
|
||||
.bbox-select-actions,
|
||||
.feature-extract-actions {
|
||||
gap: 0.38rem;
|
||||
}
|
||||
|
||||
.bbox-select-actions button,
|
||||
.feature-extract-actions button {
|
||||
min-height: 2.15rem;
|
||||
padding: 0.38rem 0.55rem;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.feature-extract-grid {
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.feature-extract-grid > div {
|
||||
border-radius: 5px;
|
||||
padding: 0.42rem 0.48rem;
|
||||
}
|
||||
|
||||
.feature-extract-grid span {
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.feature-extract-grid strong {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.workspace-grid-data,
|
||||
.map-inspection-surface {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dataset-upload-form,
|
||||
.dataset-action-grid,
|
||||
.map-context-summary,
|
||||
.map-workspace-shell .map-toolbar,
|
||||
.layer-provenance-rail {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.dataset-upload-form,
|
||||
.dataset-role-summary-grid,
|
||||
.dataset-metrics,
|
||||
.dataset-action-grid,
|
||||
.map-context-summary,
|
||||
.map-workspace-shell .map-toolbar,
|
||||
.layer-provenance-rail,
|
||||
.bbox-select-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dataset-action-button small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.workbench-main .map-container,
|
||||
.map-frame-surface .map-container {
|
||||
min-height: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user