From 0145f361e223ccc280177a04f12278b24d4a5ac3 Mon Sep 17 00:00:00 2001
From: Mark Eaton <MarkEEaton@users.noreply.github.com>
Date: Thu, 4 Feb 2021 16:06:14 -0500
Subject: [PATCH] improve hours widget

---
 groups/new-homepage-3/homepage3-js-css.html   | 29 ++++++++++---------
 groups/new-homepage-3/homepage3-template.html | 20 +++++++------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/groups/new-homepage-3/homepage3-js-css.html b/groups/new-homepage-3/homepage3-js-css.html
index 24d05bd..1bb1d6d 100644
--- a/groups/new-homepage-3/homepage3-js-css.html
+++ b/groups/new-homepage-3/homepage3-js-css.html
@@ -84,12 +84,14 @@ img {
         outline: 0;
 }
 
-/* style the hours div */
-.hours-div {
-        background-color: #bbb;
-        height: 150px;
-        text-align: center;
-        padding-top: 35px;
+/* style the hours */
+.hours {
+        text-align:right;
+        border-top: solid white 0px !important;
+}
+
+.date {
+        border-top: solid white 0px !important;
 }
 
 /* style the yamm menu */
@@ -132,17 +134,16 @@ window.onload = function () {
         const h = JSON.parse(hours)
         const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
         for (var i = 0; i < h.length; i++) {
-                var targetDate = new Date(h[i]["Date"] + "T00:00:00.000-05:00");
-                var today = new Date();
+                let targetDate = new Date(h[i]["Date"] + "T00:00:00.000-05:00");
+                let today = new Date();
                 if (targetDate.getFullYear() === today.getFullYear() &&
                     targetDate.getMonth() === today.getMonth() &&
                     targetDate.getDate() === today.getDate()) {
-                           document.getElementById('hours0').innerHTML = targetDate.toLocaleDateString("en-US", options) + " - " +  h[i]["Hours"]
-                           start = true;
-                           count = 1;
-                    };
-                if (start === true && count < 4) {
-                        document.getElementById('hours' + count).innerHTML = targetDate.toLocaleDateString("en-US", options) + " - " +  h[i]["Hours"]
+                           document.getElementById('hours0').innerHTML = "<td class='hours col-xs-7'>" + targetDate.toLocaleDateString("en-US", options) + "</td><td class='date col-xs-5'>" + h[i]["Hours"] + "</td>"
+                           var start = true;
+                           var count = 1
+                } else if (start === true && count < 7) {
+                        document.getElementById('hours' + count).innerHTML = "<td class='hours col-xs-7'>" + targetDate.toLocaleDateString("en-US", options) + "</td><td class='date col-xs-5'>" + h[i]["Hours"] + "</td>"
                         count++
                  }
         };
diff --git a/groups/new-homepage-3/homepage3-template.html b/groups/new-homepage-3/homepage3-template.html
index 82b7905..c8b681f 100644
--- a/groups/new-homepage-3/homepage3-template.html
+++ b/groups/new-homepage-3/homepage3-template.html
@@ -137,15 +137,17 @@
                                                        <span class="panel-title content-panel-title">LIbrary Hours</span>
                                                </div>
                                                <div class="panel-body">
-                                                       <div class="hours-div">
-                                                               <div id="hours0"></div>
-                                                               <div id="hours1"></div>
-                                                               <div id="hours2"></div>
-                                                               <div id="hours3"></div>
-                                                               <div id="hours4"></div>
-                                                               <div id="hours5"></div>
-                                                               <div id="hours6"></div>
-                                                       </div>
+                                                       <table class="table">
+                                                               <tbody>
+                                                                       <tr id="hours0"></tr>
+                                                                       <tr id="hours1"></tr>
+                                                                       <tr id="hours2"></tr>
+                                                                       <tr id="hours3"></tr>
+                                                                       <tr id="hours4"></tr>
+                                                                       <tr id="hours5"></tr>
+                                                                       <tr id="hours6"></tr>
+                                                               </tbody>
+                                                       </table>
                                                </div>
                                         </div>
                                 </div>