css
This commit is contained in:
Kameron Kenny
parent
af5d4e4a7f
commit
919707adae
|
|
@ -22,6 +22,17 @@ body {
|
|||
table.events {
|
||||
width: 99%;
|
||||
}
|
||||
.notes {
|
||||
background: #000;
|
||||
margin-top: 10px;
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
max-width: 100%; }
|
||||
.debug {
|
||||
background: #000;
|
||||
color: lime;
|
||||
margin-top: 15px;
|
||||
border: 1px solid lime; }
|
||||
.clock {
|
||||
display: none;
|
||||
font-size: 1.8rem;
|
||||
|
|
@ -30,7 +41,7 @@ table.events {
|
|||
padding: 5px;
|
||||
margin-bottom: 0px; }
|
||||
.button {
|
||||
border: 1px solid #666;
|
||||
border: 1px solid #333;
|
||||
background-color: #4CAF50;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
|
|
@ -43,13 +54,15 @@ table.events {
|
|||
max-width: 99%;
|
||||
padding: 0 5px; }
|
||||
.header {
|
||||
background: #666;
|
||||
background-color: #666;
|
||||
margin-top: 6rem;
|
||||
text-align: center; }
|
||||
.header.columns {
|
||||
background: #666; }
|
||||
.navbar {
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
background-color: #222;
|
||||
background: #222;
|
||||
/*display: none;*/ }
|
||||
.events {
|
||||
text-align: left; }
|
||||
|
|
@ -57,7 +70,7 @@ table.events {
|
|||
/* Larger than phone */
|
||||
@media (min-width: 550px) {
|
||||
.button {
|
||||
border: 1px solid #666;
|
||||
border: 1px solid #333;
|
||||
background-color: #4CAF50;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
|
|
@ -67,6 +80,7 @@ table.events {
|
|||
.two-thirds.column { width: 68.8%; }
|
||||
.column,
|
||||
.columns {
|
||||
background: transparent;
|
||||
margin-left: 3px; }
|
||||
.clock-wrapper {
|
||||
display: block;
|
||||
|
|
@ -80,7 +94,9 @@ table.events {
|
|||
padding: 5px;
|
||||
margin-bottom: 0px; }
|
||||
.header {
|
||||
margin-top: 0rem; }
|
||||
background-color: #666;
|
||||
text-align: center;
|
||||
margin-top: 6rem; }
|
||||
.events {
|
||||
text-align: left; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,6 +69,11 @@ var events = [
|
|||
"subject": "Monit w/ Gumby",
|
||||
"notes": "Demo Monit and how it can be useful for gumby"
|
||||
},
|
||||
{
|
||||
"date": "May 29, 2019 16:25:00",
|
||||
"subject": "Git Push",
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"date": "May 30, 2019 00:00:01",
|
||||
"subject": "10-year anniversery",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Top Bar -->
|
||||
<div class="section hero u-full-width u-max-full-width">
|
||||
<div class="container navbar">
|
||||
<div class="row">
|
||||
|
|
@ -47,17 +48,22 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / Top Bar -->
|
||||
|
||||
<!-- mid-section -->
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row columns">
|
||||
<!-- events-list -->
|
||||
<div class="one-third column events">
|
||||
<div id="events-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- /events-list -->
|
||||
<!-- current-next events -->
|
||||
<div class="two-thirds column">
|
||||
<!-- current-event -->
|
||||
<div class="header">
|
||||
<div class="columns">
|
||||
<div class="row">
|
||||
<div class="two-thirds column">
|
||||
<div id="currentSubject" class="subject"></div>
|
||||
</div>
|
||||
|
|
@ -66,24 +72,41 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="currentStartEnd"></div>
|
||||
<div class="notes" id="notes"></div>
|
||||
<div class="header">
|
||||
<div id="upNext" class="subject"></div>
|
||||
<div id="nextCountdown" class="countdown"></div>
|
||||
<div id="nextStartEnd"></div>
|
||||
</div>
|
||||
<div calss="row">
|
||||
<div class="notes" id="notes"></div>
|
||||
</div>
|
||||
<!-- /current-event -->
|
||||
|
||||
<!-- next-event -->
|
||||
<div class="header">
|
||||
<div class="row">
|
||||
<div class="two-thirds column">
|
||||
<div id="upNext" class="subject"></div>
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<div id="nextCountdown" class="countdown"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="nextStartEnd"></div>
|
||||
<!-- /next-event -->
|
||||
<div id="debug" class="debug"></div>
|
||||
</div>
|
||||
<!-- /current-next-events -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /mid-section -->
|
||||
|
||||
|
||||
<div class="grid-bottom">
|
||||
<div id="meta" class="grid-meta"></div>
|
||||
<div id="meta" class="grid-meta u-pull-right"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="events.js"></script>
|
||||
<script src="main.js"></script>
|
||||
<script src="timerMath.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
// meta
|
||||
var version = "0.9.112"
|
||||
var version = "0.10.2"
|
||||
var debug = false;
|
||||
|
||||
var initialized = false;
|
||||
|
||||
var style = 'green';
|
||||
var eventStyle = "events";
|
||||
|
||||
|
|
@ -9,6 +11,7 @@ var list;
|
|||
var counter_diff;
|
||||
|
||||
var eventsLength = events.length;
|
||||
var eventLength;
|
||||
|
||||
var array_counter = 0;
|
||||
var currentObject = array_counter;
|
||||
|
|
@ -44,7 +47,6 @@ function toggleDebug() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
function incArray() {
|
||||
if (array_counter < eventsLength) {
|
||||
array_counter++;
|
||||
|
|
@ -108,8 +110,8 @@ var x = setInterval(function() {
|
|||
|
||||
list = "<table class=events><th class=events>Event</th><th class=events>Time</th><th class=events>Time Until</th>";
|
||||
|
||||
if (eventsLength > 20) {
|
||||
var listLength = 20;
|
||||
if (eventsLength > 15) {
|
||||
var listLength = 15;
|
||||
var page = true;
|
||||
} else {
|
||||
var listLength = eventsLength;
|
||||
|
|
@ -122,8 +124,10 @@ var x = setInterval(function() {
|
|||
|
||||
if (i === array_counter) {
|
||||
eventStyle = "events-current";
|
||||
cdFunction = countdown(events[i].date, "current");
|
||||
} else {
|
||||
eventStyle = "events";
|
||||
cdFunction = countdown(events[i].date, "next");
|
||||
}
|
||||
|
||||
counter_diff = i - array_counter;
|
||||
|
|
@ -134,7 +138,7 @@ var x = setInterval(function() {
|
|||
listLength++;
|
||||
}
|
||||
} else {
|
||||
list += "<tr><td class=" + eventStyle + ">" + events[i].subject + "</td><td class=" + eventStyle + ">" + events[i].date + "</td><td class=" + eventStyle + ">" + countdown(events[i].date) + "</td></tr>";
|
||||
list += "<tr><td class=" + eventStyle + ">" + events[i].subject + "</td><td class=" + eventStyle + ">" + events[i].date + "</td><td class=" + eventStyle + ">" + cdFunction + "</td></tr>";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -148,8 +152,8 @@ var x = setInterval(function() {
|
|||
document.getElementById("utc_now").innerHTML = clock_dateUTC();
|
||||
|
||||
//
|
||||
document.getElementById("countdown").innerHTML = countdown(currentDate);
|
||||
document.getElementById("nextCountdown").innerHTML = countdown(nextDate);
|
||||
document.getElementById("countdown").innerHTML = countdown(currentDate, "current");
|
||||
document.getElementById("nextCountdown").innerHTML = countdown(nextDate, "next");
|
||||
|
||||
if (debug === true) {
|
||||
document.getElementById("debug").innerHTML = "debug: " + debug + "<br />Version: " + version + "<br />Current time object: " + currentDate + "<br />Current subject object: " + currentSubject + "<br />current notes object: " + notes + "<br />next time object: " + nextDate + "<br />next subject object: " + nextSubject + "<br />current array counter: " + array_counter + "<br />Start Time: " + currentStart + "<br />End Time: " + currentEnd + "<br />" ;
|
||||
|
|
|
|||
|
|
@ -6,36 +6,52 @@ var style = "green"; // reset style
|
|||
var r;
|
||||
aLen = events.length;
|
||||
|
||||
function countdown(targetDate) {
|
||||
function countdown(targetDate, current) {
|
||||
|
||||
countDownDate = new Date(targetDate).getTime();
|
||||
now = new Date().getTime();
|
||||
distance = countDownDate - now;
|
||||
|
||||
if (current === "current") {
|
||||
var nextCountDownDate = new Date(nextDate).getTime();
|
||||
var nextDistance = nextCountDownDate - now;
|
||||
var nextDays = Math.floor(nextDistance / (1000 * 60 * 60 * 24));
|
||||
var nextHours = Math.floor((nextDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
var nextMinutes = Math.floor((nextDistance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
var nextSeconds = Math.floor((nextDistance % (1000 * 60)) / 1000);
|
||||
}
|
||||
|
||||
days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
|
||||
// Day or Days?
|
||||
if (days > 0) {
|
||||
if (days == 1){
|
||||
days = (days + ' Day ');
|
||||
if (days === 1){
|
||||
rDays = (days + ' Day ');
|
||||
} else {
|
||||
days = (days + ' Days ');
|
||||
rDays = (days + ' Days ');
|
||||
}
|
||||
} else {
|
||||
days = '';
|
||||
rDays = '';
|
||||
}
|
||||
|
||||
// set style for countdown based on remaining time
|
||||
style = "green"; // reset style
|
||||
|
||||
if (current === "current") {
|
||||
if (nextDays < 1 && nextHours < 1) {
|
||||
if (nextMinutes < 0) {
|
||||
style = 'over';
|
||||
} else if (nextMinutes < 15) {
|
||||
style = 'warn';
|
||||
} else {
|
||||
style = 'green';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (days < 1 && hours < 1) {
|
||||
//console.log(`in days and hours if statment`)
|
||||
//console.log(`days = ${days} , hours = ${hours} , minutes = ${minutes}`)
|
||||
if (minutes < 0) {
|
||||
style = 'over';
|
||||
} else if (minutes < 15) {
|
||||
|
|
@ -44,13 +60,13 @@ function countdown(targetDate) {
|
|||
style = 'green';
|
||||
}
|
||||
}
|
||||
|
||||
//console.log(`Style = ${style}`)
|
||||
}
|
||||
|
||||
// pad single digits with a '0' prefix
|
||||
// when time is out, start counting up by inverting
|
||||
if (hours < 0) {
|
||||
hours = (-hours);
|
||||
hours--;
|
||||
}
|
||||
if (hours < 10 && hours >= 0) {
|
||||
hours = ('0' + hours);
|
||||
|
|
@ -58,6 +74,7 @@ function countdown(targetDate) {
|
|||
|
||||
if (minutes < 0) {
|
||||
minutes = (-minutes);
|
||||
minutes--;
|
||||
}
|
||||
if (minutes < 10 && minutes >= 0) {
|
||||
minutes = ('0' + minutes);
|
||||
|
|
@ -65,13 +82,20 @@ function countdown(targetDate) {
|
|||
|
||||
if (seconds < 0) {
|
||||
seconds = (-seconds);
|
||||
seconds--;
|
||||
}
|
||||
if (seconds < 10 && seconds >= 0) {
|
||||
seconds = ('0' + seconds);
|
||||
}
|
||||
|
||||
var r = "<div class=" + style + ">" + days + hours + ":" + minutes + ":" + seconds + "</div>";
|
||||
if (initialized === false && distance < 0) {
|
||||
incArray();
|
||||
} else if (initialized === false) {
|
||||
initialized = true;
|
||||
decArray();
|
||||
}
|
||||
|
||||
var r = "<div class=" + style + ">" + rDays + hours + ":" + minutes + ":" + seconds + "</div>";
|
||||
return r;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue