Move toolbar and authentication status to partial and include on each…

… page (nightscout#5393) * Move authentication status to partial and include on each page * Move toolbar to partial Co-authored-by: Sulka Haro <[email protected]>
dlvoy · dlvoy · Jan 27, 2020 · Mar 6, 2018 · Nov 7, 2019 · Dec 7, 2019
commit ddbda15c0a25d8149fa60b76c8e3cbaa4ef7c22c
diff --git a/app.js b/app.js
@@ -131,36 +131,53 @@ function create (env, ctx) {
     }
   }));
 
-  const clockviews = require('./lib/server/clocks.js')(env, ctx);
-  clockviews.setLocals(app.locals);
-
-  app.use("/clock", clockviews);
-
-  app.get("/", (req, res) => {
-    res.render("index.html", {
-      locals: app.locals
-    });
-  });
-
   var appPages = {
-    "/clock-color.html": "clock-color.html"
-    , "/admin": "adminindex.html"
-    , "/profile": "profileindex.html"
-    , "/food": "foodindex.html"
-    , "/bgclock.html": "bgclock.html"
-    , "/report": "reportindex.html"
-    , "/translations": "translationsindex.html"
-    , "/clock.html": "clock.html"
+    "/": {
+      file: "index.html"
+      , type: "index"
+    }
+    , "/admin": {
+      file: "adminindex.html"
+      , title: 'Admin Tools'
+      , type: 'admin'
+    }
+    , "/food": {
+      file: "foodindex.html"
+      , title: 'Food Editor'
+      , type: 'food'
+    }
+    , "/profile": {
+      file: "profileindex.html"
+      , title: 'Profile Editor'
+      , type: 'profile'
+    }
+    , "/report": {
+      file: "reportindex.html"
+      , title: 'Nightscout reporting'
+      , type: 'report'
+    }
+    , "/translations": {
+      file: "translationsindex.html"
+      , title: 'Nightscout translations'
+      , type: 'translations'
+    }
   };
 
   Object.keys(appPages).forEach(function(page) {
     app.get(page, (req, res) => {
-      res.render(appPages[page], {
-        locals: app.locals
+      res.render(appPages[page].file, {
+        locals: app.locals,
+        title: appPages[page].title ? appPages[page].title : '',
+        type: appPages[page].type ? appPages[page].type : '',
       });
     });
   });
 
+  const clockviews = require('./lib/server/clocks.js')(env, ctx);
+  clockviews.setLocals(app.locals);
+
+  app.use("/clock", clockviews);
+
   app.get("/appcache/*", (req, res) => {
     res.render("nightscout.appcache", {
       locals: app.locals

diff --git a/static/css/drawer.css b/static/css/drawer.css
@@ -207,34 +207,49 @@ h1, legend,
 }
 
 #toolbar {
-  background: url(/images/logo2.png) no-repeat 3px 3px #333;
-  border-bottom: 1px solid #999;
-  top: 0;
-  margin: 0;
-  height: 44px;
   text-shadow: 0 0 5px black;
+  display: flex;
+  height: 44px;
+  margin: 0 0 10px;
+  padding: 0 15px 0 40px;
+  position: relative;
+  align-items: center;
+  background: url(/images/logo2.png) no-repeat 3px center #333;
+  border-bottom: 1px solid #999;
+  justify-content: space-between;
 }
 
 #toolbar .customTitle {
   color: #ccc;
   font-size: 16px;
-  margin-top: 0;
-  margin-left: 42px;
-  padding-top: 10px;
-  padding-right: 150px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+#toolbar .button-close {
+  color: #404040;
+  text-align: center;
+  text-shadow: none;
+  height: 20px;
+  width: 20px;
+  padding: 5px;
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  background: grey;
+  border: 2px solid #404040;
+  border-radius: 5px;
+}
+
+#toolbar .button-close + #buttonbar {
+  margin-right: 40px;
+}
+
 #buttonbar {
-  margin-right: 50px;
-  padding-right: 15px;
-  height: 44px;
   opacity: 0.75;
   vertical-align: middle;
-  position: absolute;
-  right: 0;
-  z-index: 500;
 }
 
 #buttonbar a,
@@ -244,14 +259,17 @@ h1, legend,
   height: 44px;
   line-height: 44px;
 }
+
 #buttonbar .selected {
   color: red;
 }
+
 #buttonbar a {
   float: left;
   text-decoration: none;
   width: 34px;
 }
+
 #buttonbar i {
   padding-left: 12px;
 }

