ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-14 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Tweak current layout

Browse Source
This commit is contained in:
Chris Kaczor
2024-03-15 01:01:12 +00:00
parent 05c0d49a93
commit af3df52ed4
2 changed files with 13 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
WebDisplay/src/components/Almanac.vue
View File

@@ -73,49 +73,29 @@
<tr>
<td className="almanac-table-header">Sunrise</td>
<td colSpan="{2}">
{{
format(
almanacStore.sunTimes.sunrise,
'hh:mm:ss aa'
)
}}
{{ format(almanacStore.sunTimes.sunrise, 'hh:mm:ss aa') }}
</td>
</tr>
<tr>
<td className="almanac-table-header">Sunset</td>
<td colSpan="{2}">
{{
format(
almanacStore.sunTimes.sunset,
'hh:mm:ss aa'
)
}}
{{ format(almanacStore.sunTimes.sunset, 'hh:mm:ss aa') }}
</td>
</tr>
<tr>
<td className="almanac-table-header">Day length</td>
<td colSpan="{2}">{{ dayLength() }}</td>
</tr>
<tr v-if="almanacStore.moonTimes?.rise">
<tr>
<td className="almanac-table-header">Moonrise</td>
<td colSpan="{2}">
{{
format(
almanacStore.moonTimes.rise,
'hh:mm:ss aa'
)
}}
{{ almanacStore.moonTimes?.rise ? format(almanacStore.moonTimes.rise, 'hh:mm:ss aa') : 'None' }}
</td>
</tr>
<tr v-if="almanacStore.moonTimes?.set">
<tr>
<td className="almanac-table-header">Moonset</td>
<td colSpan="{2}">
{{
format(
almanacStore.moonTimes.set,
'hh:mm:ss aa'
)
}}
{{ almanacStore.moonTimes?.set ? format(almanacStore.moonTimes.set, 'hh:mm:ss aa') : 'None' }}
</td>
</tr>
<tr>
@@ -123,12 +103,7 @@
<td>
{{ moonPhaseName() }}
<br />
{{
(
almanacStore.moonIllumination.fraction *
100
).toFixed(1)
}}% illuminated
{{ (almanacStore.moonIllumination.fraction * 100).toFixed(1) }}% illuminated
</td>
<td>
<div className="moon-phase">

13
WebDisplay/src/pages/index.vue
View File

@@ -38,26 +38,25 @@
@media (min-width: 1024px) {
.container {
display: grid;
grid-template-columns: repeat(5, max-content);
grid-template-columns: 360px 350px 210px 1fr;
grid-template-rows: repeat(3, max-content);
gap: 15px 15px;
grid-auto-flow: row;
grid-template-areas:
'current-weather current-weather almanac almanac current-power'
'current-weather current-weather almanac almanac current-laundry-status'
'upstairs downstairs . . .';
'current-weather almanac current-laundry-status'
'current-weather almanac current-power'
'upstairs downstairs .';
}
}
@media (max-width: 1024px) {
.container {
display: grid;
grid-template-columns: repeat(4, max-content);
grid-template-rows: repeat(3, max-content);
grid-template-columns: repeat(4, 180px);
grid-template-rows: repeat(2, max-content);
gap: 15px 15px;
grid-auto-flow: row;
grid-template-areas:
'current-weather current-weather almanac almanac'
'current-weather current-weather almanac almanac'
'current-power current-laundry-status upstairs downstairs';
}