Changed three day plan display to remove animation, use full screen width
This commit is contained in:
parent
a8765be426
commit
092500415e
@ -47,10 +47,10 @@
|
|||||||
#map {width: 100; height: 100%;}
|
#map {width: 100; height: 100%;}
|
||||||
#container {position: absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(139,51,175,0.8) 0%, rgba(0,131,214,0.8) 100%), radial-gradient(ellipse at center, rgba(255,255,255,0) 35%, rgba(255,255,255,1) 95%);}
|
#container {position: absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(139,51,175,0.8) 0%, rgba(0,131,214,0.8) 100%), radial-gradient(ellipse at center, rgba(255,255,255,0) 35%, rgba(255,255,255,1) 95%);}
|
||||||
#centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
|
#centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
|
||||||
#plan {position: absolute; bottom: 2vh; left: -45vw; font-size: 1vw; color: #FFFFFF; background-color: #000000; opacity: 0.8;}
|
#plan {position: absolute; bottom: 0; font-size: 1vw; color: #FFFFFF; background-color: #000000; opacity: 0.8;}
|
||||||
#plan::after{content: ""; clear: both; display: table;}
|
#plan::after{content: ""; clear: both; display: table;}
|
||||||
#plan div {width: 12.5vw; float: left; border-left: 1px solid #FFFFFF;}
|
#plan div {width: 30vw; float: left; border-left: 1px solid #FFFFFF;}
|
||||||
#plan #plantitle {width: 7.5vw; padding: 0 1%; border-left: 0; text-align: left; color: #71C5E8;}
|
#plan #plantitle {width: 10vw; padding: 0 1%; border-left: 0; text-align: left; color: #71C5E8;}
|
||||||
</style>
|
</style>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||||
<script src="https://maps.googleapis.com/maps/api/js?key=&AIzaSyCo79O07nOpWmdxKBUdgslJRrBwYSykDxwv=3.exp"></script>
|
<script src="https://maps.googleapis.com/maps/api/js?key=&AIzaSyCo79O07nOpWmdxKBUdgslJRrBwYSykDxwv=3.exp"></script>
|
||||||
@ -80,14 +80,6 @@
|
|||||||
}, 900000);
|
}, 900000);
|
||||||
});
|
});
|
||||||
|
|
||||||
$(window).focus(function() {
|
|
||||||
$('#plan').delay(500).animate({left: 0}, 500);
|
|
||||||
});
|
|
||||||
|
|
||||||
$(window).blur(function() {
|
|
||||||
$('#plan').css({left: '-45vw'});
|
|
||||||
});
|
|
||||||
|
|
||||||
function updateLocation() {
|
function updateLocation() {
|
||||||
$.getJSON('?location', function(data) {
|
$.getJSON('?location', function(data) {
|
||||||
$('h1').html((data.state == 'not_home') ? 'Nobody Knows' : 'At ' + data.state.replace(/^\w/, c => c.toUpperCase()));
|
$('h1').html((data.state == 'not_home') ? 'Nobody Knows' : 'At ' + data.state.replace(/^\w/, c => c.toUpperCase()));
|
||||||
@ -105,9 +97,9 @@
|
|||||||
|
|
||||||
$('#plantitle').html('Three Day Plan');
|
$('#plantitle').html('Three Day Plan');
|
||||||
|
|
||||||
if (data.find(x => x.start.date == getYMDstring(d1))) $('#d1').html(days[d1.getDay()] + "<br>" + data.find(x => x.start.date == getYMDstring(d1)).summary); else $('#d1').html(days[d1.getDay()] + "<br><i>No Plan</i>");
|
if (data.find(x => x.start.date == getYMDstring(d1))) $('#d1').html(days[d1.getDay()] + ": " + data.find(x => x.start.date == getYMDstring(d1)).summary); else $('#d1').html(days[d1.getDay()] + ": <i>No Plan</i>");
|
||||||
if (data.find(x => x.start.date == getYMDstring(d2))) $('#d2').html(days[d2.getDay()] + "<br>" + data.find(x => x.start.date == getYMDstring(d2)).summary); else $('#d2').html(days[d2.getDay()] + "<br><i>No Plan</i>");
|
if (data.find(x => x.start.date == getYMDstring(d2))) $('#d2').html(days[d2.getDay()] + ": " + data.find(x => x.start.date == getYMDstring(d2)).summary); else $('#d2').html(days[d2.getDay()] + ": <i>No Plan</i>");
|
||||||
if (data.find(x => x.start.date == getYMDstring(d3))) $('#d3').html(days[d3.getDay()] + "<br>" + data.find(x => x.start.date == getYMDstring(d3)).summary); else $('#d3').html(days[d3.getDay()] + "<br><i>No Plan</i>");
|
if (data.find(x => x.start.date == getYMDstring(d3))) $('#d3').html(days[d3.getDay()] + ": " + data.find(x => x.start.date == getYMDstring(d3)).summary); else $('#d3').html(days[d3.getDay()] + ": <i>No Plan</i>");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user