diff --git a/static/css/main.css b/static/css/main.css
@@ -427,12 +427,30 @@ a, a:visited, a:link {
   display: none;
 }
 
-#authorizationstatus a {
+.toolbar-title {
+  text-align: left;
+  padding: 0 10px;
+}
+
+.toolbar-title h2 {
+  margin: 0;
+}
+
+.page-content {
+  padding: 10px;
+}
+
+.authentication-status {
+  padding: 10px;
+  border-top: 1px solid #bdbdbd;
+}
+
+.authentication-status a {
   color: #2196f3;
   text-decoration: underline;
 }
 
-#authorizationstatus .small {
+.authentication-status .small {
   font-size: 12px;
 }
 

diff --git a/static/css/report.css b/static/css/report.css
@@ -14,32 +14,6 @@ body {
   color: black;
 }
 
-header {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 10px;
-}
-
-.close {
-  color: #000; 
-  display: block;
-  position: absolute; 
-  background: #fff; 
-  border-radius: 5px; 
-  border: 1px solid #000; 
-  padding: 5px 10px; 
-  text-decoration: none;
-  top: 10px; 
-  right: 10px; 
-}
-
-.pagetitle {
-  font-weight: bold;
-  font-size: 14pt;
-  text-transform: uppercase;
-}
-
 .centeraligned {
   text-align:center;
 }

diff --git a/static/css/translations.css b/static/css/translations.css
@@ -1,5 +1,16 @@
-td,th {
+body {
+  color: black;
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+  background-color: white;
+}
+
+th,
+td {
   vertical-align: top;
   text-align: left;
   border: 1px solid
 }
+
+#translations {
+  padding: 15px;
+}
diff --git a/views/adminindex.html b/views/adminindex.html
@@ -32,23 +32,12 @@
       <link rel="preload" href="/css/ui-darkness/jquery-ui.min.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
       <% include preloadCSS %>
     </head>
-    <body>
-
-        <a href="/"><div style="position: absolute; top: 10px; color: #404040; right: 10px; background: grey; border-radius: 5px; border: 2px solid #404040; padding: 5px; width: 20px; height: 20px; ">X</div></a>
-
-    <div id="toolbar">
-      <h1 class="customTitle">Nightscout</h1>
-    </div>
-
-    <div id="admin-tools">
-      <h1 class="translate">Admin Tools</h1>
-    </div>
+  <body>
+    <%- include('partials/toolbar') %>
 
     <div id="admin_placeholder"></div>
-
-    <hr>
-    <b><span class="translate">Authentication status</span>: </b>
-    <span id="authentication_placeholder"></span>
+
+    <%- include('partials/authentication-status') %>
 
     <script src="<%= locals.bundle %>/js/bundle.app.js?v=<%= locals.cachebuster %>"></script>
     <script src="/socket.io/socket.io.js?v=<%= locals.cachebuster %>"></script>

diff --git a/views/foodindex.html b/views/foodindex.html
@@ -32,22 +32,9 @@
       <% include preloadCSS %>
 
     </head>
-    <body>
+  <body>
+    <%- include('partials/toolbar') %>
 
-        <a href="/"><div style="z-index: 1000; position: absolute; top: 10px; color: #404040; right: 10px; background: grey; border-radius: 5px; border: 2px solid #404040; padding: 5px; width: 20px; height: 20px; ">X</div></a>
-
-
-      <div id="toolbar">
-        <div id="buttonbar">
-        <b> <span  class="translate">Status</span>:</b> <span id="fe_status" class="translate">Not loaded</span>
-        </div>
-        <h1 class="customTitle">Nightscout</h1>
-        <div id="food-editor">
-          <h1 class="translate">Food Editor</h1>
-        </div>
-      </div>
-
-    <br>
     <div id="fe_form">
       <fieldset class="browserSettings">
         <legend class="translate">Your database</legend>
@@ -121,10 +108,10 @@ <h1 class="translate">Food Editor</h1>
         </legend>
         <div id="fe_picklist"></div>
       </fieldset>
-      <b><span class="translate">Authentication status</span>: </b>
-      <span id="authentication_placeholder"></span>
     </div>
-
+
+    <%- include('partials/authentication-status') %>
+
     <script src="<%= locals.bundle %>/js/bundle.app.js?v=<%= locals.cachebuster %>"></script>
     <script src="/socket.io/socket.io.js?v=<%= locals.cachebuster %>"></script>
     <script src="/food/js/food.js?v=<%= locals.cachebuster %>"></script>

