bckelley/cgm-remote-monitor
1
0
Fork 0
mirror of https://github.com/bckelley/cgm-remote-monitor.git synced 2026-08-24 03:14:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Wip/clock hide state management (#4944)

Browse Source 
* Add tap-to-show close buttons

* oops, small typos

* remove unused class

* Add state management to the clock close button hiding
This commit is contained in:
Sulka Haro
2019-09-15 19:01:29 +03:00
committed by GitHub
parent 20823d3baa
commit 7c0a00537b
4 changed files with 90 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/clockviews/bgclock.css
+17 -12
View File
@@ -20,18 +20,6 @@ main {
height: 100vh;
}
#close {
position: absolute;
top: 10px;
right: 10px;
color: #333;
border-radius: 5px;
border: 2px solid #333;
padding: 5px;
width: 20px;
height: 20px;
}
.inner {
width: 100%;
-webkit-transform: translateY(-2%);
@@ -71,4 +59,21 @@ img#arrow {
.stale {
text-decoration: line-through;
}
.close {
color: white;
font: 4em 'Open Sans';
position: absolute;
right: 20px;
text-decoration: none;
}
.close:after {
content: '\00D7';
}
.hidden {
opacity: 0;
transition: opacity 0.5s linear;
}
views/clockviews/clock-color.css
+17 -12
View File
@@ -20,18 +20,6 @@ main {
height: 100vh;
}
#close {
position: absolute;
top: 10px;
right: 10px;
color: grey;
border-radius: 5px;
border: 2px solid grey;
padding: 5px;
width: 20px;
height: 20px;
}
.inner {
width: 100%;
-webkit-transform: translateY(-5%);
@@ -72,4 +60,21 @@ img#arrow {
#clock {
display: none;
}
.close {
color: white;
font: 4em 'Open Sans';
position: absolute;
right: 20px;
text-decoration: none;
}
.close:after {
content: '\00D7';
}
.hidden {
opacity: 0;
transition: opacity 0.5s linear;
}
views/clockviews/clock.css
+17 -12
View File
@@ -20,18 +20,6 @@ main {
height: 100vh;
}
#close {
position: absolute;
top: 10px;
right: 10px;
color: #333;
border-radius: 5px;
border: 2px solid #333;
padding: 5px;
width: 20px;
height: 20px;
}
.inner {
width: 100%;
-webkit-transform: translateY(-5%);
@@ -64,3 +52,20 @@ main {
#clock {
display: none;
}
.close {
color: white;
font: 4em 'Open Sans';
position: absolute;
right: 20px;
text-decoration: none;
}
.close:after {
content: '\00D7';
}
.hidden {
opacity: 0;
transition: opacity 0.5s linear;
}
views/clockviews/shared.html
+39 -6
View File
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
@@ -25,12 +26,12 @@
</head>
<body>
<a href="/"><div id="close">X</div></a>
<a href="/" id="closeButton" class="close"></a>
<main>
<div class="inner">
<div id="trend">
<div id="bgnow"></div>
<div id="arrowDiv"><img id="arrow" src="" alt="arrow"/></div>
<div id="arrowDiv"><img id="arrow" src="" alt="arrow" /></div>
</div>
<div id="clock"></div>
<div id="staleTime"></div>
@@ -43,7 +44,7 @@
var parts = (location.search || '?').substring(1).split('&');
var token = '';
parts.forEach(function (val) {
parts.forEach(function(val) {
if (val.startsWith('token=')) {
token = val.substring('token='.length);
}
@@ -59,12 +60,44 @@
}
var script = document.createElement('script');
script.onload = function () {
window.Nightscout.client.init( );
script.onload = function() {
window.Nightscout.client.init();
};
script.src = src;
document.head.appendChild(script); //or something of the likes
let buttonVisible = true;
function hideClose () {
document.getElementById('closeButton').classList.add('hidden');
buttonVisible = false;
}
// Show on start so user knows it's there
setTimeout(function() {
hideClose();
}, 2000);
function showClose () {
if (buttonVisible) return;
buttonVisible = true;
document.getElementById('closeButton').classList.remove('hidden');
setTimeout(function() {
hideClose();
}, 2000);
}
window.addEventListener('touchstart', function() {
showClose();
});
window.addEventListener('click', function() {
showClose();
});
</script>
</body>
</html>
</html>