move filters to left box
This commit is contained in:
+49
-43
@@ -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>
|
||||
|
||||
+58
-44
@@ -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; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user