From ec9d5cbd5738036cf86228f58eea67e2bb9ae7c9 Mon Sep 17 00:00:00 2001
From: michael-grace <michael.dp.grace@outlook.com>
Date: Thu, 13 May 2021 02:01:59 +0100
Subject: [PATCH] Make Stuff Bigger

---
 src/index.html            | 11 +++++++++--
 src/scripts/timelord.js   | 31 ++++++++++++++++++++++++++++---
 src/stylesheets/main.scss | 36 ++++++++++++++++++++++++++++++++++--
 3 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/src/index.html b/src/index.html
index 5263203..af1e685 100644
--- a/src/index.html
+++ b/src/index.html
@@ -46,11 +46,17 @@
 		<div id="breaking-news" class="hidden">
 			<div class="content">!! BREAKING NEWS !!</div>
 		</div>
+		<div id="news-counts" class="hidden">
+			<div class="content">
+				<div class="content-sm">!! COUNTDOWNS !!</div>
+				<div class="content-lg"> ## </div>
+			</div>
+		</div>
 		<footer class="footer">
 			<div class="container-fluid">
 				<div class="row" id="status">
-					
-					
+
+
 				</div>
 				<div class="row" id="alerts">
 					<div class="col-xs-2" id="s1">Studio Red</div>
@@ -74,4 +80,5 @@
 	<script src="scripts/main.min.js"></script>
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/src/scripts/timelord.js b/src/scripts/timelord.js
index d29277b..b107534 100644
--- a/src/scripts/timelord.js
+++ b/src/scripts/timelord.js
@@ -71,21 +71,25 @@ window.Timelord = {
 		if (Timelord.news) {
 			if (minute == 59) {
 				if (second < 45) {
-					Timelord.setCurrentShowName("News intro in " + (45 - second) + "...", 'news');
+					Timelord.setNewsCountdown("NEWS INTRO", (45 - second));
 				} else if (second <= 52) {
-					Timelord.setCurrentShowName((52 - second) + " until voice over...", 'news');
+					Timelord.setNewsCountdown("VOICE OVER", (52-second));
 				} else {
+					Timelord.setNewsCountdown(false, 0);
 					Timelord.setCurrentShowName(Timelord._config.short_name + ' News', 'news');
 				}
 			} else if (minute === 0) {
+				Timelord.setNewsCountdown(false, 0);
 				Timelord.setCurrentShowName(Timelord._config.short_name + ' News', 'news');
 			} else {
-				Timelord.setCurrentShowName('News ends in ' + (60 - second) + '...', 'news');
+				Timelord.setNewsCountdown("NEWS END", (60 - second));
+				Timelord.setCurrentShowName(Timelord._config.short_name + ' News', 'news');
 			}
 		}else if((t.hours() == 13) && (t.minutes() == 50)){
 			Timelord.setCurrentShowName("Merry 1350!", "news");
 		}else{
 			// Once news finishes, update show title to replace it.
+			Timelord.setNewsCountdown(false, 0);
 			Timelord.setCurrentShowName(Timelord.current_show_name);
 		}
 	},
@@ -314,6 +318,27 @@ window.Timelord = {
 
 	},
 
+	/**
+	 * Sets the news coutdown
+	 *
+	 * @param {String|null|false} comment
+	 * @param {int} count
+	 */
+	 setNewsCountdown: function (comment, count) {
+		
+			if (comment !== null && comment !== false) {
+				Timelord._$('#news-counts').removeClass('hidden')
+				Timelord._$("#news-counts .content .content-sm").text(comment);
+				Timelord._$("#news-counts .content .content-lg").text(count);
+				Timelord._$('.hide-when-breaking-news').addClass('hidden');
+			} else {
+				Timelord._$('#news-counts').addClass('hidden');
+				Timelord._$('.hide-when-breaking-news').removeClass('hidden');
+			}
+		
+
+	},
+
 	/**
 	 * Sets the Obit alert
 	 *
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index 0dc333f..6469c09 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -7,7 +7,7 @@ $footer_height: 130px;
 $footer-mobile-height: 35px;
 $footer-mobile-breakpoint: 500px;
 
-$widescreen-breakpoint: 1600px;
+$widescreen-breakpoint: 1000px;
 
 html {
   position: relative;
@@ -61,6 +61,23 @@ footer.sticky {
   margin-bottom: -0.35em;
 }
 
+#news-counts {
+  border: 3px solid #2CDFFF;
+}
+
+#news-counts .content {
+  font-weight: bold;
+  color: #2CDFFF;
+}
+
+#news-counts .content .content-sm {
+  font-size: 10em;
+}
+
+#news-counts .content .content-lg {
+  font-size: 30em;
+}
+
 .up-next {
   font-size: 2.8em;
   font-variant: small-caps;
@@ -211,7 +228,7 @@ footer.sticky {
   #time {
     grid-area: time;
 
-    font-size: 12em;
+    font-size: 20em;
     line-height: 1em;
 
     // At small sizes just make the font size
@@ -291,4 +308,19 @@ footer.sticky {
     }
   }
 
+  #news-counts {
+    grid-area: breaking-news;
+    height: 100%;
+    width: 30vw;
+   
+    @media (max-width: $widescreen-breakpoint) {
+      height: 40vh;
+      width: 100%;
+    }
+    
+    .content {
+      display: initial;
+    }
+  }
+
 }