Skip to content

Commit

Permalink
Basic report page style fixes and updates (#5387)
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrew-dixon @sulkaharo
andrew-dixon authored and sulkaharo committed Jan 1, 2020
1 parent 8139cb9 commit f7922a6
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 102 deletions.
30 changes: 15 additions & 15 deletions lib/report_plugins/daytoday.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,17 @@ daytoday.html = function html (client) {
'<h2>' + translate('Day to day') + '</h2>' +
'<b>' + translate('To see this report, press SHOW while in this view') + '</b><br>' +
translate('Display') + ': ' +
'<input type="checkbox" id="rp_optionsinsulin" checked><span style="color:blue;opacity:0.5">' + translate('Insulin') + '</span>' +
'<input type="checkbox" id="rp_optionscarbs" checked><span style="color:red;opacity:0.5">' + translate('Carbs') + '</span>' +
'<input type="checkbox" id="rp_optionsbasal" checked><span style="color:#0099ff;opacity:0.5">' + translate('Basal rate') + '</span>' +
'<input type="checkbox" id="rp_optionsnotes">' + translate('Notes') +
'<input type="checkbox" id="rp_optionsfood" checked>' + translate('Food') +
'<input type="checkbox" id="rp_optionsraw"><span style="color:gray;opacity:1">' + translate('Raw') + '</span>' +
'<input type="checkbox" id="rp_optionsiob"><span style="color:blue;opacity:0.5">' + translate('IOB') + '</span>' +
'<input type="checkbox" id="rp_optionscob"><span style="color:red;opacity:0.5">' + translate('COB') + '</span>' +
'<input type="checkbox" id="rp_optionspredicted"><span style="color:sienna;opacity:0.5">' + translate('Predictions') + '</span>' +
'<input type="checkbox" id="rp_optionsopenaps"><span style="color:sienna;opacity:0.5">' + translate('OpenAPS') + '</span>' +
'<input type="checkbox" id="rp_optionsdistribution" checked><span style="color:blue;opacity:0.5">' + translate('Insulin distribution') + '</span>' +
'<label><input type="checkbox" id="rp_optionsinsulin" checked><span style="color:blue;opacity:0.5">' + translate('Insulin') + '</span></label>' +
'<label><input type="checkbox" id="rp_optionscarbs" checked><span style="color:red;opacity:0.5">' + translate('Carbs') + '</span></label>' +
'<label><input type="checkbox" id="rp_optionsbasal" checked><span style="color:#0099ff;opacity:0.5">' + translate('Basal rate') + '</span></label>' +
'<label><input type="checkbox" id="rp_optionsnotes">' + translate('Notes') + '</label>' +
'<label><input type="checkbox" id="rp_optionsfood" checked>' + translate('Food') + '</label>' +
'<label><input type="checkbox" id="rp_optionsraw"><span style="color:gray;opacity:1">' + translate('Raw') + '</span></label>' +
'<label><input type="checkbox" id="rp_optionsiob"><span style="color:blue;opacity:0.5">' + translate('IOB') + '</span></label>' +
'<label><input type="checkbox" id="rp_optionscob"><span style="color:red;opacity:0.5">' + translate('COB') + '</span></label>' +
'<label><input type="checkbox" id="rp_optionspredicted"><span style="color:sienna;opacity:0.5">' + translate('Predictions') + '</span></label>' +
'<label><input type="checkbox" id="rp_optionsopenaps"><span style="color:sienna;opacity:0.5">' + translate('OpenAPS') + '</span></label>' +
'<label><input type="checkbox" id="rp_optionsdistribution" checked><span style="color:blue;opacity:0.5">' + translate('Insulin distribution') + '</span></label>' +
'&nbsp;' + translate('Size') +
' <select id="rp_size">' +
' <option x="800" y="250">800x250px</option>' +
Expand All @@ -44,10 +44,10 @@ daytoday.html = function html (client) {
'</select>' +
'<br>' +
translate('Scale') + ': ' +
'<input type="radio" name="rp_scale" id="rp_linear" checked>' +
translate('Linear') +
'<input type="radio" name="rp_scale" id="rp_log">' +
translate('Logarithmic') +
'<label><input type="radio" name="rp_scale" id="rp_linear" checked>' +
translate('Linear') + '</label>' +
'<label><input type="radio" name="rp_scale" id="rp_log">' +
translate('Logarithmic') + '</label>' +
'<div id="rp_predictedSettings" style="display:none">' +
translate('Truncate predictions: ') +
'<input type="checkbox" id="rp_optionsPredictedTruncate" checked>' +
Expand Down
85 changes: 77 additions & 8 deletions static/css/report.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,32 @@ 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;
}
Expand All @@ -24,26 +50,32 @@ body {

#tabnav {
text-align: left;
margin: 1em 0 1em 0;
margin: 1em 0 0;
font: bold 11pt verdana, arial, sans-serif;
border-bottom: 1px solid #6c6;
list-style-type: none;
padding: 3px 10px 3px 10px;
padding: 0 0 0 15px;
}

#tabnav li{
display: inline;
padding: 3px 4px;
border: 1px solid #6c6;
#tabnav li {
display: inline-block;
padding: 10px 15px;
border-top: 1px solid #6c6;
border-right: 1px solid #6c6;
border-bottom: none;
background-color: #cfc;
color: #666;
margin-right: 0;
margin: 0 0 -1px 0;
text-decoration: none;
border-bottom: none;
}

#tabnav li:first-child {
border-left: 1px solid #6c6;
}

