Clock cleanup

README.md

@@ -311,7 +311,6 @@ To learn more about the Nightscout API, visit https://YOUR-SITE.com/api-docs/ or
   * `Clock` - Shows current BG, trend arrow, and time of day. Grey text on a black background.
   * `Color` - Shows current BG and trend arrow. White text on a background that changes color to indicate current BG threshold (green = in range; blue = below range; yellow = above range; red = urgent below/above).
   * `Simple` - Shows current BG. Grey text on a black background.
-  * Optional configuration: set `SHOW_CLOCK_CLOSEBUTTON` to `false` to never show the small X button in clock views. For bookmarking a clock view without the close box but have it appear when navigating to a clock from the Nightscout menu, don't change the settng, but remove the `showClockClosebutton=true` parameter from the clock view URL.
 
 ### Plugins
 

lib/client/clock-client.js

@@ -98,13 +98,6 @@ client.render = function render (xhr) {
   if (m < 10) m = "0" + m;
   $('#clock').text(h + ":" + m);
 
-  var queryDict = {};
-  location.search.substr(1).split("&").forEach(function(item) { queryDict[item.split("=")[0]] = item.split("=")[1] });
-
-  if (!window.serverSettings.settings.showClockClosebutton || !queryDict['showClockClosebutton']) {
-    $('#close').css('display', 'none');
-  }
-
   // defined in the template this is loaded into
   // eslint-disable-next-line no-undef
   if (clockFace === 'clock-color') {
@@ -122,11 +115,6 @@ client.render = function render (xhr) {
     var green = 'rgba(134,207,70,1)';
     var blue = 'rgba(78,143,207,1)';
 
-    var darkRed = 'rgba(183,9,21,1)';
-    var darkYellow = 'rgba(214,168,0,1)';
-    var darkGreen = 'rgba(110,192,70,1)';
-    var darkBlue = 'rgba(78,143,187,1)';
-
     var elapsedMins = Math.round(((now - last) / 1000) / 60);
 
     // Insert the BG stale time text.
@@ -135,28 +123,18 @@ client.render = function render (xhr) {
     // Threshold background coloring.
     if (bgNum < bgLow) {
       $('body').css('background-color', red);
-      $('#close').css('border-color', darkRed);
-      $('#close').css('color', darkRed);
     }
     if ((bgLow <= bgNum) && (bgNum < bgTargetBottom)) {
       $('body').css('background-color', blue);
-      $('#close').css('border-color', darkBlue);
-      $('#close').css('color', darkBlue);
     }
     if ((bgTargetBottom <= bgNum) && (bgNum < bgTargetTop)) {
       $('body').css('background-color', green);
-      $('#close').css('border-color', darkGreen);
-      $('#close').css('color', darkGreen);
     }
     if ((bgTargetTop <= bgNum) && (bgNum < bgHigh)) {
       $('body').css('background-color', yellow);
-      $('#close').css('border-color', darkYellow);
-      $('#close').css('color', darkYellow);
     }
     if (bgNum >= bgHigh) {
       $('body').css('background-color', red);
-      $('#close').css('border-color', darkRed);
-      $('#close').css('color', darkRed);
     }
 
     // Restyle body bg, and make the "x minutes ago" visible too.

lib/settings.js

@@ -47,7 +47,6 @@ function init () {
     , secureHstsHeaderIncludeSubdomains: false
     , secureHstsHeaderPreload: false
     , secureCsp: false
-    , showClockClosebutton: true
     , deNormalizeDates: false
   };
 
@@ -69,7 +68,6 @@ function init () {
     , insecureUseHttp: mapTruthy
     , secureHstsHeader: mapTruthy
     , secureCsp: mapTruthy
-    , showClockClosebutton: mapTruthy
     , deNormalizeDates: mapTruthy
   };
 

views/clockviews/bgclock.css

@@ -1,42 +1,7 @@
-body {
-  text-align: center;
-  margin: 0 0;
-  padding: 0;
-  overflow: hidden;
-  font-family: 'Open Sans';
-  color: grey;
-  background-color: black;
-}
-
-main {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  height: 100vh;
-}
-
 .inner {
-  width: 100%;
   -webkit-transform: translateY(-2%);
 }
 
-#trend {
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  justify-content: center;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-}
-
 #bgnow, #arrowDiv {
   display: flex;
   flex-grow: 0;
@@ -55,25 +20,9 @@ img#arrow {
 #clock {
   font-weight: 700;
   font-size: 25vmin;
+  display: inline;
 }
 
 .stale {
   text-decoration: line-through;
-}
-
-.close {
-  color: white;
-  font: 4em 'Open Sans';
-  position: absolute;
-  right: 20px;
-  text-decoration: none;
-}
-
-.close:after {
-  content: '\00D7';
-}
-
-.hidden {
-  opacity: 0;
-  transition: opacity 0.5s linear;
 }

views/clockviews/clock-color.css

@@ -1,44 +1,9 @@
 body {
-  text-align: center;
-  margin: 0 0;
-  padding: 0;
-  overflow: hidden;
-  font-family: 'Open Sans';
   color: white;
-  background-color: white;
-}
-
-main {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  height: 100vh;
-}
-
-.inner {
-  width: 100%;
-  -webkit-transform: translateY(-5%);
-}
-
-#bgnow {
-  font-weight: 700;
-  font-size: 40vmin;
 }
 
 #trend {
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
   -webkit-transform: translateX(1%);
-  align-items: center;
-  justify-content: center;
   -webkit-flex-direction: column;
   flex-direction: column;
 }
