new pill display for BG delta and IOB

tynbendad · Mar 6, 2015 · aa9233b · aa9233b
1 parent 0aea8a7
commit aa9233b
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 24 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -68,21 +68,50 @@ body {
 
 .bgStatus .currentDetails {
     font-size: 25%;
-    text-decoration: line-through;
-    display: block;
-    position: relative;    
-    top: -20px;
+    position: relative;
+    top: -10px;
 }
-.bgStatus.current .currentBG {
-    text-decoration: none;
+
+.currentDetails > span {
+    border-radius: 5px;
+    border: 2px solid #808080;
+    font-size: 80%;
+    display: inline-block;
 }
-.bgStatus.current .currentDetails {
-    font-size: 25%;
+
+#bgButton .currentDetails > span {
+    border-color: #000;
+}
+
+.currentDetails > span:not(:first-child) {
+    margin-left: 5px;
+}
+
+.currentDetails > span * {
+    padding-left: 2px;
+    padding-right: 2px;
+    padding-bottom: 1px;
+}
+
+.currentDetails > span em {
+    font-style: normal;
+    font-weight: bold;
+}
+
+.currentDetails > span label {
+    color: #000;
+    background: #808080;
+}
+
+#bgButton .currentDetails > span label {
+    color: #808080;
+    background: inherit;
+}
+
+.bgStatus.current .currentBG {
     text-decoration: none;
-    display: block;
-    position: relative;    
-    top: -10px;
 }
+
 .currentDirection {
     font-weight: normal;
     text-decoration: none;
@@ -101,7 +130,7 @@ body {
     font-size: 25%;
 }
 #lastEntry {
-    background: #999;
+    background: #808080;
     border-radius: 5px;
     color: #000;
     padding: 0.25em;
@@ -261,6 +290,11 @@ div.tooltip {
   #currentTime {
     font-size: 85%;
   }
+
+  .bgStatus .currentDetails {
+    top: 0px;
+  }
+
 }
 
 @media (max-width: 750px) {

diff --git a/static/index.html b/static/index.html
@@ -30,13 +30,13 @@ <h1 class="customTitle">Nightscout</h1>
                     <div id="noButton">
                         <span class="currentBG">---</span>
                         <span class="currentDirection">-</span>
-                        <span class="currentDetails">--</span>
+                        <div class="currentDetails">--</div>
 
                     </div>
                     <div id="bgButton" hidden="true">
                         <span class="currentBG">---</span>
                         <span class="currentDirection">-</span>
-                        <span class="currentDetails">--</span>
+                        <div class="currentDetails">--</div>
                     </div>
                     <ul class="dropdown-menu" id="silenceBtn">
                         <li><a href="#" data-snooze-time="1800000">Silence for 30 minutes</a></li>

diff --git a/static/js/client.js b/static/js/client.js
@@ -335,21 +335,29 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
                     bgDeltaString = '+' + bgDelta;
                 }
 
+                bgDeltaString = '<span><em>' + bgDeltaString + '</em><label>';
+
                 if (browserSettings.units == 'mmol') {
-                    bgDeltaString = bgDeltaString + ' mmol/L'
+                    bgDeltaString = bgDeltaString + ' mmol/L';
                 } else {
-                    bgDeltaString = bgDeltaString + ' mg/dL'
+                    bgDeltaString = bgDeltaString + ' mg/dL';
                 }
             }
 
+            bgDeltaString += '</label></span>';
+
             return bgDeltaString;
         }
 
+        function buildIOBIndicator(time) {
+            var iob = Nightscout.iob.calcTotal(treatments, profile, time);
+            return '<span><label>IOB</label><em>' + iob.display + '</em></span>';
+        }
+
         var color = inRetroMode() ? 'grey' : sgvToColor(latestSGV.y);
 
         $('.container #noButton .currentBG').css({color: color});
         $('.container #noButton .currentDirection').css({color: color});
-        $('.container #noButton .currentDetails').css({color: color});
 
         // predict for retrospective data
         // by changing lookback from 1 to 2, we modify the AR algorithm to determine its initial slope from 10m
@@ -388,15 +396,14 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
                 var details = calcBGDelta(prevfocusPoint.y, focusPoint.y);
 
                 if (showIOB()) {
-                    var iob = Nightscout.iob.calcTotal(treatments, profile, time);
-                    details += ", IOB: " + iob.display;
+                    details += buildIOBIndicator(time);
                 }
 
                 currentBG.css('text-decoration','line-through');
                 currentDirection.html(focusPoint.y < 39 ? '✖' : focusPoint.direction);
-                currentDetails.text(details).css('text-decoration','line-through');
+                currentDetails.html(details);
             } else {
-                currentBG.text('---').css('text-decoration','');
+                currentBG.text('---');
                 currentDirection.text('-');
                 currentDetails.text('');
             }
@@ -418,13 +425,12 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
             var details = calcBGDelta(prevSGV.y, latestSGV.y);
 
             if (showIOB()) {
-                var iob = Nightscout.iob.calcTotal(treatments, profile, nowDate);
-                details += ", IOB: " + iob.display;
+                details += buildIOBIndicator(nowDate);
             }
 
             currentBG.css('text-decoration', '');
             currentDirection.html(latestSGV.y < 39 ? '✖' : latestSGV.direction);
-            currentDetails.text(details).css('text-decoration','');
+            currentDetails.html(details);
         }
 
         xScale.domain(brush.extent());