diff --git a/views/index.html b/views/index.html
@@ -117,17 +117,8 @@
     		</div>
     	</div>
         <div class="container loading" id="container">
-            <div id="toolbar">
-                <div id="buttonbar" style="margin-right: 0px;" role="navigation" aria-label="Menu" >
-                    <a id="editbutton" class="tip" original-title="Edit Mode" aria-label="Edit Mode" href="#" style="display:none;"><i class="icon-edit"></i></a>
-                    <a id="testAlarms" class="tip" original-title="Alarm Test / Smartphone Enable" aria-label="Alarm Test / Smartphone Enable" href="#"><i class="icon-volume"></i></a>
-                    <a id="drawerToggle" class="tip" original-title="Settings" aria-label="Settings" href="#"><i class="icon-menu"></i></a>
-                    <a id="lockedToggle" class="tip" original-title="Token needed for Care Portal" aria-label="Token needed for Care Portal" href="#" style="display:none;"><i class="icon-lock"></i></a>
-                    <a id="treatmentDrawerToggle" class="tip" original-title="Care Portal" aria-label="Care Portal" href="#" style="display:none;"><i class="icon-plus"></i></a>
-                    <a id="boluscalcDrawerToggle" class="tip" original-title="Bolus Wizard" aria-label="Bolus Wizard" href="#" style="display:none;"><i class="icon-calc"></i></a>
-                </div>
-                <div class="customTitle">Nightscout</div>
-            </div>
+          <%- include('partials/toolbar') %>
+
             <div id="notification" role="region" aria-label="Notification">
                 <a href="#"  aria-label="cancel" ><span></span><i class="icon-cancel-circled"></i></a>
             </div>
@@ -277,8 +268,7 @@
                   <a id="useDefaults" class="pull-right translate" href="">Reset, and use defaults</a>
                 </div>
 
-                <hr>
-                <span id="authentication_placeholder"></span>
+                <%- include('partials/authentication-status') %>
 
                 <fieldset id="about">
                     <legend class="translate">About</legend>

diff --git a/views/partials/authentication-status.ejs b/views/partials/authentication-status.ejs
@@ -0,0 +1,3 @@
+<div class="authentication-status">
+    <strong><span class="translate">Authentication status</span>: </strong><span id="authentication_placeholder"></span>
+</div>
diff --git a/views/partials/toolbar.ejs b/views/partials/toolbar.ejs
@@ -0,0 +1,34 @@
+<div id="toolbar">
+    <h1 class="customTitle">Nightscout</h1>
+
+    <%if (type !== 'index') { %>
+        <a href="/" class="closeButton button-close"><span>X</span></a>
+    <% } %>
+
+    <%if (type === 'food') { %>
+      <div id="buttonbar">
+        <b> <span class="translate">Status</span>:</b> <span id="fe_status" class="translate">Not loaded</span>
+      </div>
+    <% } %>
+    <%if (type === 'profile') { %>
+      <div id="buttonbar">
+        <b> <span class="translate">Status</span>:</b> <span class="pe_status translate">Not loaded</span>
+      </div>
+    <% } %>
+    <%if (type === 'index') { %>
+        <div id="buttonbar" role="navigation" aria-label="Menu" >
+            <a id="editbutton" class="tip" original-title="Edit Mode" aria-label="Edit Mode" href="#" style="display:none;"><i class="icon-edit"></i></a>
+            <a id="testAlarms" class="tip" original-title="Alarm Test / Smartphone Enable" aria-label="Alarm Test / Smartphone Enable" href="#"><i class="icon-volume"></i></a>
+            <a id="drawerToggle" class="tip" original-title="Settings" aria-label="Settings" href="#"><i class="icon-menu"></i></a>
+            <a id="lockedToggle" class="tip" original-title="Token needed for Care Portal" aria-label="Token needed for Care Portal" href="#" style="display:none;"><i class="icon-lock"></i></a>
+            <a id="treatmentDrawerToggle" class="tip" original-title="Care Portal" aria-label="Care Portal" href="#" style="display:none;"><i class="icon-plus"></i></a>
+            <a id="boluscalcDrawerToggle" class="tip" original-title="Bolus Wizard" aria-label="Bolus Wizard" href="#" style="display:none;"><i class="icon-calc"></i></a>
+        </div>
+    <% } %>
+</div>
+
+<%if (title) { %>
+    <div class="toolbar-title">
+        <h2 class="translate"><%= title %></h1>
+    </div>
+<% } %>