From 23dc58f7661343f10415b94d9e4788f672ec2a9d Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Mon, 9 Mar 2015 01:07:28 -0700 Subject: [PATCH 01/12] no more % based font-sizes; combined #noButton and #bgButton --- static/css/main.css | 305 ++++++++++++++++++++++++++++++---------------------- static/index.html | 10 +- static/js/client.js | 59 ++++++---- 3 files changed, 214 insertions(+), 160 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 020fbd4a7..f8ada971e 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -49,37 +49,43 @@ body { .bgStatus { float: right; - font-size: 750%; - margin-right: 25px; text-align: center; white-space: nowrap; } -.bgStatus .currentBG { - text-decoration: line-through; + +.bgButton.urgent { + color: red; +} + +.bgButton.warning { + color: yellow; +} + +.bgButton.inrange { + color: #4cff00; } -.bgStatus .currentBG.error-code { - font-size: 80%; +.bgStatus .currentBG { + font-size: 120px; + line-height: 120px; + text-decoration: line-through; } -.bgStatus .currentBG.bg-limit { - font-size: 80%; +.bgStatus .currentDirection { + font-weight: normal; + text-decoration: none; + font-size: 90px; + line-height: 90px; + vertical-align: top; } .bgStatus .currentDetails { - font-size: 25%; - position: relative; - top: -10px; + font-size: 20px; } .currentDetails > span { border-radius: 5px; border: 2px solid #bdbdbd; - font-size: 80%; -} - -#bgButton .currentDetails > span { - border-color: #000; } .currentDetails > span:not(:first-child) { @@ -103,24 +109,12 @@ body { background: #bdbdbd; } -#bgButton .currentDetails > span label { - color: #bdbdbd; - background: inherit; -} - .bgStatus.current .currentBG { text-decoration: none; } -.currentDirection { - font-weight: normal; - text-decoration: none; - font-size: 90%; - vertical-align: top; -} - .time { - font-size: 600%; + font-size: 90px; padding-top: 15px; } .timebox { @@ -128,7 +122,7 @@ body { width: 250px; } .timeOther { - font-size: 25%; + font-size: 20px; } #lastEntry { background: #808080; @@ -180,49 +174,39 @@ body { } -#noButton { - padding: 2px; -} - -#bgButton, #silenceBtn { z-index: 99; } -#bgButton { - background: yellow; - border: 2px solid #DDD; - border-right: 2px solid #ccc; - border-bottom: 2px solid #ccc; - border-radius: 5px; - box-shadow: 2px 4px 6px #ddd; - color: #000000; - cursor: default; - font-size: 75%; - margin-top: 15px; - width: auto; +#silenceBtn * { + font-size: 40px +} - user-select: none; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -moz-box-shadow: 2px 2px 4px #ddd; - -webkit-box-shadow: 2px 2px 4px #ddd; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; +.bgButton { + margin: 10px; + border: 2px solid #000; + border-radius: 5px; + width: 320px; } -#bgButton.urgent { - background: red; +.alarming .bgButton { + border-color: #bdbdbd; + color: #000; + box-shadow: 2px 4px 6px #ddd; +} + +.alarming .bgButton.urgent { + background-color: red; +} + +.alarming .bgButton.warning { + background-color: yellow; } .bgButton:active { - background: #850406; - border: 2px solid #999; + border: 2px solid #808080; box-shadow: none; - + background-color: #222; -moz-box-shadow: none; -webkit-box-shadow: none; } @@ -246,18 +230,10 @@ div.tooltip { pointer-events: none; } -#silenceBtn, #silenceBtn * { - font-size: 70%; -} - .alarms { display: none; } -#testAlarms { - font-size: 20%; -} - #currentTime{ padding: 0 0 10px 0; } @@ -276,50 +252,78 @@ div.tooltip { } @media (max-width: 800px) { - #chartContainer { - font-size: 80%; - } + .bgStatus { + width: 40%; + } + + .bgButton { + width: auto; + } + + .bgStatus .currentBG { + font-size: 80px; + line-height: 80px; + } + + .bgStatus .currentDirection { + font-size: 70px; + line-height: 70px; + } + + .time { + font-size: 70px; + } - .bgStatus { - width: 50%; - font-size: 650%; - } + .timeOther { + font-size: 15px; + } - .dropdown-menu { - font-size: 60% !important; - } - #currentTime { - font-size: 85%; - } + #silenceBtn * { + font-size: 30px; + } + + #chartContainer { + top: 185px; + font-size: 20px; + } + #chartContainer svg { + height: calc(100vh - 185px); + } } @media (max-width: 750px) { - .dropdown-menu { - font-size: 60% !important; - } + .bgStatus .currentBG { + font-size: 70px; + line-height: 70px; + } - .container .status { - font-size: 70%; - } + .bgStatus .currentDirection { + font-size: 60px; + line-height: 60px; + } - .bgStatus .currentDetails { - top: 0; - } + .bgStatus .currentDetails { + font-size: 15px; + } - #chartContainer { - top: 165px; - font-size: 80%; - } - #chartContainer svg { - height: calc(100vh - 165px); - } + .time { + font-size: 50px; + } + + #chartContainer { + top: 165px; + font-size: 15px; + } + #chartContainer svg { + height: calc(100vh - 165px); + } } @media (max-width: 400px) { body { - font-size: 70%; + font-size: 70px; } .status { @@ -328,40 +332,40 @@ div.tooltip { height: 152px; } - /* Unremark to test alert/silence button + menu. */ - /* #noButton {display:none;} - #bgButton {display:block;} */ - .bgStatus { - font-size: 750%; float: none; margin: 0 auto; padding: 0; - text-align: center; width: 100vw; } - .bgStatus .currentDetails { - top: -10px; + .bgButton { + margin: 5px; + width: auto; } - #bgButton { - font-size: 100%; + .bgStatus .currentBG { + font-size: 70px; + line-height: 70px; } + + .bgStatus .currentDirection { + font-size: 60px; + line-height: 60px; + } + + .bgStatus .currentDetails { + font-size: 15px; + } + .dropdown-menu { - font-size: 60% !important; + font-size: 50px !important; margin-left: 2vw; width: 96vw; } - .container .status { - font-size: 100% !important; - } .time { - margin-bottom: 0.1em; - margin-top: -1em; - margin-left: 0; - width: 100%; + font-size: 20px !important; } #container.alarming .time { @@ -369,21 +373,22 @@ div.tooltip { } .timebox { - text-align: none; width: auto; } + #currentTime { display: inline; - font-size: 25% !important; - font-weight: bold; + vertical-align: middle; } + .timeOther { display: inline; margin-left: auto; + font-size: 15px; } #chartContainer { - font-size: 110% !important; + font-size: 12px !important; top: 210px; } #chartContainer svg { @@ -406,13 +411,8 @@ div.tooltip { padding-bottom: 20px; } - #currentTime { - font-size: 85%; - } - #chartContainer { top: 130px; - font-size: 80%; } #chartContainer svg { height: calc(100vh - 130px); @@ -420,13 +420,56 @@ div.tooltip { } @media (max-height: 480px) and (min-width: 400px) { - .container .status { - font-size: 70%; + .bgStatus .currentBG { + font-size: 80px; + line-height: 80px; + } + + .bgStatus .currentDirection { + font-size: 70px; + line-height: 70px; + } + + .bgStatus .currentDetails { + font-size: 15px; + } + + .time { + font-size: 70px; } + + .timeOther { + font-size: 15px; + } + } @media (max-height: 480px) and (max-width: 400px) { - .container .status { - font-size: 80% !important; + + .bgStatus { + top: -15px; + position: relative; } + + .time { + padding: 0; + top: -10px; + position: relative; + } + + .bgStatus .currentBG { + font-size: 60px; + line-height: 60px; + } + + .bgStatus .currentDirection { + font-size: 50px; + line-height: 50px; + vertical-align: middle; + } + + .bgStatus .currentDetails { + font-size: 15px; + } + } diff --git a/static/index.html b/static/index.html index 703c87db5..e5055d471 100644 --- a/static/index.html +++ b/static/index.html @@ -27,16 +27,9 @@

