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">
.dashboard {
display: flex;
height: 100vh;
overflow: hidden;
background: var(--bg);
color: var(--text);
display: flex;
height: 100vh;
overflow: hidden;
background: var(--bg);
color: var(--text);
}
.map-col {
flex: 1;
min-width: 0;
padding: 16px;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
padding: 16px;
display: flex;
flex-direction: column;
}
.panel-col {
width: 380px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
overflow-y: auto;
border-left: 1px solid var(--border);
width: 380px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
overflow-y: auto;
border-left: 1px solid var(--border);
&::-webkit-scrollbar { width: 4px; }
&::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
&::-webkit-scrollbar { width: 4px; }
&::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
}
.group-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-top: 4px;
margin-bottom: 2px;
padding: 0 2px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-top: 4px;
margin-bottom: 2px;
padding: 0 2px;
}
.metric-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.loading-bar {
height: 2px;
background: var(--accent);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
animation: pulse 1s infinite;
height: 2px;
background: var(--accent);
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9999;
animation: pulse 1s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@media (max-width: 768px) {
.dashboard { flex-direction: column; }
.map-col { height: 45vh; padding: 8px; }
.panel-col { width: 100%; border-left: none; border-top: 1px solid var(--border); }
.metric-grid { grid-template-columns: 1fr 1fr; }
.dashboard {
flex-direction: column;
position: relative;
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>