#tabnav .selected {
background: #fff;
border-bottom: 1px solid #fff;
}

#tabnav li:hover {
Expand All @@ -66,4 +98,41 @@ body {
float: right;
min-width: 150px;
max-width: 400px;
}

main {
padding: 15px;
}

input[type=date],
input[type=text],
input[type=number],
select {
font: 13px verdana, arial, sans-serif;
}

label {
display: inline-flex;
justify-content: flex-start;
align-items: center;
margin-right: 7px;
}

#rp_to {
margin-right: 10px;
}

.presetdates {
display: inline-block;
margin-right: 8px;
}

#rp_show {
background-color: #cfc;
border: 1px solid #6c6;
color: #666;
padding: 10px;
font-weight: bold;
font-size: 12pt;
text-transform: uppercase;
}
162 changes: 83 additions & 79 deletions views/reportindex.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Nightscout reporting</title>

<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/images/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/images/favicon.ico">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="msapplication-TileImage" content="/images/mstile-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#333333">

<link rel="preload" href="/css/report.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/ui-lightness/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>

<p><img src="/images/logo1.png"><b style="font-size: 14pt;"><span class="translate">Nightscout reporting</span></b></p>
<ul id="tabnav">
</ul>
<head>
<title>Nightscout Reporting</title>

<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/images/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/images/favicon.ico">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="msapplication-TileImage" content="/images/mstile-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#333333">

<link rel="preload" href="/css/report.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/ui-lightness/jquery-ui.min.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<% include preloadCSS %>

</head>
<body>
<a href="/" class="close">X</a>
<header>
<img src="/images/logo1.png">
<span class="translate pagetitle">Nightscout Reporting</span>
</header>
<ul id="tabnav">
</ul>
<main>
<table>
<tr>
<td><input type="checkbox" id="rp_enabledate" checked></td>
Expand All @@ -48,15 +51,14 @@
<a href="#" days="31" class="presetdates"><span class="translate">Last month</span></a>
<a href="#" days="90" class="presetdates"><span class="translate">Last 3 months</span></a>
</td>
</tr>
</tr>
<tr class="rp_foodgui" style="display:none">
<td></td>
<td>
<span class="translate">Category</span>: <select id="rp_category"></select>
<span class="translate">Subcategory</span>: <select id="rp_subcategory"></select>
<span class="translate">Name</span>: <input type="text" id="rp_name"></select>
</td>

