ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-22 17:23:52 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Add indoor summary

Browse Source
This commit is contained in:
Chris Kaczor
2024-03-15 00:28:54 +00:00
parent e4ee81ca3e
commit 05c0d49a93
7 changed files with 136 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
WebDisplay/src/pages/summary.vue
View File

@@ -30,6 +30,20 @@
:start="start"
:end="end"></WeatherSummary>
</v-card>
<v-card class="main-summary">
<IndoorSummary
name="main"
title="Upstairs"
:start="start"
:end="end"></IndoorSummary>
</v-card>
<v-card class="basement-summary">
<IndoorSummary
name="basement"
title="Downstairs"
:start="start"
:end="end"></IndoorSummary>
</v-card>
</v-container>
</template>
@@ -42,41 +56,34 @@
@media (min-width: 1024px) {
.container {
display: grid;
grid-template-columns: repeat(3, max-content);
grid-template-columns: repeat(2, max-content);
grid-template-rows: repeat(2, max-content);
gap: 15px 15px;
grid-auto-flow: row;
grid-template-areas:
'weather-summary weather-summary weather-summary'
'weather-summary weather-summary weather-summary';
grid-template-areas: 'weather-summary .' 'main-summary basement-summary';
}
}
@media (max-width: 1024px) {
.container {
display: grid;
grid-template-columns: repeat(3, max-content);
grid-template-rows: repeat(2, max-content);
gap: 15px 15px;
grid-auto-flow: row;
grid-template-areas:
'weather-summary weather-summary weather-summary'
'weather-summary weather-summary weather-summary';
}
}
@media (max-width: 768px) {
.container {
padding: 7px;
display: grid;
grid-template-columns: repeat(1, max-content);
grid-template-rows: repeat(1, max-content);
grid-template-rows: repeat(3, max-content);
gap: 10px 0px;
grid-template-areas: 'weather-summary';
grid-template-areas: 'weather-summary' 'main-summary' 'basement-summary';
}
}
.weather-summary {
grid-area: weather-summary;
}
.main-summary {
grid-area: main-summary;
}
.basement-summary {
grid-area: basement-summary;
}
</style>