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 */
.hours {
text-align:right;
border-top: solid white 0px !important;
text-align:center;
}
.date {
border-top: solid white 0px !important;
.padding-0 {
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 */
@@ -127,25 +141,28 @@ img {
/* End of Yamm */
</style>
<!-- the configuration file for the hours widget -->
<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">
window.onload = function () {
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++) {
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 = "<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 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++
}
var count = 1;
} else if (start === true && count < 5) {
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++;
};
};
};
</script>
groups/new-homepage-3/homepage3-template.html
+40 -12
View File
@@ -134,20 +134,48 @@
</div>
<div class="panel panel-default hide-body-border">
<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 class="panel-body">
<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 class="row equal">
<div class="col-md-1 padding-0"></div>
<div class="col-md-2 padding-0">
<div class="panel panel-default">
<div class="panel-body hours-panel-body">
<span id="hours0" 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="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>