ocertat/Kingsborough-LibGuide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make hours horizontal

Browse Source
This commit is contained in:
Mark Eaton
2021-02-04 22:28:58 -05:00
parent 0145f361e2
commit fb5deb1fed
2 changed files with 68 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/new-homepage-3/homepage3-js-css.html
+28 -11
View File
@@ -86,12 +86,26 @@ img {
/* style the hours */ /* style the hours */
.hours { .hours {
text-align:right; text-align:center;
border-top: solid white 0px !important;
} }
.date { .padding-0 {
border-top: solid white 0px !important; padding-left: 5px;
padding-right: 5px;
flex:1 1 auto;
display: flex;
}
.equal {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.panel {
flex:1 0 100%;
} }
/* style the yamm menu */ /* style the yamm menu */
@@ -127,25 +141,28 @@ img {
/* End of Yamm */ /* End of Yamm */
</style> </style>
<!-- the configuration file for the hours widget -->
<script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/hours.js"></script> <script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/hours.js"></script>
<!-- the code for the hours widget -->
<script type="text/javascript"> <script type="text/javascript">
window.onload = function () { window.onload = function () {
const h = JSON.parse(hours) const h = JSON.parse(hours)
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; const options_weekday = { weekday: 'short' };
const options_date = { month: 'short', day: 'numeric' }
for (var i = 0; i < h.length; i++) { for (var i = 0; i < h.length; i++) {
let targetDate = new Date(h[i]["Date"] + "T00:00:00.000-05:00"); let targetDate = new Date(h[i]["Date"] + "T00:00:00.000-05:00");
let today = new Date(); let today = new Date();
if (targetDate.getFullYear() === today.getFullYear() && if (targetDate.getFullYear() === today.getFullYear() &&
targetDate.getMonth() === today.getMonth() && targetDate.getMonth() === today.getMonth() &&
targetDate.getDate() === today.getDate()) { targetDate.getDate() === today.getDate()) {
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>" document.getElementById('hours0').innerHTML = "<p>" +targetDate.toLocaleDateString("en-US", options_weekday) + "<br />" +targetDate.toLocaleDateString("en-US", options_date) + "</p><p>" + h[i]["Hours"] + "</p>"
var start = true; var start = true;
var count = 1 var count = 1;
} else if (start === true && count < 7) { } else if (start === true && count < 5) {
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>" document.getElementById('hours' + count).innerHTML = "<p>" +targetDate.toLocaleDateString("en-US", options_weekday) + "<br />" +targetDate.toLocaleDateString("en-US", options_date) + "</p><p>" + h[i]["Hours"] + "</p>"
count++ count++;
} };
}; };
}; };
</script> </script>
groups/new-homepage-3/homepage3-template.html
+40 -12
View File
@@ -134,20 +134,48 @@
</div> </div>
<div class="panel panel-default hide-body-border"> <div class="panel panel-default hide-body-border">
<div class="panel-heading show-panel"> <div class="panel-heading show-panel">
<span class="panel-title content-panel-title">LIbrary Hours</span> <span class="panel-title content-panel-title">Upcoming Library Hours</span>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<table class="table"> <div class="row equal">
<tbody> <div class="col-md-1 padding-0"></div>
<tr id="hours0"></tr> <div class="col-md-2 padding-0">
<tr id="hours1"></tr> <div class="panel panel-default">
<tr id="hours2"></tr> <div class="panel-body hours-panel-body">
<tr id="hours3"></tr> <span id="hours0" class="hours"></span>
<tr id="hours4"></tr> </div>
<tr id="hours5"></tr> </div>
<tr id="hours6"></tr> </div>
</tbody> <div class="col-md-2 padding-0">
</table> <div class="panel panel-default">
<div class="panel-body hours-panel-body">
<span id="hours1" class="hours"></span>
</div>
</div>
</div>
<div class="col-md-2 padding-0">
<div class="panel panel-default">
<div class="panel-body hours-panel-body">
<span id="hours2" class="hours"></span>
</div>
</div>
</div>
<div class="col-md-2 padding-0">
<div class="panel panel-default">
<div class="panel-body hours-panel-body">
<span id="hours3" class="hours"></span>
</div>
</div>
</div>
<div class="col-md-2 padding-0">
<div class="panel panel-default">
<div class="panel-body hours-panel-body">
<span id="hours4" class="hours"></span>
</div>
</div>
</div>
<div class="col-md-1 padding-0"></div>
</div>
</div> </div>
</div> </div>
</div> </div>