From af3df52ed462ae39b87c4dc984623ddd70fff753 Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Fri, 15 Mar 2024 01:01:12 +0000
Subject: [PATCH] Tweak current layout

---
 WebDisplay/src/components/Almanac.vue | 39 +++++----------------------
 WebDisplay/src/pages/index.vue        | 13 +++++----
 2 files changed, 13 insertions(+), 39 deletions(-)

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 @@
                     <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">
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';
         }