Added map deactivated message
Keith Irwin
parent
deff30f079
commit
ba8e75cf63
|
|
@ -1 +1 @@
|
|||
.container,.container:after,.container:before,.fa,div,footer{box-sizing:border-box}body,input,textarea{padding:0;margin:0;font-family:'Open Sans',sans-serif;font-size:18px;color:#eee}body{background-color:#080808}::-webkit-scrollbar{width:5vw;min-width:10px;max-width:40px}::-webkit-scrollbar-track{background-color:#080808;background-color:rgba(8,8,8,0)}::-webkit-scrollbar-thumb{border-radius:.2vw;background:#333}::selection{background:#999}::-moz-selection{background:#999}main{top:59px;position:absolute;left:0;right:0;bottom:0;overflow-y:auto}.container{padding-right:5%;padding-left:5%;width:100%;margin:0 auto}.container:after{content:"";display:block;clear:both}section{padding:10vh 0 5vh}h1,h2,h3{margin:0 0 5% 0;position:relative;z-index:6}h1,h2,h3,h4{font-weight:600}h1{font-size:48px;line-height:46px}h2{font-size:40px;line-height:36px}h3{font-size:28px}h4{font-size:20px}main ul,p{margin-top:0;margin-bottom:5vh}hr{width:90%;margin:10% auto}img{max-width:100%}p img{display:block;margin:auto}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}a{color:#fbc93d;text-decoration:none}main a:hover:not(.btn){color:#fbc93d;text-decoration:underline}a.underline{text-decoration:underline}a.underline:hover:not(.btn){text-decoration:none}.hide{display:none!important}.red,.red:hover{color:#fb6e3d!important}.yellow,.yellow:hover{color:#fbc93d!important}.green,.green:hover{color:#8ae137!important}.inline{display:inline}.inline-block{display:inline-block}.shadow{-moz-box-shadow:.18vw .18vw .36vw #000;-webkit-box-shadow:.18vw .18vw .36vw #000;box-shadow:.18vw .18vw .36vw #000}.shadow:active{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.inline{display:inline-block}.flex{width:100%;display:flex;justify-content:space-around}.flex.stretch{justify-content:space-between}.left{float:left}.right{float:right}.btn{font-weight:600;display:inline-block;padding:15px 30px;background:rgba(255,255,255,.1);color:#eee;border-radius:.5vw}.btn:not(:disabled){border:1px solid #666;transition:.1s;cursor:pointer;-moz-box-shadow:inset .11vw .18vw .52vw rgba(255,255,255,.2),inset -.11vw -.18vw .52vw rgba(0,0,0,.4),.1vw .1vw .52vw #000;-webkit-box-shadow:inset .11vw .18vw .52vw rgba(255,255,255,.2),inset -.11vw -.18vw .52vw rgba(0,0,0,.4),.1vw .1vw .36vw #000;box-shadow:inset .11vw .18vw .52vw rgba(255,255,255,.2),inset -.11vw -.18vw .52vw rgba(0,0,0,.4),.1vw .1vw .36vw #000}.btn:disabled{color:#aaa;border:1px solid #444}.btn:hover:not(:disabled){text-decoration:none;background:rgba(255,255,255,.2)}.btn:active:not(:disabled){-moz-box-shadow:inset .11vw .18vw .52vw rgba(0,0,0,.4),inset -.11vw -.18vw .52vw rgba(255,255,255,.2);-webkit-box-shadow:inset .11vw .18vw .52vw rgba(0,0,0,.4),inset -.11vw -.18vw .52vw rgba(255,255,255,.2);box-shadow:inset .11vw .18vw .52vw rgba(0,0,0,.4),inset -.11vw -.18vw .52vw rgba(255,255,255,.2)}.btn:focus:not(:disabled){border:1px solid #fbc93d}.btn.main:not(:disabled){color:#fbc93d}.btn .fa{margin-left:10px}.popup{background:#111;padding:4vh 4vw;border-radius:3vh;z-index:1000;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-moz-box-shadow:.5vh .4vh 1vh .1vh #000;-webkit-box-shadow:.5vh .4vh 1vh .1vh #000;box-shadow:.5vh .4vh 1vh .1vh #000}.popup .topbar,.popup p{margin:0 0 6vh 0}.popup .topbar{display:flex;justify-content:space-between;margin:0 0 3vh 0}.popup p{margin:0 0 3vh 0}.popup .close{cursor:pointer}.popup .buttons{display:flex;justify-content:space-around}.page-mask{z-index:950;background:rgba(0,0,0,.5);position:fixed;top:0;right:0;bottom:0;left:0}
|
||||
.container,.container:after,.container:before,.fa,div,footer{box-sizing:border-box}body,input,textarea{padding:0;margin:0;font-family:'Open Sans',sans-serif;font-size:18px;color:#eee}body{background-color:#080808}::-webkit-scrollbar{width:5vw;min-width:10px;max-width:40px}::-webkit-scrollbar-track{background-color:#080808;background-color:rgba(8,8,8,0)}::-webkit-scrollbar-thumb{border-radius:.2vw;background:#333}::selection{background:#999}::-moz-selection{background:#999}main{top:59px;position:absolute;left:0;right:0;bottom:0;overflow-y:auto}.container{padding-right:5%;padding-left:5%;width:100%;margin:0 auto}.container:after{content:"";display:block;clear:both}section{padding:10vh 0 5vh}h1,h2,h3{margin:0 0 5% 0;position:relative;z-index:6}h1,h2,h3,h4{font-weight:600}h1{font-size:48px;line-height:46px}h2{font-size:40px;line-height:36px}h3{font-size:28px}h4{font-size:20px}main ul,p{margin-top:0;margin-bottom:5vh}hr{width:90%;margin:10% auto}img{max-width:100%}p img{display:block;margin:auto}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}a{color:#fbc93d;text-decoration:none}main a:hover:not(.btn){color:#fbc93d;text-decoration:underline}a.underline{text-decoration:underline}a.underline:hover:not(.btn){text-decoration:none}.hide{display:none!important}.red,.red:hover{color:#fb6e3d!important}.yellow,.yellow:hover{color:#fbc93d!important}.green,.green:hover{color:#8ae137!important}.inline{display:inline}.inline-block{display:inline-block}.shadow{-moz-box-shadow:.18vw .18vw .36vw #000;-webkit-box-shadow:.18vw .18vw .36vw #000;box-shadow:.18vw .18vw .36vw #000}.shadow:active{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.inline{display:inline-block}.flex{width:100%;display:flex;justify-content:space-around}.flex.stretch{justify-content:space-between}.left{float:left}.right{float:right}.btn{font-weight:600;display:inline-block;padding:15px 30px;background:rgba(255,255,255,.1);color:#eee;border-radius:.5vw}.btn:not(:disabled){border:1px solid #666;transition:.1s;cursor:pointer;-moz-box-shadow:inset .11vw .18vw .52vw rgba(255,255,255,.2),inset -.11vw -.18vw .52vw rgba(0,0,0,.4),.1vw .1vw .52vw #000;-webkit-box-shadow:inset .11vw .18vw .52vw rgba(255,255,255,.2),inset -.11vw -.18vw .52vw rgba(0,0,0,.4),.1vw .1vw .36vw #000;box-shadow:inset .11vw .18vw .52vw rgba(255,255,255,.2),inset -.11vw -.18vw .52vw rgba(0,0,0,.4),.1vw .1vw .36vw #000}.btn:disabled{color:#aaa;border:1px solid #444}.btn:hover:not(:disabled){text-decoration:none;background:rgba(255,255,255,.2)}.btn:active:not(:disabled){-moz-box-shadow:inset .11vw .18vw .52vw rgba(0,0,0,.4),inset -.11vw -.18vw .52vw rgba(255,255,255,.2);-webkit-box-shadow:inset .11vw .18vw .52vw rgba(0,0,0,.4),inset -.11vw -.18vw .52vw rgba(255,255,255,.2);box-shadow:inset .11vw .18vw .52vw rgba(0,0,0,.4),inset -.11vw -.18vw .52vw rgba(255,255,255,.2)}.btn:focus:not(:disabled){border:1px solid #fbc93d}.btn.main:not(:disabled){color:#fbc93d}.btn .fa{margin-left:10px}.popup{background:#111;padding:4vh 4vw;border-radius:3vh;z-index:1000;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-moz-box-shadow:.5vh .4vh 1vh .1vh #000;-webkit-box-shadow:.5vh .4vh 1vh .1vh #000;box-shadow:.5vh .4vh 1vh .1vh #000}.popup .topbar,.popup p{margin:0 0 6vh 0}.popup .topbar{display:flex;justify-content:space-between;margin:0 0 3vh 0}.popup p{margin:0 0 3vh 0}.popup .close{cursor:pointer}.popup .buttons{display:flex;justify-content:space-around}.page-mask{display:none;z-index:950;background:rgba(0,0,0,.5);position:fixed;top:0;right:0;bottom:0;left:0}
|
||||
|
|
@ -221,6 +221,7 @@ a.underline:hover:not(.btn) {
|
|||
justify-content: space-around;
|
||||
}
|
||||
.page-mask {
|
||||
display: none;
|
||||
z-index: 950;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
window.matchMedia=window.matchMedia||function(e){"use strict";var t,n=e.documentElement,a=n.firstElementChild||n.firstChild,s=e.createElement("body"),i=e.createElement("div");return i.id="mq-test-1",i.style.cssText="position:absolute;top:-100em",s.style.background="none",s.appendChild(i),function(e){return i.innerHTML='­<style media="'+e+'"> #mq-test-1 { width: 42px; }</style>',n.insertBefore(s,a),t=42===i.offsetWidth,n.removeChild(s),{matches:t,media:e}}}(document),function(e){"use strict";function t(){E(!0)}var n={};if(e.respond=n,n.update=function(){},n.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches,!n.mediaQueriesSupported){var a,s,i,r=e.document,o=r.documentElement,l=[],d=[],m=[],h={},u=r.getElementsByTagName("head")[0]||o,c=r.getElementsByTagName("base")[0],p=u.getElementsByTagName("link"),f=[],y=function(){for(var t=0;p.length>t;t++){var n=p[t],a=n.href,s=n.media,i=n.rel&&"stylesheet"===n.rel.toLowerCase();a&&i&&!h[a]&&(n.styleSheet&&n.styleSheet.rawCssText?(g(n.styleSheet.rawCssText,a,s),h[a]=!0):(!/^([a-zA-Z:]*\/\/)/.test(a)&&!c||a.replace(RegExp.$1,"").split("/")[0]===e.location.host)&&f.push({href:a,media:s}))}v()},v=function(){if(f.length){var t=f.shift();w(t.href,function(n){g(n,t.href,t.media),h[t.href]=!0,e.setTimeout(function(){v()},0)})}},g=function(e,t,n){var a=e.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),s=a&&a.length||0;t=t.substring(0,t.lastIndexOf("/"));var i=function(e){return e.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+t+"$2$3")},r=!s&&n;t.length&&(t+="/"),r&&(s=1);for(var o=0;s>o;o++){var m,h,u,c;r?(m=n,d.push(i(e))):(m=a[o].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,d.push(RegExp.$2&&i(RegExp.$2))),c=(u=m.split(",")).length;for(var p=0;c>p;p++)h=u[p],l.push({media:h.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:d.length-1,hasquery:h.indexOf("(")>-1,minw:h.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:h.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}E()},x=function(){var e,t=r.createElement("div"),n=r.body,a=!1;return t.style.cssText="position:absolute;font-size:1em;width:1em",n||((n=a=r.createElement("body")).style.background="none"),n.appendChild(t),o.insertBefore(n,o.firstChild),e=t.offsetWidth,a?o.removeChild(n):n.removeChild(t),i=parseFloat(e)},E=function(t){var n="clientWidth",h=o[n],c="CSS1Compat"===r.compatMode&&h||r.body[n]||h,f={},y=p[p.length-1],v=(new Date).getTime();if(t&&a&&30>v-a)return e.clearTimeout(s),void(s=e.setTimeout(E,30));for(var g in a=v,l)if(l.hasOwnProperty(g)){var w=l[g],T=w.minw,C=w.maxw,S=null===T,$=null===C;T&&(T=parseFloat(T)*(T.indexOf("em")>-1?i||x():1)),C&&(C=parseFloat(C)*(C.indexOf("em")>-1?i||x():1)),w.hasquery&&(S&&$||!(S||c>=T)||!($||C>=c))||(f[w.media]||(f[w.media]=[]),f[w.media].push(d[w.rules]))}for(var b in m)m.hasOwnProperty(b)&&m[b]&&m[b].parentNode===u&&u.removeChild(m[b]);for(var R in f)if(f.hasOwnProperty(R)){var M=r.createElement("style"),O=f[R].join("\n");M.type="text/css",M.media=R,u.insertBefore(M,y.nextSibling),M.styleSheet?M.styleSheet.cssText=O:M.appendChild(r.createTextNode(O)),m.push(M)}},w=function(e,t){var n=T();n&&(n.open("GET",e,!0),n.onreadystatechange=function(){4!==n.readyState||200!==n.status&&304!==n.status||t(n.responseText)},4!==n.readyState&&n.send(null))},T=function(){var t=!1;try{t=new e.XMLHttpRequest}catch(n){t=new e.ActiveXObject("Microsoft.XMLHTTP")}return function(){return t}}();y(),n.update=y,e.addEventListener?e.addEventListener("resize",t,!1):e.attachEvent&&e.attachEvent("onresize",t)}}(this);
|
||||
window.matchMedia=window.matchMedia||function(e){"use strict";var t,n=e.documentElement,a=n.firstElementChild||n.firstChild,s=e.createElement("body"),i=e.createElement("div");return i.id="mq-test-1",i.style.cssText="position:absolute;top:-100em",s.style.background="none",s.appendChild(i),function(e){return i.innerHTML='­<style media="'+e+'"> #mq-test-1 { width: 42px; }</style>',n.insertBefore(s,a),t=42===i.offsetWidth,n.removeChild(s),{matches:t,media:e}}}(document),function(e){"use strict";function t(){E(!0)}var n={};if(e.respond=n,n.update=function(){},n.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches,!n.mediaQueriesSupported){var a,s,i,r=e.document,o=r.documentElement,l=[],d=[],m=[],h={},u=r.getElementsByTagName("head")[0]||o,c=r.getElementsByTagName("base")[0],p=u.getElementsByTagName("link"),f=[],y=function(){for(var t=0;p.length>t;t++){var n=p[t],a=n.href,s=n.media,i=n.rel&&"stylesheet"===n.rel.toLowerCase();a&&i&&!h[a]&&(n.styleSheet&&n.styleSheet.rawCssText?(g(n.styleSheet.rawCssText,a,s),h[a]=!0):(!/^([a-zA-Z:]*\/\/)/.test(a)&&!c||a.replace(RegExp.$1,"").split("/")[0]===e.location.host)&&f.push({href:a,media:s}))}v()},v=function(){if(f.length){var t=f.shift();w(t.href,function(n){g(n,t.href,t.media),h[t.href]=!0,e.setTimeout(function(){v()},0)})}},g=function(e,t,n){var a=e.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),s=a&&a.length||0,i=function(e){return e.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+t+"$2$3")},r=!s&&n;(t=t.substring(0,t.lastIndexOf("/"))).length&&(t+="/"),r&&(s=1);for(var o=0;s>o;o++){var m,h,u,c;r?(m=n,d.push(i(e))):(m=a[o].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,d.push(RegExp.$2&&i(RegExp.$2))),c=(u=m.split(",")).length;for(var p=0;c>p;p++)h=u[p],l.push({media:h.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:d.length-1,hasquery:h.indexOf("(")>-1,minw:h.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:h.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}E()},x=function(){var e,t=r.createElement("div"),n=r.body,a=!1;return t.style.cssText="position:absolute;font-size:1em;width:1em",n||((n=a=r.createElement("body")).style.background="none"),n.appendChild(t),o.insertBefore(n,o.firstChild),e=t.offsetWidth,a?o.removeChild(n):n.removeChild(t),i=parseFloat(e)},E=function(t){var n="clientWidth",h=o[n],c="CSS1Compat"===r.compatMode&&h||r.body[n]||h,f={},y=p[p.length-1],v=(new Date).getTime();if(t&&a&&30>v-a)return e.clearTimeout(s),void(s=e.setTimeout(E,30));for(var g in a=v,l)if(l.hasOwnProperty(g)){var w=l[g],T=w.minw,C=w.maxw,S=null===T,$=null===C;T&&(T=parseFloat(T)*(T.indexOf("em")>-1?i||x():1)),C&&(C=parseFloat(C)*(C.indexOf("em")>-1?i||x():1)),w.hasquery&&(S&&$||!(S||c>=T)||!($||C>=c))||(f[w.media]||(f[w.media]=[]),f[w.media].push(d[w.rules]))}for(var b in m)m.hasOwnProperty(b)&&m[b]&&m[b].parentNode===u&&u.removeChild(m[b]);for(var R in f)if(f.hasOwnProperty(R)){var M=r.createElement("style"),O=f[R].join("\n");M.type="text/css",M.media=R,u.insertBefore(M,y.nextSibling),M.styleSheet?M.styleSheet.cssText=O:M.appendChild(r.createTextNode(O)),m.push(M)}},w=function(e,t){var n=T();n&&(n.open("GET",e,!0),n.onreadystatechange=function(){4!==n.readyState||200!==n.status&&304!==n.status||t(n.responseText)},4!==n.readyState&&n.send(null))},T=function(){var t=!1;try{t=new e.XMLHttpRequest}catch(n){t=new e.ActiveXObject("Microsoft.XMLHTTP")}return function(){return t}}();y(),n.update=y,e.addEventListener?e.addEventListener("resize",t,!1):e.attachEvent&&e.attachEvent("onresize",t)}}(this);
|
||||
|
|
@ -24,12 +24,16 @@ window.setInterval( function CheckIdleTime () {
|
|||
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
|
||||
if (socket.connected) {
|
||||
console.log('Disconnecting because idle for more than',IDLE_TIMEOUT,'seconds.')
|
||||
$('#inactive-mask').show()
|
||||
$('#inactive-message').show()
|
||||
socket.disconnect()
|
||||
}
|
||||
// Connect user if disconnected
|
||||
} else {
|
||||
if (!socket.connected) {
|
||||
console.log('Reconnecting the user because they are no longer idle.')
|
||||
$('#inactive-mask').hide()
|
||||
$('#inactive-message').hide()
|
||||
socket.connect()
|
||||
}
|
||||
}
|
||||
|
|
@ -382,6 +386,7 @@ function initMap() {
|
|||
console.error(err.stack)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Update street view
|
||||
|
|
@ -421,6 +426,7 @@ function initMap() {
|
|||
|
||||
// Update streetview
|
||||
function updateStreetView (loc) {
|
||||
|
||||
// Calculate bearing between user and position of streetview image
|
||||
// https://stackoverflow.com/a/26609687/3006854
|
||||
function getBearing (userLoc, imageLoc) {
|
||||
|
|
@ -454,6 +460,7 @@ function initMap() {
|
|||
'&key=' + mapKey
|
||||
)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// Error loading gmaps API
|
||||
|
|
|
|||
|
|
@ -43,20 +43,24 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div id='inactive-mask' class='page-mask'></div>
|
||||
<div id='inactive-message' class='popup' style="display:none">
|
||||
<p>The map has been deactivated due to inactivity. Move the mouse around the page to reactivate the map. </p>
|
||||
</div>
|
||||
|
||||
{% if user and user.isNewUser %}
|
||||
<div class='page-mask'></div>
|
||||
<div id='welcome-mask' class='page-mask' style="display:block"></div>
|
||||
<div id='welcome' class='popup'>
|
||||
|
||||
<div class='topbar'>
|
||||
<h2>Welcome!</h2>
|
||||
<div class='close' onclick="$('#welcome').hide();$('.page-mask').hide();">✖️</div>
|
||||
<div class='close' onclick="$('#welcome').hide();$('#welcome-mask').hide();">✖️</div>
|
||||
</div>
|
||||
|
||||
<p>This is your map. It's publicly avaliable at <a href="{{newuserurl}}">{{newuserurl}}</a>. You can change that URL and other settings in <b><a href="/settings">settings</a></b>. Set your location by clicking <b>set</b> below. Clear it by clicking <b>clear</b>. To track your location, click <b>track</b> or download the <a href="/android">android app</a>. For more information, see the <b><a href="/help">help</a></b> page. </p>
|
||||
|
||||
<div class='buttons'>
|
||||
<a class='btn main' onclick="$('#welcome').hide();$('.page-mask').hide();">Got it!</a>
|
||||
<a class='btn main' onclick="$('#welcome').hide();$('#welcome-mask').hide();">Got it!</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue