From 7b6d7c40b7d4f8b8bb48867d73a98a4a684eec2d Mon Sep 17 00:00:00 2001 From: Brian Hanifin Date: Wed, 30 Jul 2014 11:47:12 -0700 Subject: [PATCH 1/4] version 0.3.3: Mobile layout adjustments * Shrunk BG number on mobile so it doesn't push the time + staleness info out of view (when the toolbar is collapsed). * Slight style refactoring (moved some css from js to css). --- bower.json | 2 +- package.json | 2 +- static/css/drawer.css | 3 ++- static/css/main.css | 30 ++++++------------------------ static/js/ui-utils.js | 8 ++------ 5 files changed, 12 insertions(+), 33 deletions(-) diff --git a/bower.json b/bower.json index a1980a2f779..eada4a91f6c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "nightscout", - "version": "0.3.2", + "version": "0.3.3", "dependencies": { "d3": "3.4.3", "jquery": "2.1.0", diff --git a/package.json b/package.json index 04ff4f5222e..c0f768dee75 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Nightscout", - "version": "0.3.2", + "version": "0.3.3", "description": "Nightscout acts as a web-based CGM (Continuous Glucose Montinor) to allow multiple caregivers to remotely view a patients glucose data in realtime.", "license": "MIT", "author": "Nightscout Team", diff --git a/static/css/drawer.css b/static/css/drawer.css index 5791834f9c3..4fdab9149e0 100644 --- a/static/css/drawer.css +++ b/static/css/drawer.css @@ -136,7 +136,7 @@ h1, legend, #showToolbar, #notification { display: none; - font-size: 16px; + font-size: 14px; position: absolute; } #showToolbar { @@ -148,6 +148,7 @@ h1, legend, } #showToolbar a { border: solid #fff 1px; + border-radius: 5px; border-top: 0; color: #fff; margin: 0 auto; diff --git a/static/css/main.css b/static/css/main.css index 5166b4690de..5be2003ebf5 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -168,30 +168,6 @@ body { font-size: 20%; } - -/* -@media (max-width: 1060px) { - body { - font-size: 70%; - } - - #toolbar, #buttonbar { - font-size: 100%; - } - - .status { - height: 130px; - } - - #chartContainer { - top: calc(130px + 45px); - } - #chartContainer svg { - height: calc(100vh - (130px + 45px)); - } -} -*/ - /* Large desktop */ @media (min-width: 980px) { .content { @@ -234,11 +210,17 @@ body { #bgButton {display:block;} */ .bgStatus { + font-size: 900%; float: none; margin: 0 auto; + padding: 0; text-align: center; width: 100vw; } + .status.toolbarClosed .bgStatus { + font-size: 990%; + margin-top: 10px; + } #bgButton { font-size: 120%; height: 142px; diff --git a/static/js/ui-utils.js b/static/js/ui-utils.js index 8e6725dbe21..edd8afc3362 100644 --- a/static/js/ui-utils.js +++ b/static/js/ui-utils.js @@ -174,16 +174,12 @@ function openToolbar() { function stretchStatusForToolbar(toolbarState){ // closed = up if (toolbarState == "close") { - $(".status").css({ - "font-size": "+125%" - }); + $(".status").addClass("toolbarClosed"); } // open = down if (toolbarState == "open") { - $(".status").css({ - "font-size": "-125%" - }); + $(".status").removeClass("toolbarClosed"); } } From 5514a8f874ff8005e3e60fd5943962453bfae15e Mon Sep 17 00:00:00 2001 From: Brian Hanifin Date: Wed, 30 Jul 2014 13:00:24 -0700 Subject: [PATCH 2/4] version 0.3.3: Mobile layout adjustments * Shrunk BG number on mobile so it doesn't push the time + staleness info out of view (when the toolbar is collapsed). * Fix issue that caused the chart to fill the entire screen on the Android Stock & Dolphin Browsers. * Slight style refactoring (moved some css from js to css). --- static/css/drawer.css | 3 +++ static/css/main.css | 17 ++++++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/static/css/drawer.css b/static/css/drawer.css index 4fdab9149e0..c52cd0e3202 100644 --- a/static/css/drawer.css +++ b/static/css/drawer.css @@ -154,6 +154,9 @@ h1, legend, margin: 0 auto; padding: 2px; } + + + #notification, #notification a { overflow: hidden; diff --git a/static/css/main.css b/static/css/main.css index 5be2003ebf5..59589c67b7a 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -33,16 +33,32 @@ body { vertical-align: middle; } +/* Dolphin/Stock Android Browser Fix */ +@media (max-width: 700px) { + .bgStatus { + width: 100% !important; + } +} +#chartContainer { + top: 225px; /*calc(45px + 180px) (toolbar height + status height)*/ +} .bgStatus { float: right; font-size: 900%; margin-right: 25px; text-align: center; text-decoration: line-through; + white-space: nowrap; } .bgStatus.current { text-decoration: none; } + +.status.toolbarClosed .bgStatus { + font-size:990%; + +} + .currentDirection { font-weight: normal; text-decoration: none !important; @@ -77,7 +93,6 @@ body { left:0; position:absolute; right:0; - top: calc(180px + 45px); } #chartContainer svg { height: calc(100vh - (180px + 45px)); From fdb160cd3c7d2b090e58c6a0cadb9b782d182d3d Mon Sep 17 00:00:00 2001 From: Brian Hanifin Date: Wed, 30 Jul 2014 13:23:12 -0700 Subject: [PATCH 3/4] version 0.3.3: Mobile layout adjustments * Shrunk BG number on mobile so it doesn't push the time elements out of view (when the toolbar is collapsed). * Fix issue that caused the chart to fill the entire screen on the Android Stock & Dolphin Browsers. * Improved alignment of time elements. * Slight style refactoring (moved some css from js to css). --- static/css/main.css | 33 ++++++++++++++++++++++----------- static/index.html | 8 +++++--- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 59589c67b7a..ba430857e0c 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -15,6 +15,19 @@ body { color: #808080; } + +/* BEGIN: Dolphin/Stock Android Browser Fix */ +@media (max-width: 700px) { + .bgStatus { + width: 100% !important; + } +} +#chartContainer { + top: 225px; /*(toolbar height + status height)*/ +} +/* END: Dolphin/Stock Android Browser Fix */ + + .container { bottom: 0; display: block; @@ -33,15 +46,6 @@ body { vertical-align: middle; } -/* Dolphin/Stock Android Browser Fix */ -@media (max-width: 700px) { - .bgStatus { - width: 100% !important; - } -} -#chartContainer { - top: 225px; /*calc(45px + 180px) (toolbar height + status height)*/ -} .bgStatus { float: right; font-size: 900%; @@ -65,12 +69,14 @@ body { } .time { font-size: 600%; - margin-left: 25px; padding-top: 15px; } +.timebox { + text-align: center; + width: 250px; +} .timeOther { font-size: 25%; - margin-left: 32px; } #lastEntry { background: #999; @@ -97,6 +103,7 @@ body { #chartContainer svg { height: calc(100vh - (180px + 45px)); width: 100%; + top: calc(45px + 180px); } .axis path, @@ -253,6 +260,10 @@ body { margin-left: 0; width: 100%; } + .timebox { + text-align: none; + width: auto; + } #currentTime { display: inline; font-size: 25%; diff --git a/static/index.html b/static/index.html index e36acd1a96e..43366d53615 100644 --- a/static/index.html +++ b/static/index.html @@ -46,9 +46,11 @@