</tr>
<tr class="rp_foodgui" style="display:none">
<td>
Expand All @@ -65,67 +67,69 @@
<td>
<span class="translate">Food</span>: <select id="rp_food"></select>
</td>
</tr>
</tr>
<tr>
<td><input type="checkbox" id="rp_enablenotes"></td>
<td>
<span class="translate">Notes contain</span>: <input type="text" id="rp_notes"></select>
</td>
</tr>
<tr>
<tr>
<td><input type="checkbox" id="rp_enableeventtype"></td>
<td>
<span class="translate">Event Type</span>: <select id="rp_eventtype"></select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="rp_mo" checked><span class="translate">Mo</span>
<input type="checkbox" id="rp_tu" checked><span class="translate">Tu</span>
<input type="checkbox" id="rp_we" checked><span class="translate">We</span>
<input type="checkbox" id="rp_th" checked><span class="translate">Th</span>
<input type="checkbox" id="rp_fr" checked><span class="translate">Fr</span>
<input type="checkbox" id="rp_sa" checked><span class="translate">Sa</span>
<input type="checkbox" id="rp_su" checked><span class="translate">Su</span>
</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<span class="translate">Target bg range bottom</span>:
<input type="number" size="3" id="rp_targetlow">
<span class="translate">top</span>:
<input type="number" size="3" id="rp_targethigh">
</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<span class="translate">Order</span>:
<!-- many email GUIs place newest on top, less scrolling, adjusting my nightscout to do that too! -dboland -->
<input type="radio" name="rp_sorting" id="rp_oldestontop">
<label for="rp_oldestontop" class="translate">oldest on top</label>
&nbsp;
<input type="radio" name="rp_sorting" id="rp_newestontop" checked>
<label for="rp_newestontop" class="translate">newest on top</label>
</td>
<td></td>
<tr>
<td><input type="checkbox" id="rp_enableeventtype"></td>
<td>
<span class="translate">Event Type</span>: <select id="rp_eventtype"></select>
</td>
</tr>
<tr>
<td colspan="2">
<label><input type="checkbox" id="rp_mo" checked><span class="translate">Mo</span></label>
<label><input type="checkbox" id="rp_tu" checked><span class="translate">Tu</span></label>
<label><input type="checkbox" id="rp_we" checked><span class="translate">We</span></label>
<label><input type="checkbox" id="rp_th" checked><span class="translate">Th</span></label>
<label><input type="checkbox" id="rp_fr" checked><span class="translate">Fr</span></label>
<label><input type="checkbox" id="rp_sa" checked><span class="translate">Sa</span></label>
<label><input type="checkbox" id="rp_su" checked><span class="translate">Su</span></label>
</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<span class="translate">Target BG range bottom</span>:
<input type="number" size="3" id="rp_targetlow">
<span class="translate">top</span>:
<input type="number" size="3" id="rp_targethigh">
</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<span class="translate">Order</span>:
<!-- many email GUIs place newest on top, less scrolling, adjusting my nightscout to do that too! -dboland -->
<input type="radio" name="rp_sorting" id="rp_oldestontop">
<label for="rp_oldestontop" class="translate">oldest on top</label>
&nbsp;
<input type="radio" name="rp_sorting" id="rp_newestontop" checked>
<label for="rp_newestontop" class="translate">newest on top</label>
</td>
<td></td>
</tr>
</tr>
</table>
<button id="rp_show" class="translate">Show</button>
<div id="info"></div>
<hr>
<div id="pluginchartplaceholders"></div>

<hr>
<b><span class="translate">Authentication status</span>: </b><span id="authentication_placeholder"></span>

<script src="<%= locals.bundle %>/js/bundle.report.js?v=<%= locals.cachebuster %>"></script>
<script src="/socket.io/socket.io.js?v=<%= locals.cachebuster %>"></script>
<script src="/report/js/report.js?v=<%= locals.cachebuster %>"></script>
<script src="/report/js/flotcandle.js?v=<%= locals.cachebuster %>"></script>
<script src="/report/js/predictions.js?v=<%= locals.cachebuster %>"></script>
<script src="/report/js/loopalyzer.js?v=<%= locals.cachebuster %>"></script>
</body>
</html>
</main>
</body>
</html>

0 comments on commit f7922a6

Please sign in to comment.