diff --git a/WebDisplay/src/components/Almanac.vue b/WebDisplay/src/components/Almanac.vue
index 7c99dcd..00d7e57 100644
--- a/WebDisplay/src/components/Almanac.vue
+++ b/WebDisplay/src/components/Almanac.vue
@@ -73,49 +73,29 @@
| Sunrise |
- {{
- format(
- almanacStore.sunTimes.sunrise,
- 'hh:mm:ss aa'
- )
- }}
+ {{ format(almanacStore.sunTimes.sunrise, 'hh:mm:ss aa') }}
|
| Sunset |
- {{
- format(
- almanacStore.sunTimes.sunset,
- 'hh:mm:ss aa'
- )
- }}
+ {{ format(almanacStore.sunTimes.sunset, 'hh:mm:ss aa') }}
|
| Day length |
{{ dayLength() }} |
-
+
| Moonrise |
- {{
- format(
- almanacStore.moonTimes.rise,
- 'hh:mm:ss aa'
- )
- }}
+ {{ almanacStore.moonTimes?.rise ? format(almanacStore.moonTimes.rise, 'hh:mm:ss aa') : 'None' }}
|
-
+
| Moonset |
- {{
- format(
- almanacStore.moonTimes.set,
- 'hh:mm:ss aa'
- )
- }}
+ {{ almanacStore.moonTimes?.set ? format(almanacStore.moonTimes.set, 'hh:mm:ss aa') : 'None' }}
|
@@ -123,12 +103,7 @@
{{ moonPhaseName() }}
- {{
- (
- almanacStore.moonIllumination.fraction *
- 100
- ).toFixed(1)
- }}% illuminated
+ {{ (almanacStore.moonIllumination.fraction * 100).toFixed(1) }}% illuminated
|
diff --git a/WebDisplay/src/pages/index.vue b/WebDisplay/src/pages/index.vue
index 249def5..0fec970 100644
--- a/WebDisplay/src/pages/index.vue
+++ b/WebDisplay/src/pages/index.vue
@@ -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';
}
|