Jens/geointel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish overview panel hierarchy
GeoIntel CI / docs-smoke (push) Has been cancelled
Details
GeoIntel CI / contract-smoke (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex
2026-06-20 03:44:15 +02:00
parent ff2ab61eb6
commit 632aef344a
7 changed files with 136 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+26 -6
View File
@@ -540,7 +540,7 @@ function App(): JSX.Element {
selectedAreaHasGeometry={Boolean(areaFeatureCollection)}
/>
<section className="overview-actions">
<div>
<div className="overview-action-copy">
<p className="eyebrow">Recommended flow</p>
<h2>Build the project, load data, review on map, validate, export.</h2>
<p className="muted">
@@ -548,17 +548,37 @@ function App(): JSX.Element {
required datasets are present.
</p>
</div>
<div className="quick-action-grid">
<button type="button" onClick={() => setActiveWorkspace('data')} aria-label="Open data setup workspace">
<div className="quick-action-grid overview-quick-actions" aria-label="Recommended next workbench actions">
<button
type="button"
className="quick-action-button"
onClick={() => setActiveWorkspace('data')}
aria-label="Open data setup workspace"
>
Open data setup
</button>
<button type="button" onClick={() => setActiveWorkspace('map')} aria-label="Inspect map workspace">
<button
type="button"
className="quick-action-button"
onClick={() => setActiveWorkspace('map')}
aria-label="Inspect map workspace"
>
Inspect map
</button>
<button type="button" onClick={() => setActiveWorkspace('analysis')} aria-label="Review QA/QC workspace">
<button
type="button"
className="quick-action-button"
onClick={() => setActiveWorkspace('analysis')}
aria-label="Review QA/QC workspace"
>
Review QA/QC
</button>
<button type="button" onClick={() => setActiveWorkspace('exports')} aria-label="Manage exports workspace">
<button
type="button"
className="quick-action-button"
onClick={() => setActiveWorkspace('exports')}
aria-label="Manage exports workspace"
>
Manage exports
</button>
</div>
frontend/src/styles/app.css
+36 -9
View File
@@ -359,7 +359,10 @@ section {
.workbench-status-strip {
margin: 1rem 0;
box-shadow: var(--shadow);
border-color: #bdd0c5;
padding: 0.9rem;
background: linear-gradient(180deg, #ffffff, #f7fbf8);
box-shadow: 0 8px 22px rgba(33, 48, 41, 0.05);
}
.status-strip-header {
@@ -367,11 +370,13 @@ section {
gap: 1rem;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.8rem;
margin-bottom: 0.72rem;
}
.status-strip-header h2 {
margin-bottom: 0;
font-size: 1.32rem;
line-height: 1.15;
}
.status-next-action {
@@ -382,26 +387,31 @@ section {
}
.status-strip-grid {
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
gap: 0.58rem;
}
.status-tile {
min-height: 6.7rem;
display: grid;
align-content: start;
min-height: 5.85rem;
border-left: 4px solid #64748b;
padding: 0.7rem;
padding: 0.62rem 0.68rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}
.status-tile strong {
display: block;
margin-top: 0.48rem;
font-size: 1.02rem;
margin-top: 0.36rem;
font-size: 0.98rem;
line-height: 1.22;
}
.status-tile p {
margin: 0.32rem 0 0;
margin: 0.24rem 0 0;
color: var(--muted);
font-size: 0.86rem;
font-size: 0.82rem;
line-height: 1.34;
}
.status-tile-ready {
@@ -830,11 +840,20 @@ section li strong + div {
grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
gap: 1rem;
align-items: center;
border-left: 4px solid var(--accent);
background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(255, 255, 255, 0.82));
box-shadow: 0 8px 20px rgba(33, 48, 41, 0.045);
}
.overview-action-copy {
max-width: 46rem;
}
.overview-actions h2 {
max-width: 42rem;
margin-bottom: 0.5rem;
font-size: 1.22rem;
line-height: 1.22;
}
.quick-action-grid {
@@ -843,8 +862,16 @@ section li strong + div {
gap: 0.65rem;
}
.overview-quick-actions {
align-self: stretch;
}
.quick-action-button,
.quick-action-grid button {
display: grid;
align-content: center;
min-height: 4.25rem;
text-align: center;
}
section form,