From 225aa9b1c6cb1b14bd7c4ce0f169de13a1d167c6 Mon Sep 17 00:00:00 2001
From: Bartal Laearsson <bartal@flo.fo>
Date: Tue, 25 Aug 2026 21:25:50 +0100
Subject: [PATCH] move filters to left box

---
 static/index.html |  92 ++++++++++++++++++++++-------------------
 static/style.css  | 102 ++++++++++++++++++++++++++--------------------
 2 files changed, 107 insertions(+), 87 deletions(-)

diff --git a/static/index.html b/static/index.html
index cb35ac8..dc9a3a1 100644
--- a/static/index.html
+++ b/static/index.html
@@ -30,55 +30,61 @@
   </nav>
 
   <main class="page-body">
-    <div class="dashboard">
+    <div class="sidebar">
+      <div class="filters-panel">
+        <div class="filters">
+          <div class="filter-group multi-select" id="species">
+            <label>Species</label>
+            <div class="dropdown-trigger dropdown-label">All</div>
+            <div class="checkbox-dropdown-list"></div>
+          </div>
+          <div class="filter-group multi-select" id="zone">
+            <label>Zone</label>
+            <div class="dropdown-trigger dropdown-label">All</div>
+            <div class="checkbox-dropdown-list"></div>
+          </div>
+          <div class="filter-group multi-select" id="gear">
+            <label>Gear</label>
+            <div class="dropdown-trigger dropdown-label">All</div>
+            <div class="checkbox-dropdown-list"></div>
+          </div>
+          <div class="filter-group">
+            <label for="month_from">From</label>
+            <select id="month_from"><option value="">All</option></select>
+          </div>
+          <div class="filter-group">
+            <label for="month_to">To</label>
+            <select id="month_to"><option value="">All</option></select>
+          </div>
+          <button class="apply-btn" id="apply-filters">Apply</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="dashboard-wrapper">
       <div id="loading-overlay" class="loading-overlay">
         <span>Loading fisheries data…</span>
       </div>
 
-      <div class="filters">
-        <div class="filter-group multi-select" id="species">
-          <label>Species</label>
-          <div class="dropdown-trigger dropdown-label">All</div>
-          <div class="checkbox-dropdown-list"></div>
+      <div class="dashboard">
+        <div id="empty-state" class="empty-state" style="display:none;">
+          <p>No data available for the selected filters.</p>
+          <p>Try adjusting your filters or running an ingestion.</p>
         </div>
-        <div class="filter-group multi-select" id="zone">
-          <label>Zone</label>
-          <div class="dropdown-trigger dropdown-label">All</div>
-          <div class="checkbox-dropdown-list"></div>
-        </div>
-        <div class="filter-group multi-select" id="gear">
-          <label>Gear</label>
-          <div class="dropdown-trigger dropdown-label">All</div>
-          <div class="checkbox-dropdown-list"></div>
-        </div>
-        <div class="filter-group">
-          <label for="month_from">From</label>
-          <select id="month_from"><option value="">All</option></select>
-        </div>
-        <div class="filter-group">
-          <label for="month_to">To</label>
-          <select id="month_to"><option value="">All</option></select>
-        </div>
-        <button class="apply-btn" id="apply-filters">Apply</button>
-      </div>
 