Nightscout

-
+
--- - -
--
- -
- +
 
diff --git a/static/js/client.js b/static/js/client.js index cddc7f913..26a99d453 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -228,12 +228,16 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; .style('opacity', function (d) { return highlightBrushPoints(d) }); } + function alarmingNow() { + return $('#container').hasClass('alarming'); + } + function inRetroMode() { if (!brush) return false; - var brushExtent = brush.extent(); - var elementHidden = document.getElementById('bgButton').hidden == ''; - return brushExtent[1].getTime() - THIRTY_MINS_IN_MS < now && elementHidden != true; + var time = brush.extent()[1].getTime(); + + return !alarmingNow() && time - THIRTY_MINS_IN_MS < now; } function errorCodeToDisplay(errorCode) { @@ -354,10 +358,11 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; return '' + iob.display + 'U'; } - var color = inRetroMode() ? 'grey' : sgvToColor(latestSGV.y); - - $('.container #noButton .currentBG').css({color: color}); - $('.container #noButton .currentDirection').css({color: color}); + if (inRetroMode()) { + $('.bgButton').removeClass('urgent warning inrange'); + } else { + $('.bgButton').addClass(sgvToColoredRange(latestSGV.y)); + } // predict for retrospective data // by changing lookback from 1 to 2, we modify the AR algorithm to determine its initial slope from 10m @@ -953,6 +958,27 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; return color; } + function sgvToColoredRange(sgv) { + var range = ''; + + if (browserSettings.theme == 'colors') { + if (sgv > app.thresholds.bg_high) { + range = 'urgent'; + } else if (sgv > app.thresholds.bg_target_top) { + range = 'warning'; + } else if (sgv >= app.thresholds.bg_target_bottom && sgv <= app.thresholds.bg_target_top) { + range = 'inrange'; + } else if (sgv < app.thresholds.bg_low) { + range = 'urgent'; + } else if (sgv < app.thresholds.bg_target_bottom) { + range = 'warning'; + } + } + + return range; + } + + function generateAlarm(file) { alarmInProgress = true; var selector = '.audio.alarms audio.' + file; @@ -961,14 +987,8 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; playAlarm(audio); $(this).addClass('playing'); }); - var bgButton = $('#bgButton'); - bgButton.show(); - bgButton.toggleClass('urgent', file == urgentAlarmSound); - var noButton = $('#noButton'); - noButton.hide(); + $('.bgButton').addClass(file == urgentAlarmSound ? 'urgent' : 'warning'); $('#container').addClass('alarming'); - $('.container .currentBG').text(); - } function playAlarm(audio) { @@ -982,11 +1002,8 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; function stopAlarm(isClient, silenceTime) { alarmInProgress = false; - var bgButton = $('#bgButton'); - bgButton.hide(); - var noButton = $('#noButton'); - noButton.show(); - d3.selectAll('audio.playing').each(function (d, i) { + $('.bgButton').removeClass('urgent warning'); + d3.selectAll('audio.playing').each(function () { var audio = this; audio.pause(); $(this).removeClass('playing'); @@ -1334,8 +1351,8 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; var silenceDropdown = new Dropdown('.dropdown-menu'); - $('#bgButton').click(function (e) { - silenceDropdown.open(e); + $('.bgButton').click(function (e) { + if (alarmingNow()) silenceDropdown.open(e); }); $('#silenceBtn').find('a').click(function (e) { From 1efb651fcbef921f5a52b8eb489772e30bcf1eb8 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Mon, 9 Mar 2015 01:23:50 -0700 Subject: [PATCH 02/12] better arrow alignment --- static/css/main.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index f8ada971e..7504053af 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -69,14 +69,15 @@ body { font-size: 120px; line-height: 120px; text-decoration: line-through; + vertical-align: middle; } .bgStatus .currentDirection { - font-weight: normal; - text-decoration: none; - font-size: 90px; - line-height: 90px; - vertical-align: top; + font-weight: normal; + text-decoration: none; + font-size: 90px; + line-height: 90px; + vertical-align: middle; } .bgStatus .currentDetails { @@ -465,7 +466,6 @@ div.tooltip { .bgStatus .currentDirection { font-size: 50px; line-height: 50px; - vertical-align: middle; } .bgStatus .currentDetails { From c4817b58db0fe55f011e14e6736b8ca90967c1b8 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Tue, 10 Mar 2015 22:56:14 -0700 Subject: [PATCH 03/12] fixed bug found by @francescaneri that made clicking on toolbar buttons impossible on iPhone 3GS and other small screens --- static/css/drawer.css | 1 + 1 file changed, 1 insertion(+) diff --git a/static/css/drawer.css b/static/css/drawer.css index 035340ab6..1a3881825 100644 --- a/static/css/drawer.css +++ b/static/css/drawer.css @@ -176,6 +176,7 @@ h1, legend, vertical-align: middle; position: absolute; right: 0; + z-index: 500; } #buttonbar a, From 89129e4ffad49cb9e3f50a152de0d712405345d5 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Wed, 11 Mar 2015 00:40:11 -0700 Subject: [PATCH 04/12] lots of css adjustments based on everyone's feedback --- static/css/main.css | 101 +++++++++++++++++++++------------------------------- static/index.html | 4 +-- static/js/client.js | 39 ++++++++++---------- 3 files changed, 63 insertions(+), 81 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 7504053af..db3d08b6d 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -12,21 +12,13 @@ body { font-family: 'Open Sans', Helvetica, Arial, sans-serif; fill: #fff; background: #000; - color: #808080; + color: #bdbdbd; } - -/* BEGIN: Dolphin/Stock Android Browser Fix */ -@media (max-width: 400px) { - .bgStatus { - width: 100% !important; - } -} #chartContainer { + font-size: 20px; top: 225px; /*(toolbar height + status height)*/ } -/* END: Dolphin/Stock Android Browser Fix */ - .container { bottom: 0; @@ -67,7 +59,7 @@ body { .bgStatus .currentBG { font-size: 120px; - line-height: 120px; + line-height: 100px; text-decoration: line-through; vertical-align: middle; } @@ -84,28 +76,27 @@ body { font-size: 20px; } -.currentDetails > span { - border-radius: 5px; - border: 2px solid #bdbdbd; -} - .currentDetails > span:not(:first-child) { margin-left: 5px; } -.currentDetails > span * { +span.pill { + white-space: nowrap; + border-radius: 5px; + border: 2px solid #bdbdbd; +} + +span.pill * { padding-left: 2px; padding-right: 2px; - padding-bottom: 1px; } -.currentDetails > span em { - color: #bdbdbd; +span.pill em { font-style: normal; font-weight: bold; } -.currentDetails > span label { +span.pill label { color: #000; background: #bdbdbd; } @@ -115,7 +106,9 @@ body { } .time { - font-size: 90px; + color: #808080; + font-size: 100px; + line-height: 100px; padding-top: 15px; } .timebox { @@ -124,13 +117,22 @@ body { } .timeOther { font-size: 20px; + line-height: 30px; } #lastEntry { background: #808080; - border-radius: 5px; - color: #000; - padding: 0.25em; + border-color: #808080; } + +#lastEntry.pill em { + color: #808080; + background: #000; +} + +#lastEntry.pill label { + background: #808080; +} + #lastEntry.warn { background: #cc0 !important; } @@ -164,7 +166,7 @@ body { shape-rendering: crispEdges; } .grid path, .axis line { - stroke: #808080; + stroke: #bdbdbd; stroke-opacity: 1; } @@ -205,7 +207,7 @@ body { } .bgButton:active { - border: 2px solid #808080; + border: 2px solid #bdbdbd; box-shadow: none; background-color: #222; -moz-box-shadow: none; @@ -235,23 +237,6 @@ div.tooltip { display: none; } -#currentTime{ - padding: 0 0 10px 0; -} - -/* Large desktop */ -@media (min-width: 980px) { - .content { - padding-top: 20px; - } - .linediv-l { - border-right: 1px white solid; - } - .linedic-r { - border-left: 1px white solid; - } -} - @media (max-width: 800px) { .bgStatus { width: 40%; @@ -273,10 +258,12 @@ div.tooltip { .time { font-size: 70px; + line-height: 60px; } .timeOther { font-size: 15px; + line-height: 40px; } #silenceBtn * { @@ -294,9 +281,13 @@ div.tooltip { } @media (max-width: 750px) { + .bgStatus { + width: 60%; + } + .bgStatus .currentBG { font-size: 70px; - line-height: 70px; + line-height: 60px; } .bgStatus .currentDirection { @@ -310,6 +301,8 @@ div.tooltip { .time { font-size: 50px; + line-height: 40px; + width: 250px; } #chartContainer { @@ -323,10 +316,6 @@ div.tooltip { } @media (max-width: 400px) { - body { - font-size: 70px; - } - .status { text-align: center; margin-bottom: 0; @@ -366,6 +355,8 @@ div.tooltip { } .time { + width: auto; + padding-top: 0; font-size: 20px !important; } @@ -437,6 +428,7 @@ div.tooltip { .time { font-size: 70px; + line-height: 60px; } .timeOther { @@ -447,17 +439,6 @@ div.tooltip { @media (max-height: 480px) and (max-width: 400px) { - .bgStatus { - top: -15px; - position: relative; - } - - .time { - padding: 0; - top: -10px; - position: relative; - } - .bgStatus .currentBG { font-size: 60px; line-height: 60px; diff --git a/static/index.html b/static/index.html index e5055d471..f187f145b 100644 --- a/static/index.html +++ b/static/index.html @@ -37,14 +37,14 @@

