Improve quality and export usability layout
This commit is contained in:
Codex
@@ -8,6 +8,8 @@ The shell has a calmer V1 workbench density pass: the duplicated workspace comma
|
||||
|
||||
Data and Map have an additional usability layout pass for the core daily workflow. The Data workspace uses compact catalog cards, shorter action buttons and tighter role summaries. The Map workspace prioritizes the MapLibre frame before dense controls, gives the map more height on desktop and compresses context/provenance/bbox extraction surfaces while preserving the existing selection, export and QA actions.
|
||||
|
||||
QA/QC and Exports follow the same calmer density model. QA/QC keeps metric evidence, feature ids and raw findings available but compresses provenance and history surfaces so review starts from the selected check and map evidence actions. Exports uses denser handoff cards, latest-artifact cards and history filters so artifact creation and download paths are easier to scan.
|
||||
|
||||
When project data loads and no dataset is selected yet, the workbench auto-opens the first ready vector dataset. This gives Data, Map and Exports an immediately usable default context while preserving explicit user selection once the user picks another dataset.
|
||||
|
||||
Data and Map workspaces include mobile-density CSS for file inputs, dataset action buttons, map toolbar controls, range sliders and empty-map quick actions so narrow screens avoid accidental viewport overflow.
|
||||
|
||||
@@ -2831,6 +2831,338 @@ button.entity-card {
|
||||
}
|
||||
}
|
||||
|
||||
/* Sprint 115 QA/Exports usability pass: calmer evidence review and handoff artifact surfaces. */
|
||||
.workspace-grid-analysis,
|
||||
.workspace-grid-exports {
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.workspace-grid-analysis {
|
||||
grid-template-columns: minmax(19rem, 0.82fr) minmax(26rem, 1.18fr);
|
||||
}
|
||||
|
||||
.workspace-grid-exports {
|
||||
grid-template-columns: minmax(28rem, 1.15fr) minmax(20rem, 0.85fr);
|
||||
}
|
||||
|
||||
.quality-results-shell,
|
||||
.export-center-shell {
|
||||
gap: 0.62rem;
|
||||
}
|
||||
|
||||
.quality-summary-surface,
|
||||
.quality-evidence-surface,
|
||||
.quality-drilldown-surface,
|
||||
.quality-control-surface,
|
||||
.quality-history-surface,
|
||||
.export-summary-surface,
|
||||
.export-handoff-surface,
|
||||
.latest-artifact-surface,
|
||||
.export-actions-surface,
|
||||
.export-history-surface {
|
||||
border-radius: 6px;
|
||||
padding: 0.62rem;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.quality-summary-surface,
|
||||
.export-summary-surface {
|
||||
background: #f8fbf9;
|
||||
}
|
||||
|
||||
.quality-results-shell .quality-summary-grid,
|
||||
.export-center-shell .quality-summary-grid {
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-summary-grid > div,
|
||||
.quality-handoff-grid > div,
|
||||
.quality-drilldown-grid > div,
|
||||
.quality-evidence-token-grid > div,
|
||||
.quality-feature-evidence-grid > div,
|
||||
.quality-provenance-grid > div,
|
||||
.handoff-readiness-grid > div,
|
||||
.latest-artifact-card,
|
||||
.handoff-action-card,
|
||||
.export-card,
|
||||
.quality-check-card {
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.56rem;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.quality-results-shell .quality-handoff-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-summary-grid span,
|
||||
.quality-handoff-grid span,
|
||||
.quality-drilldown-grid span,
|
||||
.quality-evidence-token-grid span,
|
||||
.quality-feature-evidence-grid span,
|
||||
.quality-provenance-grid span,
|
||||
.quality-score-row span,
|
||||
.latest-export-card span,
|
||||
.metric-list span,
|
||||
.handoff-readiness-grid span,
|
||||
.handoff-action-card span,
|
||||
.latest-artifact-card span {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.055em;
|
||||
}
|
||||
|
||||
.quality-summary-grid strong,
|
||||
.quality-handoff-grid strong,
|
||||
.quality-drilldown-grid strong,
|
||||
.quality-evidence-token-grid strong,
|
||||
.handoff-readiness-grid strong,
|
||||
.handoff-action-card strong,
|
||||
.latest-artifact-card strong {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.quality-dataset-name,
|
||||
.quality-drilldown-grid p,
|
||||
.quality-evidence-token-grid p,
|
||||
.quality-feature-evidence-grid p,
|
||||
.handoff-action-card p,
|
||||
.latest-artifact-card p,
|
||||
.latest-artifact-card small,
|
||||
.export-card p {
|
||||
font-size: 0.74rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.quality-drilldown-surface .panel-title-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.quality-drilldown-surface .panel-title-row .muted {
|
||||
margin: 0.18rem 0 0;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.quality-drilldown-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-evidence-token-grid {
|
||||
grid-template-columns: minmax(9rem, 0.75fr) minmax(9rem, 0.75fr) minmax(14rem, 1.5fr);
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-feature-evidence-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-feature-evidence-grid ul {
|
||||
max-height: 6.5rem;
|
||||
overflow: auto;
|
||||
padding-left: 0.95rem;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.quality-provenance-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-provenance-pre {
|
||||
max-height: 7.5rem;
|
||||
border-radius: 5px;
|
||||
padding: 0.48rem;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.quality-history-controls,
|
||||
.export-history-controls {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
padding: 0.52rem;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.quality-history-controls input,
|
||||
.quality-history-controls select,
|
||||
.export-history-controls input,
|
||||
.export-history-controls select {
|
||||
min-height: 2.1rem;
|
||||
}
|
||||
|
||||
.quality-check-list,
|
||||
.export-list {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.quality-check-header,
|
||||
.export-card-header {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.quality-check-actions {
|
||||
gap: 0.38rem;
|
||||
justify-content: flex-start;
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.quality-check-actions button,
|
||||
.export-card .button-row button,
|
||||
.latest-artifact-actions button,
|
||||
.handoff-action-card button {
|
||||
min-height: 2.05rem;
|
||||
padding: 0.34rem 0.5rem;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.quality-score-row {
|
||||
grid-template-columns: 5rem 4.5rem minmax(0, 1fr);
|
||||
gap: 0.42rem;
|
||||
margin-top: 0.52rem;
|
||||
}
|
||||
|
||||
.quality-score-row > div,
|
||||
.quality-metric-card,
|
||||
.metric-list li {
|
||||
border-radius: 5px;
|
||||
padding: 0.42rem 0.48rem;
|
||||
}
|
||||
|
||||
.quality-metric-grid {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 0.36rem;
|
||||
}
|
||||
|
||||
.quality-metric-card span {
|
||||
font-size: 0.58rem;
|
||||
}
|
||||
|
||||
.quality-metric-card strong {
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.metric-list {
|
||||
grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
|
||||
gap: 0.38rem;
|
||||
margin-top: 0.48rem;
|
||||
}
|
||||
|
||||
.metric-list-label {
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
|
||||
.export-center-shell .quality-summary-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.export-handoff-surface .handoff-summary-card {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.handoff-readiness-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.latest-artifact-grid {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.latest-artifact-card {
|
||||
gap: 0.24rem;
|
||||
}
|
||||
|
||||
.latest-artifact-actions {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.export-action-grid {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.handoff-action-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.48rem;
|
||||
}
|
||||
|
||||
.handoff-action-card {
|
||||
gap: 0.24rem;
|
||||
}
|
||||
|
||||
.handoff-action-card p {
|
||||
min-height: 2.1rem;
|
||||
}
|
||||
|
||||
.export-state-stack {
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.export-card p {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.export-card .button-row {
|
||||
gap: 0.38rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.export-type-badge {
|
||||
padding: 0.12rem 0.42rem;
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
|
||||
.list-limit-banner {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
padding: 0.48rem 0.56rem;
|
||||
}
|
||||
|
||||
.list-limit-banner span {
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.workspace-grid-analysis,
|
||||
.workspace-grid-exports,
|
||||
.quality-drilldown-grid,
|
||||
.quality-evidence-token-grid,
|
||||
.quality-feature-evidence-grid,
|
||||
.quality-provenance-grid,
|
||||
.latest-artifact-grid,
|
||||
.handoff-action-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quality-metric-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.quality-results-shell .quality-summary-grid,
|
||||
.quality-results-shell .quality-handoff-grid,
|
||||
.export-center-shell .quality-summary-grid,
|
||||
.handoff-readiness-grid,
|
||||
.quality-score-row,
|
||||
.quality-metric-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quality-drilldown-surface .panel-title-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extract-surface {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
|
||||
Reference in New Issue
Block a user