ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-02-16 10:58:32 -05:00
Code Issues 9 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> <tr>
<td className="almanac-table-header">Sunrise</td> <td className="almanac-table-header">Sunrise</td>
<td colSpan="{2}"> <td colSpan="{2}">
{{ {{ format(almanacStore.sunTimes.sunrise, 'hh:mm:ss aa') }}
format(
almanacStore.sunTimes.sunrise,
'hh:mm:ss aa'
)
}}
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="almanac-table-header">Sunset</td> <td className="almanac-table-header">Sunset</td>
<td colSpan="{2}"> <td colSpan="{2}">
{{ {{ format(almanacStore.sunTimes.sunset, 'hh:mm:ss aa') }}
format(
almanacStore.sunTimes.sunset,
'hh:mm:ss aa'
)
}}
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="almanac-table-header">Day length</td> <td className="almanac-table-header">Day length</td>
<td colSpan="{2}">{{ dayLength() }}</td> <td colSpan="{2}">{{ dayLength() }}</td>
</tr> </tr>
<tr v-if="almanacStore.moonTimes?.rise"> <tr>
<td className="almanac-table-header">Moonrise</td> <td className="almanac-table-header">Moonrise</td>
<td colSpan="{2}"> <td colSpan="{2}">
{{ {{ almanacStore.moonTimes?.rise ? format(almanacStore.moonTimes.rise, 'hh:mm:ss aa') : 'None' }}
format(
almanacStore.moonTimes.rise,
'hh:mm:ss aa'
)
}}
</td> </td>
</tr> </tr>
<tr v-if="almanacStore.moonTimes?.set"> <tr>
<td className="almanac-table-header">Moonset</td> <td className="almanac-table-header">Moonset</td>
<td colSpan="{2}"> <td colSpan="{2}">
{{ {{ almanacStore.moonTimes?.set ? format(almanacStore.moonTimes.set, 'hh:mm:ss aa') : 'None' }}
format(
almanacStore.moonTimes.set,
'hh:mm:ss aa'
)
}}
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -123,12 +103,7 @@
<td> <td>
{{ moonPhaseName() }} {{ moonPhaseName() }}
<br /> <br />
{{ {{ (almanacStore.moonIllumination.fraction * 100).toFixed(1) }}% illuminated
(
almanacStore.moonIllumination.fraction *
100
).toFixed(1)
}}% illuminated
</td> </td>
<td> <td>
<div className="moon-phase"> <div className="moon-phase">

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

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