add new group js/css; add panels to new homepage
This commit is contained in:
Mark Eaton
@@ -0,0 +1,92 @@
|
|||||||
|
<style>
|
||||||
|
|
||||||
|
.glyphicon-pan {
|
||||||
|
font-size: 11em;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-body {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/zabuto_calendar.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="//libapps.s3.amazonaws.com/sites/2365/include/zabuto_calendar.min.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.open-day {
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.closed-day {
|
||||||
|
background-color: #ecc6c6;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.calendar-month-header {
|
||||||
|
font-size:1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* align the month name with the back/forward chevrons */
|
||||||
|
.calendar-month-navigation {
|
||||||
|
margin-top: -4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* make the header unstyled */
|
||||||
|
div.zabuto_calendar .table tr.calendar-month-header td {
|
||||||
|
background-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* make the days of the week unstyled */
|
||||||
|
th {
|
||||||
|
background-color: #fff !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* remove the borders between dates */
|
||||||
|
td {
|
||||||
|
border: none !important;
|
||||||
|
padding: 3px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* remove the border at the bottom of the calendar */
|
||||||
|
div.zabuto_calendar .table tr:last-child {
|
||||||
|
border: none !important
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* style the pop-up window */
|
||||||
|
.modal-footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modal-dialog {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
.modal-header, .modal-body {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script type="application/javascript">
|
||||||
|
$(document).ready(function () {
|
||||||
|
$("#my-calendar").zabuto_calendar({
|
||||||
|
language: "en",
|
||||||
|
year: 2021,
|
||||||
|
month: 1,
|
||||||
|
show_next: 1,
|
||||||
|
show_previous: 2,
|
||||||
|
today: true,
|
||||||
|
weekstartson: 0,
|
||||||
|
ajax: { url:"//libapps.s3.amazonaws.com/sites/2365/include/zabuto.json", modal:true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -25,12 +25,94 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div id="col1" class="col-md-8 center">
|
<div class="col-sm-8">
|
||||||
</div>
|
<div class="row">
|
||||||
<div id="col2" class="col-md-4 center">
|
<div class="col-xs-6 col-md-4 col-lg-3">
|
||||||
{{content_boxes}}
|
<div class="panel panel-default">
|
||||||
</div>
|
<div class="panel-heading">
|
||||||
</div>
|
<span class="panel-title">Info</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<span class="glyphicon glyphicon-info-sign glyphicon-pan"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-4 col-lg-3">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<span class="panel-title">Check</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<span class="glyphicon glyphicon-ok glyphicon-pan"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-4 col-lg-3">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<span class="panel-title">Heart</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<span class="glyphicon glyphicon-heart glyphicon-pan"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-4 col-lg-3">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<span class="panel-title">Star</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<span class="glyphicon glyphicon-star glyphicon-pan"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-4 col-lg-3">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<span class="panel-title">Pencil</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<span class="glyphicon glyphicon-pencil glyphicon-pan"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-4 col-lg-3">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<span class="panel-title">Envelope</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<span class="glyphicon glyphicon-envelope glyphicon-pan"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-4 col-lg-3">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<span class="panel-title">Euro</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<span class="glyphicon glyphicon-euro glyphicon-pan"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-4 col-lg-3">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<span class="panel-title">Home</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<span class="glyphicon glyphicon-home glyphicon-pan"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
{{content_boxes}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- END: content -->
|
<!-- END: content -->
|
||||||
|
|||||||
Reference in New Issue
Block a user