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

Tweak summary layout

Browse Source
This commit is contained in:
Chris Kaczor
2024-03-15 01:09:47 +00:00
parent af3df52ed4
commit fb9212daa8
1 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,22 +56,41 @@
@media (min-width: 1024px) {
.container {
display: grid;
grid-template-columns: repeat(2, max-content);
grid-template-columns: 425px max-content;
grid-template-rows: repeat(2, max-content);
gap: 15px 15px;
grid-auto-flow: row;
grid-template-areas: 'weather-summary .' 'main-summary basement-summary';
grid-template-areas:
'weather-summary main-summary'
'weather-summary basement-summary';
}
}
@media (max-width: 1024px) {
.container {
padding: 7px;
display: grid;
grid-template-columns: repeat(1, max-content);
grid-template-columns: 425px;
grid-template-rows: repeat(3, max-content);
gap: 10px 0px;
grid-template-areas: 'weather-summary' 'main-summary' 'basement-summary';
gap: 15px 0px;
grid-auto-flow: row;
grid-template-areas:
'weather-summary'
'main-summary'
'basement-summary';
}
}
@media (max-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, max-content);
gap: 15px 0px;
grid-auto-flow: row;
grid-template-areas:
'weather-summary'
'main-summary'
'basement-summary';
}
}