@@ -50,31 +15,4 @@ main {
 
 img#arrow {
   height: 30vmin;
-}
-
-#staleTime {
-  flex-grow: 1;
-  font-size: 6vmin;
-  display: none;
-}
-
-#clock {
-  display: none;
-}
-
-.close {
-  color: white;
-  font: 4em 'Open Sans';
-  position: absolute;
-  right: 20px;
-  text-decoration: none;
-}
-
-.close:after {
-  content: '\00D7';
-}
-
-.hidden {
-  opacity: 0;
-  transition: opacity 0.5s linear;
 }

views/clockviews/clock-shared.css

@@ -0,0 +1,72 @@
+body {
+  text-align: center;
+  margin: 0 0;
+  padding: 0;
+  overflow: hidden;
+  font-family: 'Open Sans';
+  color: grey;
+  background-color: black;
+}
+
+main {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.inner {
+  width: 100%;
+  -webkit-transform: translateY(-5%);
+}
+
+#bgnow {
+  font-weight: 700;
+  font-size: 40vmin;
+}
+
+#trend {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  justify-content: center;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+}
+
+#staleTime {
+  flex-grow: 1;
+  font-size: 6vmin;
+  display: none;
+}
+
+#clock {
+  display: none;
+}
+
+.close {
+  color: white;
+  font: 4em 'Open Sans';
+  position: absolute;
+  top: 0;
+  right: 20px;
+  text-decoration: none;
+  z-index: 10;
+}
+
+.close:after {
+  content: '\00D7';
+}
+
+.hidden {
+  opacity: 0;
+  transition: opacity 0.5s linear;
+}

views/clockviews/clock.css

@@ -1,71 +1,5 @@
-body {
-  text-align: center;
-  margin: 0 0;
-  padding: 0;
-  overflow: hidden;
-  font-family: 'Open Sans';
-  color: grey;
-  background-color: black;
-}
-
-main {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  height: 100vh;
-}
-
-.inner {
-  width: 100%;
-  -webkit-transform: translateY(-5%);
-}
-
-#bgnow {
-  font-weight: 700;
-  font-size: 40vmin;
-}
-
 #trend {
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
   -webkit-transform: translateX(1%);
-  align-items: center;
-  justify-content: center;
   -webkit-flex-direction: column;
   flex-direction: column;
-}
-
-#staleTime {
-  flex-grow: 1;
-  font-size: 6vmin;
-  display: none;
-}
-
-#clock {
-  display: none;
-}
-
-.close {
-  color: white;
-  font: 4em 'Open Sans';
-  position: absolute;
-  right: 20px;
-  text-decoration: none;
-}
-
-.close:after {
-  content: '\00D7';
-}
-
-.hidden {
-  opacity: 0;
-  transition: opacity 0.5s linear;
 }

views/clockviews/shared.html

@@ -20,14 +20,14 @@
 
   <style type="text/css">
     @import url("//fonts.googleapis.com/css?family=Open+Sans:700");
+    <%- include('clock-shared.css', {}); %>
     <%- include(face + '.css', {}); %>
-
   </style>
 </head>
 
 <body>
-  <a href="/" id="closeButton" class="close"></a>
   <main>
+    <a href="/" id="closeButton" class="close"></a>
     <div class="inner">
       <div id="trend">
         <div id="bgnow"></div>