Changed three day plan display to remove animation, use full screen width

This commit is contained in:
Jason Williams 2018-08-20 20:50:44 -06:00
parent a8765be426
commit 092500415e

View File

@ -47,10 +47,10 @@
#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%);}
#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 div {width: 12.5vw; float: left; border-left: 1px solid #FFFFFF;}
#plan #plantitle {width: 7.5vw; padding: 0 1%; border-left: 0; text-align: left; color: #71C5E8;}
#plan div {width: 30vw; float: left; border-left: 1px solid #FFFFFF;}
#plan #plantitle {width: 10vw; padding: 0 1%; border-left: 0; text-align: left; color: #71C5E8;}
</style>
<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>
@ -80,14 +80,6 @@
}, 900000);
});
$(window).focus(function() {
$('#plan').delay(500).animate({left: 0}, 500);
});
$(window).blur(function() {
$('#plan').css({left: '-45vw'});
});
function updateLocation() {
$.getJSON('?location', function(data) {
$('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');
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(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(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(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()] + ": " + 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()] + ": " + data.find(x => x.start.date == getYMDstring(d3)).summary); else $('#d3').html(days[d3.getDay()] + ": <i>No Plan</i>");
});
}