Update dashboard layout to work with sidebar

This commit is contained in:
Eli Ribble 2026-02-07 18:04:24 +00:00
parent f9389de27b
commit 874d49c6a5
No known key found for this signature in database
4 changed files with 52 additions and 53 deletions

View file

@ -7,58 +7,7 @@
href="https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet"
/>
<script src="/static/js/map-aggregate.js"></script>
<style>
body {
background-color: #f8f9fa;
}
.dashboard-container {
padding: 20px 0;
}
.stats-card {
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.2s;
height: 100%;
}
.stats-card:hover {
transform: translateY(-5px);
}
.section-title {
margin: 30px 0 20px;
padding-bottom: 10px;
border-bottom: 1px solid #dee2e6;
}
.last-refreshed {
color: #6c757d;
}
.logo-placeholder {
width: 100px;
height: 40px;
background-color: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.metric-icon {
font-size: 2rem;
margin-bottom: 10px;
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
}
.metric-value {
font-size: 2rem;
font-weight: bold;
}
.syncing {
color: #28a745;
animation: fa-spin 2s linear infinite;
}
</style>
<style></style>
<script>
function onLoad() {
const map = document.querySelector("map-aggregate");
@ -70,7 +19,7 @@
</script>
{{ end }}
{{ define "content" }}
<div class="container dashboard-container">
<div id="content">
<!-- Dashboard Header -->
<div class="row mb-4">
<div class="col-md-6">

View file

@ -49,3 +49,5 @@ $theme-colors: map-merge(
@import "./rmo/nuisance.scss";
@import "./rmo/root.scss";
@import "./rmo/status.scss";
@import "./sync/dashboard.scss";
@import "./sync/pool-csv-upload.scss";

View file

@ -36,6 +36,7 @@
#content {
transition: all 0.3s;
margin-left: 250px;
padding: 10px;
width: calc(100% - 250px);
}

47
scss/sync/dashboard.scss Normal file
View file

@ -0,0 +1,47 @@
body {
background-color: #f8f9fa;
}
.stats-card {
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.2s;
height: 100%;
}
.stats-card:hover {
transform: translateY(-5px);
}
.section-title {
margin: 30px 0 20px;
padding-bottom: 10px;
border-bottom: 1px solid #dee2e6;
}
.last-refreshed {
color: #6c757d;
}
.logo-placeholder {
width: 100px;
height: 40px;
background-color: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.metric-icon {
font-size: 2rem;
margin-bottom: 10px;
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
}
.metric-value {
font-size: 2rem;
font-weight: bold;
}
.syncing {
color: #28a745;
animation: fa-spin 2s linear infinite;
}