ztimson/weather-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile friendly

Browse Source
This commit is contained in:
Zakary Timson
2026-06-21 23:14:11 -04:00
parent 0d71b08525
commit 146336d1ce
1 changed files with 87 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
client/src/views/Dashboard.vue
View File

@@ -33,73 +33,115 @@ const groupedMetrics = computed(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.dashboard { .dashboard {
display: flex; display: flex;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
} }
.map-col { .map-col {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
padding: 16px; padding: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.panel-col { .panel-col {
width: 380px; width: 380px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
padding: 16px; padding: 16px;
overflow-y: auto; overflow-y: auto;
border-left: 1px solid var(--border); border-left: 1px solid var(--border);
&::-webkit-scrollbar { width: 4px; } &::-webkit-scrollbar { width: 4px; }
&::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } &::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
} }
.group-label { .group-label {
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: var(--text-muted); color: var(--text-muted);
margin-top: 4px; margin-top: 4px;
margin-bottom: 2px; margin-bottom: 2px;
padding: 0 2px; padding: 0 2px;
} }
.metric-grid { .metric-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 8px; gap: 8px;
} }
.loading-bar { .loading-bar {
height: 2px; height: 2px;
background: var(--accent); background: var(--accent);
position: fixed; position: fixed;
top: 0; top: 0; left: 0; right: 0;
left: 0; z-index: 9999;
right: 0; animation: pulse 1s infinite;
z-index: 9999;
animation: pulse 1s infinite;
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { opacity: 1; } 0%, 100% { opacity: 1; }
50% { opacity: 0.4; } 50% { opacity: 0.4; }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.dashboard { flex-direction: column; } .dashboard {
.map-col { height: 45vh; padding: 8px; } flex-direction: column;
.panel-col { width: 100%; border-left: none; border-top: 1px solid var(--border); } position: relative;
.metric-grid { grid-template-columns: 1fr 1fr; } overflow: hidden;
}
.map-col {
position: absolute;
inset: 0;
height: 100vh;
padding: 8px;
z-index: 0;
}
.panel-col {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
width: 100%;
border-left: none;
border-top: 1px solid var(--border);
border-radius: 16px 16px 0 0;
/* Show a peek of the panel, scrolls up over the map */
max-height: calc(100vh - 120px);
min-height: 40vh;
overflow-y: auto;
background: var(--bg);
padding: 12px 16px 24px;
/* Smooth momentum scroll on iOS */
-webkit-overflow-scrolling: touch;
&::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: var(--border);
border-radius: 2px;
margin: 0 auto 12px;
}
&::-webkit-scrollbar { display: none; }
}
} }
</style> </style>