Nightscout

  • Silence for 90 minutes
  • Silence for 120 minutes
    • -
     
    +
    ---
    - --- +
    diff --git a/static/js/client.js b/static/js/client.js index 26a99d453..cb534d6dd 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -339,7 +339,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; bgDeltaString = '+' + bgDelta; } - bgDeltaString = '' + bgDeltaString + '
    ---
    - + -
    diff --git a/static/js/client.js b/static/js/client.js index d8f7d6b69..7945d4d43 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -19,6 +19,10 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; , FORMAT_TIME_SCALE = '%I %p' , WIDTH_SMALL_DOTS = 400 , WIDTH_BIG_DOTS = 800 + , MINUTE_IN_SECS = 60 + , HOUR_IN_SECS = 3600 + , DAY_IN_SECS = 86400 + , WEEK_IN_SECS = 604800 , MINUTES_SINCE_LAST_UPDATE_WARN = 10 , MINUTES_SINCE_LAST_UPDATE_URGENT = 20; @@ -305,7 +309,9 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; var currentBG = $('.bgStatus .currentBG') , currentDirection = $('.bgStatus .currentDirection') - , currentDetails = $('.bgStatus .currentDetails'); + , currentDetails = $('.bgStatus .currentDetails') + , lastEntry = $('#lastEntry'); + function updateCurrentSGV(value) { if (value < 39) { @@ -322,40 +328,46 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; currentBG.toggleClass('bg-limit', value == 39 || value > 400); } - function calcBGDelta(prev, current) { + function updateBGDelta(prev, current) { - var bgDeltaString; + var pill = currentDetails.find('span.pill.bgdelta'); + if (!pill || pill.length == 0) { + pill = $(''); + currentDetails.append(pill); + } - if (prev < 40 || prev > 400 || current < 40 || current > 400) { - bgDeltaString = ''; + if (prev === undefined || current == undefined || prev < 40 || prev > 400 || current < 40 || current > 400) { + pill.children('em').text('#'); } else { var bgDelta = scaleBg(current) - scaleBg(prev); if (browserSettings.units == 'mmol') { bgDelta = bgDelta.toFixed(1); } - bgDeltaString = bgDelta; - if (bgDelta >= 0) { - bgDeltaString = '+' + bgDelta; - } - - bgDeltaString = '' + bgDeltaString + ''; + if (browserSettings.units == 'mmol') { + pill.children('label').text('mmol/L'); + } else { + pill.children('label').text('mg/dL'); + } - return bgDeltaString; } - function buildIOBIndicator(time) { - var iob = Nightscout.iob.calcTotal(treatments, profile, time); - return '' + iob.display + 'U'; + function updateIOBIndicator(time) { + if (showIOB()) { + var pill = currentDetails.find('span.pill.iob'); + + if (!pill || pill.length == 0) { + pill = $(''); + currentDetails.append(pill); + } + var iob = Nightscout.iob.calcTotal(treatments, profile, time); + pill.find('em').text(iob.display + 'U'); + } else { + currentDetails.find('.pill.iob').remove(); + } } if (inRetroMode()) { @@ -398,27 +410,23 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; updateCurrentSGV(focusPoint.y); - var details = calcBGDelta(prevfocusPoint.y, focusPoint.y); - - if (showIOB()) { - details += buildIOBIndicator(time); - } + updateBGDelta(prevfocusPoint.y, focusPoint.y); currentBG.css('text-decoration','line-through'); currentDirection.html(focusPoint.y < 39 ? '✖' : focusPoint.direction); - currentDetails.html(details); } else { + updateBGDelta(); currentBG.text('---'); currentDirection.text('-'); - currentDetails.text(''); } + updateIOBIndicator(time); + $('#currentTime') .text(formatTime(time)) .css('text-decoration','line-through'); - $('#lastEntry').removeClass('current'); - $('#lastEntry label').text('RETRO').removeClass('current'); + updateTimeAgo(); } else { // if the brush comes back into the current time range then it should reset to the current time and sg nowData = nowData.slice(nowData.length - 1 - lookback, nowData.length); @@ -428,15 +436,11 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; updateClockDisplay(); updateTimeAgo(); - var details = calcBGDelta(prevSGV.y, latestSGV.y); - - if (showIOB()) { - details += buildIOBIndicator(nowDate); - } + updateBGDelta(prevSGV.y, latestSGV.y); + updateIOBIndicator(nowDate); currentBG.css('text-decoration', ''); currentDirection.html(latestSGV.y < 39 ? '✖' : latestSGV.direction); - currentDetails.html(details); } xScale.domain(brush.extent()); @@ -1019,39 +1023,31 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; } } - function timeAgo(offset) { - var parts = {}, - MINUTE = 60, - HOUR = 3600, - DAY = 86400, - WEEK = 604800; - - //offset = (MINUTE * MINUTES_SINCE_LAST_UPDATE_WARN) + 60 - //offset = (MINUTE * MINUTES_SINCE_LAST_UPDATE_URGENT) + 60 - - if (offset <= MINUTE) parts = { label: 'now' }; - if (offset <= MINUTE * 2) parts = { value: 1, label: 'min ago' }; - else if (offset < (MINUTE * 60)) parts = { value: Math.round(Math.abs(offset / MINUTE)), label: 'mins ago' }; - else if (offset < (HOUR * 2)) parts = { value: 1, label: 'hr ago' }; - else if (offset < (HOUR * 24)) parts = { value: Math.round(Math.abs(offset / HOUR)), label: 'hrs ago' }; - else if (offset < DAY) parts = { value: 1, label: 'day ago' }; - else if (offset < (DAY * 7)) parts = { value: Math.round(Math.abs(offset / DAY)), label: 'day ago' }; - else if (offset < (WEEK * 52)) parts = { value: Math.round(Math.abs(offset / WEEK)), label: 'week ago' }; - else parts = { label: 'a long time ago' }; - - if (offset > (MINUTE * MINUTES_SINCE_LAST_UPDATE_URGENT)) { - var lastEntry = $('#lastEntry'); - lastEntry.removeClass('warn'); - lastEntry.addClass('urgent'); - - $('.bgStatus').removeClass('current'); - } else if (offset > (MINUTE * MINUTES_SINCE_LAST_UPDATE_WARN)) { - var lastEntry = $('#lastEntry'); - lastEntry.removeClass('urgent'); - lastEntry.addClass('warn'); + function timeAgo(time) { + var now = Date.now() + , offset = time == -1 ? -1 : (now - time) / 1000 + , parts = {}; + + if (offset < MINUTE_IN_SECS * -5) parts = { label: 'in the future' }; + else if (offset <= 0) parts = { label: 'time ago' }; + else if (offset <= MINUTE_IN_SECS * 2) parts = { value: 1, label: 'min ago' }; + else if (offset < (MINUTE_IN_SECS * 60)) parts = { value: Math.round(Math.abs(offset / MINUTE_IN_SECS)), label: 'mins ago' }; + else if (offset < (HOUR_IN_SECS * 2)) parts = { value: 1, label: 'hr ago' }; + else if (offset < (HOUR_IN_SECS * 24)) parts = { value: Math.round(Math.abs(offset / HOUR_IN_SECS)), label: 'hrs ago' }; + else if (offset < DAY_IN_SECS) parts = { value: 1, label: 'day ago' }; + else if (offset < (DAY_IN_SECS * 7)) parts = { value: Math.round(Math.abs(offset / DAY_IN_SECS)), label: 'day ago' }; + else if (offset < (WEEK_IN_SECS * 52)) parts = { value: Math.round(Math.abs(offset / WEEK_IN_SECS)), label: 'week ago' }; + else parts = { label: 'a long time ago' }; + + if (offset < MINUTE_IN_SECS * -5 || offset > (MINUTE_IN_SECS * MINUTES_SINCE_LAST_UPDATE_URGENT)) { + parts.removeClass = 'current warn'; + parts.addClass = 'urgent'; + } else if (offset > (MINUTE_IN_SECS * MINUTES_SINCE_LAST_UPDATE_WARN)) { + parts.removeClass = 'current urgent'; + parts.addClass = 'warn'; } else { - $('.bgStatus').addClass('current'); - $('#lastEntry').removeClass('warn urgent'); + parts.addClass = 'current'; + parts.removeClass = 'warn urgent'; } return parts; @@ -1264,17 +1260,21 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; } function updateTimeAgo() { - if (!latestSGV || inRetroMode()) return; + var lastEntry = $('#lastEntry') + , time = latestSGV ? new Date(latestSGV.x).getTime() : -1 + , ago = timeAgo(time) + , retroMode = inRetroMode(); + + lastEntry.addClass(ago.addClass); + lastEntry.removeClass(ago.removeClass); - var secsSinceLast = (Date.now() - new Date(latestSGV.x).getTime()) / 1000; - var ago = timeAgo(secsSinceLast); - $('#lastEntry').toggleClass('current', secsSinceLast < 10 * 60); - if (ago.value === undefined) { - $('#lastEntry em').hide(); + if (retroMode || !ago.value) { + lastEntry.find('em').hide(); } else { - $('#lastEntry em').show().text(ago.value); + lastEntry.find('em').show().text(ago.value); } - $('#lastEntry label').text(ago.label); + + lastEntry.find('label').text(retroMode ? 'RETRO' : ago.label); } function init() { From 758b868ef37af8ae3fd0a29c5ca3280e0130a1f0 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Thu, 12 Mar 2015 00:29:33 -0700 Subject: [PATCH 09/12] smaller font for chart when screen is shorted than 480px --- static/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/css/main.css b/static/css/main.css index b3aae6848..e28f28911 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -422,7 +422,7 @@ div.tooltip { #chartContainer { top: 130px; - font-size: 12px; + font-size: 10px; } #chartContainer svg { height: calc(100vh - 130px); From 967f519c214ea4369d44defe85e0f76ee8427fa6 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Thu, 12 Mar 2015 00:47:45 -0700 Subject: [PATCH 10/12] added back + in delta --- static/js/client.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/client.js b/static/js/client.js index 7945d4d43..6196a7d94 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -344,7 +344,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; bgDelta = bgDelta.toFixed(1); } - pill.children('em').text(bgDelta); + pill.children('em').text((bgDelta >= 0 ? '+' : '') + bgDelta); } if (browserSettings.units == 'mmol') { From 3a22002f64a4bc91dbfa39366a8893a7d0bbc64c Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Thu, 12 Mar 2015 09:55:40 -0700 Subject: [PATCH 11/12] use full hight of the chart (removed 20px top padding); move x-axis labels to below the line --- static/js/client.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/js/client.js b/static/js/client.js index 6196a7d94..4db9acee5 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -34,7 +34,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; , treatments , profile , cal - , padding = { top: 20, right: 10, bottom: 30, left: 10 } + , padding = { top: 0, right: 10, bottom: 30, left: 10 } , opacity = {current: 1, DAY: 1, NIGHT: 0.5} , now = Date.now() , data = [] @@ -162,7 +162,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; .scale(xScale) .tickFormat(d3.time.format(getTimeFormat(true))) .ticks(4) - .orient('top'); + .orient('bottom'); yAxis = d3.svg.axis() .scale(yScale) @@ -689,7 +689,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; focus.append('line') .attr('class', 'now-line') .attr('x1', xScale(new Date(now))) - .attr('y1', yScale(scaleBg(36))) + .attr('y1', yScale(scaleBg(30))) .attr('x2', xScale(new Date(now))) .attr('y2', yScale(scaleBg(420))) .style('stroke-dasharray', ('3, 3')) From 50dd57dd72b15cad4f88eb1a379809334827e522 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Thu, 12 Mar 2015 17:48:44 -0700 Subject: [PATCH 12/12] made direction arrow a little smaller for the max-width: 750px break point --- static/css/main.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index e28f28911..83004ec51 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -298,8 +298,8 @@ div.tooltip { } .bgStatus .currentDirection { - font-size: 60px; - line-height: 60px; + font-size: 50px; + line-height: 50px; } .bgStatus .currentDetails {