Nightscout

-
---
-
- --- +
+
---
+
+ --- +
From d4984bf777f45d4b9c1c574a80ce488887b46703 Mon Sep 17 00:00:00 2001 From: Brian Hanifin Date: Wed, 30 Jul 2014 13:32:52 -0700 Subject: [PATCH 4/4] version 0.3.3: Mobile layout adjustments * Shrunk BG number on mobile so it doesn't push the time elements out of view (when the toolbar is collapsed). * Fix issue that caused the chart to fill the entire screen on the Android Stock & Dolphin Browsers. * Removed strikethrough on arrows (when data is stale). * Improved alignment of time elements. * Slight style refactoring (moved some css from js to css). --- static/css/main.css | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index ba430857e0c..24640817ae2 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -51,10 +51,16 @@ body { font-size: 900%; margin-right: 25px; text-align: center; - text-decoration: line-through; white-space: nowrap; } -.bgStatus.current { +.bgStatus .currentBG { + text-decoration: line-through; +} +.bgStatus.current .currentBG { + text-decoration: none; +} +.currentDirection { + font-weight: normal; text-decoration: none; } @@ -63,10 +69,6 @@ body { } -.currentDirection { - font-weight: normal; - text-decoration: none !important; -} .time { font-size: 600%; padding-top: 15px;