bot/WeatherTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Isolate City Analysis from legacy layout styles

Browse Source
This commit is contained in:
b0txec
2026-08-19 10:49:51 +03:00
parent f937557efb
commit b1326fa311
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/css/aggregator.css
+4 -4
View File
@@ -15,10 +15,10 @@
.overlayFields{display:grid;grid-template-columns:minmax(260px,2fr) minmax(160px,1fr);gap:12px;padding:16px 16px 0}.overlayFields label,.overlayFields span{display:block}.overlayFields span{margin-bottom:6px;font-size:12px;font-weight:700}.overlayFields input{width:100%} .overlayFields{display:grid;grid-template-columns:minmax(260px,2fr) minmax(160px,1fr);gap:12px;padding:16px 16px 0}.overlayFields label,.overlayFields span{display:block}.overlayFields span{margin-bottom:6px;font-size:12px;font-weight:700}.overlayFields input{width:100%}
.mapControlSections{display:grid;gap:18px;padding:16px}.valueControls{padding-bottom:16px;border-bottom:1px solid var(--border)} .mapControlSections{display:grid;gap:18px;padding:16px}.valueControls{padding-bottom:16px;border-bottom:1px solid var(--border)}
.pageWorkspace{max-width:1800px;margin:auto;padding:34px 28px 70px}.pageHeading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.pageHeading h1{margin:5px 0 6px;font-size:34px}.pageHeading p{margin:0;color:var(--text-muted)}.selectionCount{padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-weight:700}.aggregator>.container{display:grid;grid-template-columns:240px 300px minmax(0,1fr);gap:18px;align-items:start}.panel{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.panel h2{margin:0 0 18px;font-size:16px}.cityPanel{max-height:calc(100vh - 160px);overflow:auto}.cityPanel ul{margin:12px 0;padding:0;columns:1}.cityPanel li{padding:3px 0}.queryPanel h4{margin:22px 0 9px}.queryPanel p{margin:10px 0}.resultsPanel{min-width:0}.emptyState{display:flex;min-height:260px;align-items:center;justify-content:center;flex-direction:column;gap:8px;margin-top:18px;padding:30px;border:1px dashed #bac6d4;border-radius:16px;background:rgba(255,255,255,.55);color:var(--text-muted);text-align:center}.emptyState strong{color:var(--text);font-size:18px}.mapWorkspace{margin-top:14px}.mapToolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.mapToolbar strong,.mapToolbar span{display:block}.mapToolbar span{margin-top:3px;color:var(--text-muted);font-size:12px}.broadcastControls{margin-bottom:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.broadcastControls summary{padding:14px 16px;cursor:pointer}.broadcastControls summary span,.broadcastControls summary strong,.broadcastControls summary small{display:block}.broadcastControls summary small,.controlHelp,.fieldHint{color:var(--text-muted);font-size:12px}.broadcastControls[open] summary{border-bottom:1px solid var(--border)}.broadcastControls .grid-1-2{padding:16px}.controlHelp{margin:16px 16px 0}.canvasFrame{overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#d8dee6;box-shadow:var(--shadow-sm)}.canvasFrame canvas{display:block}.weatherIconButton{border-radius:7px}.fieldHint{margin:4px 0 10px}@media(max-width:1200px){.aggregator>.container{grid-template-columns:220px 1fr}.resultsPanel{grid-column:1/-1}.cityPanel{max-height:none}}@media(max-width:700px){.pageWorkspace{padding:24px 14px}.pageHeading{align-items:start;flex-direction:column}.aggregator>.container{grid-template-columns:1fr}.resultsPanel{grid-column:auto}} .pageWorkspace{max-width:1800px;margin:auto;padding:34px 28px 70px}.pageHeading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.pageHeading h1{margin:5px 0 6px;font-size:34px}.pageHeading p{margin:0;color:var(--text-muted)}.selectionCount{padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-weight:700}.aggregator>.cityWorkspace{display:grid;grid-template-columns:240px 300px minmax(0,1fr);gap:18px;align-items:start}.panel{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.panel h2{margin:0 0 18px;font-size:16px}.cityPanel{max-height:calc(100vh - 160px);overflow:auto}.cityPanel ul{margin:12px 0;padding:0;columns:1}.cityPanel li{padding:3px 0}.queryPanel h4{margin:22px 0 9px}.queryPanel p{margin:10px 0}.resultsPanel{min-width:0}.emptyState{display:flex;min-height:260px;align-items:center;justify-content:center;flex-direction:column;gap:8px;margin-top:18px;padding:30px;border:1px dashed #bac6d4;border-radius:16px;background:rgba(255,255,255,.55);color:var(--text-muted);text-align:center}.emptyState strong{color:var(--text);font-size:18px}.mapWorkspace{margin-top:14px}.mapToolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.mapToolbar strong,.mapToolbar span{display:block}.mapToolbar span{margin-top:3px;color:var(--text-muted);font-size:12px}.broadcastControls{margin-bottom:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.broadcastControls summary{padding:14px 16px;cursor:pointer}.broadcastControls summary span,.broadcastControls summary strong,.broadcastControls summary small{display:block}.broadcastControls summary small,.controlHelp,.fieldHint{color:var(--text-muted);font-size:12px}.broadcastControls[open] summary{border-bottom:1px solid var(--border)}.broadcastControls .grid-1-2{padding:16px}.controlHelp{margin:16px 16px 0}.canvasFrame{overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#d8dee6;box-shadow:var(--shadow-sm)}.canvasFrame canvas{display:block}.weatherIconButton{border-radius:7px}.fieldHint{margin:4px 0 10px}@media(max-width:1200px){.aggregator>.cityWorkspace{grid-template-columns:220px 1fr}.resultsPanel{grid-column:1/-1}.cityPanel{max-height:none}}@media(max-width:700px){.pageWorkspace{padding:24px 14px}.pageHeading{align-items:start;flex-direction:column}.aggregator>.cityWorkspace{grid-template-columns:1fr}.resultsPanel{grid-column:auto}}
/* City Analysis follows the same rail + full-width workspace geometry as Faktiskā. */ /* City Analysis follows the same rail + full-width workspace geometry as Faktiskā. */
.aggregator>.container{ .aggregator>.cityWorkspace{
grid-template-columns:230px minmax(0,1fr); grid-template-columns:230px minmax(0,1fr);
grid-template-areas:"cities query" "cities results"; grid-template-areas:"cities query" "cities results";
column-gap:28px; column-gap:28px;
@@ -54,13 +54,13 @@
.aggregator .resultsPanel>div{width:100%} .aggregator .resultsPanel>div{width:100%}
@media(max-width:1200px){ @media(max-width:1200px){
.aggregator>.container{grid-template-columns:210px minmax(0,1fr);grid-template-areas:"cities query" "cities results"} .aggregator>.cityWorkspace{grid-template-columns:210px minmax(0,1fr);grid-template-areas:"cities query" "cities results"}
.aggregator .workspaceToolbar{grid-template-columns:1fr;align-items:start} .aggregator .workspaceToolbar{grid-template-columns:1fr;align-items:start}
.aggregator .queryOptions{grid-column:auto} .aggregator .queryOptions{grid-column:auto}
.aggregator .resultsPanel{grid-column:2} .aggregator .resultsPanel{grid-column:2}
} }
@media(max-width:800px){ @media(max-width:800px){
.aggregator>.container{grid-template-columns:1fr;grid-template-areas:"cities" "query" "results"} .aggregator>.cityWorkspace{grid-template-columns:1fr;grid-template-areas:"cities" "query" "results"}
.aggregator .workspaceRail{padding-right:0;border-right:0;border-bottom:1px solid rgba(90,126,166,.2)} .aggregator .workspaceRail{padding-right:0;border-right:0;border-bottom:1px solid rgba(90,126,166,.2)}
.aggregator .queryOptions{grid-template-columns:1fr} .aggregator .queryOptions{grid-template-columns:1fr}
.aggregator .resultsPanel{grid-column:1} .aggregator .resultsPanel{grid-column:1}
web/src/pages/cities/Cities.tsx
+4 -4
View File
@@ -23,12 +23,12 @@ export function Cities() {
return ( return (
<div class="aggregator pageWorkspace"> <div class="aggregator pageWorkspace">
<div class="pageHeading"><div><span class="eyebrow">Historical observations</span><h1>City analysis</h1><p>Choose stations and a calculation, then compare the resulting values.</p></div><div class="selectionCount">{getCities().size} cities selected</div></div> <div class="pageHeading"><div><span class="eyebrow">Historical observations</span><h1>City analysis</h1><p>Choose stations and a calculation, then compare the resulting values.</p></div><div class="selectionCount">{getCities().size} cities selected</div></div>
<div class="container"> <div class="cityWorkspace">
<aside class="column cityPanel workspaceRail"> <aside class="cityPanel workspaceRail">
<h2>1. Choose cities</h2> <h2>1. Choose cities</h2>
<SelectCity getCities={getCities} setCities={setCities} /> <SelectCity getCities={getCities} setCities={setCities} />
</aside> </aside>
<aside class="column queryPanel workspaceToolbar"> <aside class="queryPanel workspaceToolbar">
<h2>2. Configure query</h2> <h2>2. Configure query</h2>
<div class="queryTimeRange"> <div class="queryTimeRange">
<SelectTimeRange <SelectTimeRange
@@ -47,7 +47,7 @@ export function Cities() {
<SelectGranularity getGranularity={getGranularity} setGranularity={setGranularity} /> <SelectGranularity getGranularity={getGranularity} setGranularity={setGranularity} />
</div> </div>
</aside> </aside>
<section class="column resultsPanel"> <section class="resultsPanel">
<QueryView <QueryView
getCities={getCities} getCities={getCities}
getStart={getStart} getStart={getStart}