-      <div id="empty-state" class="empty-state" style="display:none;">
-        <p>No data available for the selected filters.</p>
-        <p>Try adjusting your filters or running an ingestion.</p>
-      </div>
-
-      <div id="charts-grid" class="charts-grid" style="display:none;">
-        <div class="chart-container full-width">
-          <div class="chart-title">Total Landings (Mass & Value)</div>
-          <div id="chart-line" style="width:100%; height:420px;"></div>
-        </div>
-        <div class="chart-container">
-          <div class="chart-title">Top Species by Value</div>
-          <div id="chart-donut" style="width:100%; height:380px;"></div>
-        </div>
-        <div class="chart-container">
-          <div class="chart-title">Monthly Value by Top Species</div>
-          <div id="chart-bar" style="width:100%; height:380px;"></div>
+        <div id="charts-grid" class="charts-grid" style="display:none;">
+          <div class="chart-container full-width">
+            <div class="chart-title">Total Landings (Mass & Value)</div>
+            <div id="chart-line" style="width:100%; height:420px;"></div>
+          </div>
+          <div class="chart-container">
+            <div class="chart-title">Top Species by Value</div>
+            <div id="chart-donut" style="width:100%; height:380px;"></div>
+          </div>
+          <div class="chart-container">
+            <div class="chart-title">Monthly Value by Top Species</div>
+            <div id="chart-bar" style="width:100%; height:380px;"></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/static/style.css b/static/style.css
index 1ebaace..4453e24 100644
--- a/static/style.css
+++ b/static/style.css
@@ -156,13 +156,49 @@ nav {
 .page-body {
   flex: 1;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: calc(65px + 2.5rem) 2rem 4rem;
+  padding: calc(65px + 2.5rem) 2rem 2rem;
+  gap: 2rem;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 320px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.filters-panel {
+  background: var(--bg-panel);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 1.5rem;
+  box-shadow: 0 8px 30px rgba(26, 29, 34, 0.06);
+  animation: panel-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  opacity: 0;
+  transform: translateX(-10px);
+  transition: background 0.3s ease, border-color 0.3s ease;
+  height: 100%;
+}
+
+@keyframes panel-in {
+  0%   { opacity: 0; transform: translateX(-10px); }
+  100% { opacity: 1; transform: translateX(0); }
+}
+
+.dashboard-wrapper {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+  height: 100%;
 }
 
 .dashboard {
-  width: min(1200px, 100%);
+  width: 100%;
+  height: 100%;
   background: var(--bg-panel);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
@@ -175,13 +211,8 @@ nav {
   transform: translateY(10px);
   transition: background 0.3s ease, border-color 0.3s ease;
   position: relative;
-  min-height: 500px;
-  height: calc(100dvh - 230px);
-}
-
-@keyframes panel-in {
-  0%   { opacity: 0; transform: translateY(10px); }
-  100% { opacity: 1; transform: translateY(0); }
+  display: flex;
+  flex-direction: column;
 }
 
 /* ---- Loading Overlay ---- */
@@ -216,16 +247,15 @@ nav {
   font-size: 0.85rem;
   text-align: center;
   line-height: 1.6;
+  flex: 1;
 }
 
 /* ---- Filters ---- */
 .filters {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  display: flex;
+  flex-direction: column;
   gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid var(--border);
+  height: 100%;
 }
 
 .filter-group {
@@ -343,8 +373,7 @@ nav {
 }
 
 .apply-btn {
-  grid-column: 1 / -1;
-  justify-self: start;
+  width: 100%;
   padding: 0.5rem 2rem;
   background: var(--accent);
   color: var(--bg-panel);
@@ -368,6 +397,8 @@ nav {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
+  flex: 1;
+  min-height: 0;
 }
 
 .chart-container {
@@ -376,17 +407,18 @@ nav {
   border-radius: 2px;
   padding: 1rem;
   position: relative;
-  min-height: 300px;
 }
 
 .chart-container.full-width {
   grid-column: span 2;
   height: 450px;
+  flex-shrink: 0;
 }
 
 .chart-container:nth-child(2),
 .chart-container:nth-child(3) {
-  height: 350px;
+  flex: 1;
+  min-height: 350px;
 }
 
 .chart-title {
@@ -440,37 +472,19 @@ footer {
 
 /* ---- Responsive ---- */
 @media (max-width: 820px) {
-  .charts-grid {
-    grid-template-columns: 1fr;
+  .sidebar {
+    display: none;
   }
-  .chart-container.full-width {
-    grid-column: span 1;
+  .page-body {
+    padding: calc(55px + 1.25rem) 1rem 3rem;
   }
-  nav {
-    gap: 0.5rem;
-    padding: 0.85rem 0.85rem;
+  .dashboard {
+    padding: 1.5rem;
   }
-  .back-link { font-size: 0.58rem; padding: 0.25rem 0.4rem; letter-spacing: 0.08em; }
-  .nav-brand { font-size: 0.9rem; }
-  .brand-sub { font-size: 0.6rem; letter-spacing: 0.1em; }
-  .page-body { padding: calc(55px + 1.25rem) 1rem 3rem; }
-  .dashboard { padding: 1.5rem; }
-  .charts-grid { grid-template-columns: 1fr; }
-  .chart-container.full-width { grid-column: span 1; }
-  .filter-group { min-width: unset; }
-  .filters {
-    grid-template-columns: 1fr 1fr;
-  }
-  .apply-btn { grid-column: 1 / -1; }
-  .theme-toggle { width: 20px; height: 20px; bottom: 1rem; right: 0.9rem; }
 }
 
 @media (max-width: 460px) {
   .nav-brand .brand-sub { display: none; }
   .nav-brand .brand-sep { display: none; }
   .dashboard { padding: 1rem; }
-  .filters {
-    grid-template-columns: 1fr;
-  }
-  .apply-btn { grid-column: span 1; }
 }