Added Clock to menu bar

Eruyome · Aug 22, 2016 · 29bffc6 · 29bffc6
1 parent c94e78c
commit 29bffc6
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 13 deletions.
diff --git a/dist/assets/css/app.css b/dist/assets/css/app.css
@@ -5945,13 +5945,13 @@ body {
 
 .menu-bar .disclaimerTitle {
   position: absolute;
-  top: 0px;
-  right: 0px; }
+  right: 63px;
+  top: 0; }
 
 .menu-bar .scheduleTitle {
   position: absolute;
   top: 8px;
-  right: 75px; }
+  right: 128px; }
   .menu-bar .scheduleTitle a.schedule {
     display: inline-block;
     background: url("../img/calendar-small.png") no-repeat center center;
@@ -5968,7 +5968,7 @@ body {
 
 .menu-bar .optionsTitle {
   position: absolute;
-  right: 130px;
+  right: 181px;
   top: 11px; }
   .menu-bar .optionsTitle img, .menu-bar .optionsTitle a {
     margin: 0;
@@ -5990,6 +5990,13 @@ body {
   .menu-bar .openModal:hover {
     background: transparent !important; }
 
+.menu-bar .clock {
+  position: absolute;
+  right: 0;
+  top: 0; }
+  .menu-bar .clock a {
+    cursor: default !important; }
+
 .grid-container {
   max-width: 93rem;
   padding: 1rem; }
@@ -6384,3 +6391,6 @@ body {
   .footer a {
     padding: 1rem;
     font-size: 0.75rem; }
+
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important; }
diff --git a/dist/assets/js/app.js b/dist/assets/js/app.js
@@ -10698,6 +10698,30 @@ return jQuery;
 		updateStreamInfo();
 		$interval(function() {updateStreamInfo();}, $scope.intervals.viewCount);
 
+		// Create and update Clock
+		function getTimeFromDate(date) {
+			function pad(n){return n<10 ? '0'+n : n;}
+			var newDate = new Date();
+			var h = pad(newDate.getHours());
+			var m = pad(newDate.getMinutes());
+			var time = h + ':' + m;
+
+			return time;
+		}
+
+		$scope.clock = {
+			clock : getTimeFromDate(new Date())
+		};
+		var updateClock = function () {
+			$scope.clock.now = getTimeFromDate(new Date());
+		};
+
+		setInterval(function () {
+			$scope.$apply(updateClock);
+		}, 1000);
+
+		updateClock();
+
 		/* Gets called to get video list data in intervals */
 		function reloadVListData() {
 			$scope.getData("vList");

diff --git a/dist/index.html b/dist/index.html
@@ -10,7 +10,7 @@
 			  type="image/png"
 			  href="./assets/img/favicon.ico">
 	</head>
-	<body zf-close-all>
+	<body zf-esc-close zf-close-all>
 		<div class="grid-frame vertical"  ng-controller="mainController">
 			<div class="grid-content shrink" style="padding: 0;">
 				<ul class="primary condense menu-bar">
@@ -45,6 +45,9 @@
 							Forum
 						</a>
 					</li>
+					<li class="clock">
+						<a ng-cloak title="Clock">{{clock.now}}</a>
+					</li>
 
 					<li class="optionsTitle" >
 						<a zf-open="optionsModal" class="button openModal"></a>

diff --git a/src/assets/js/app.js b/src/assets/js/app.js
@@ -546,6 +546,30 @@
 		updateStreamInfo();
 		$interval(function() {updateStreamInfo();}, $scope.intervals.viewCount);
 
+		// Create and update Clock
+		function getTimeFromDate(date) {
+			function pad(n){return n<10 ? '0'+n : n;}
+			var newDate = new Date();
+			var h = pad(newDate.getHours());
+			var m = pad(newDate.getMinutes());
+			var time = h + ':' + m;
+
+			return time;
+		}
+
+		$scope.clock = {
+			clock : getTimeFromDate(new Date())
+		};
+		var updateClock = function () {
+			$scope.clock.now = getTimeFromDate(new Date());
+		};
+
+		setInterval(function () {
+			$scope.$apply(updateClock);
+		}, 1000);
+
+		updateClock();
+
 		/* Gets called to get video list data in intervals */
 		function reloadVListData() {
 			$scope.getData("vList");

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
@@ -78,17 +78,15 @@ body {
 		}
 	}
 
-	.disclaimer {
-	}
 	.disclaimerTitle {
 		position: absolute;
-		top: 0px;
-		right: 0px;
+		right: 63px;
+		top: 0;
 	}
 	.scheduleTitle {
 		position: absolute;
 		top: 8px;
-		right: 75px;
+		right: 128px;
 		a.schedule {
 			display: inline-block;
 			background: url('../img/calendar-small.png') no-repeat center center;
@@ -108,7 +106,7 @@ body {
 	}
 	.optionsTitle {
 		position: absolute;
-		right: 130px;
+		right: 181px;
 		top: 11px;
 		img, a {
 			margin: 0;
@@ -133,6 +131,15 @@ body {
 			background: transparent !important;
 		}
 	}
+	.clock {
+		position: absolute;
+		right: 0;
+		top: 0;
+		a {
+			cursor: default !important;
+		}
+
+	}
 }
 
 .grid-container {
@@ -659,4 +666,8 @@ body {
 		padding: 1rem;
 		font-size: rem-calc(12px);
 	}
-}
+}
+
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+	display: none !important;
+}
diff --git a/src/index.html b/src/index.html
@@ -10,7 +10,7 @@
 			  type="image/png"
 			  href="./assets/img/favicon.ico">
 	</head>
-	<body zf-close-all>
+	<body zf-esc-close zf-close-all>
 		<div class="grid-frame vertical"  ng-controller="mainController">
 			<div class="grid-content shrink" style="padding: 0;">
 				<ul class="primary condense menu-bar">
@@ -45,6 +45,9 @@
 							Forum
 						</a>
 					</li>
+					<li class="clock">
+						<a ng-cloak title="Clock">{{clock.now}}</a>
+					</li>
 
 					<li class="optionsTitle" >
 						<a zf-open="optionsModal" class="button openModal"></a>