diff --git a/public_html/gmap.html b/public_html/gmap.html index 78bfd77..e6462bf 100644 --- a/public_html/gmap.html +++ b/public_html/gmap.html @@ -13,12 +13,17 @@
-

Dump1090 - 00:00:00 UTC

+

Dump1090 - 00:00:00 UTC

Click on a plane for info.

- +
[Settings]
+
+

Settings

+ + +
diff --git a/public_html/script.js b/public_html/script.js index 9a3186d..96b3926 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -363,17 +363,25 @@ function printTime() { } } -function placeFooter() { - var windHeight = $(window).height(); - var footerHeight = $('#info_footer').height(); - var offset = parseInt(windHeight) - parseInt(footerHeight); +function placeSettings() { + // Settings link + var marginLeft = $('#header').width() - $('#info_settings').width(); + $('#info_settings').css('left', marginLeft); + $('#info_settings').css('top', parseInt($('#utcTime').offset().top)); - var footerWidth = parseInt($('#info_footer').width()); - var infoWidth = parseInt($('#info').width()); - var marginLeft = parseInt((infoWidth / 2) - (footerWidth / 2)); - - $('#info_footer').css('top', offset); - $('#info_footer').css('margin-left', marginLeft); + // Settings area + $('#info_settings_area').css('top', parseInt($('#geninfo').offset().top)); + $('#info_settings_area').css('left', 5); + $('#info_settings_area').css('width', parseInt($('#info').width() - 40)); +} + +function toggleSettings() { + if ($('#info_settings_area').css('display') != 'none') { + $('#info_settings_area').hide(350); + } else { + // Open settings + $('#info_settings_area').show(350); + } } function resetMap() { @@ -381,7 +389,8 @@ function resetMap() { localStorage['CenterLon'] = 9.0; localStorage['ZoomLvl'] = 5; Map.setZoom(parseInt(localStorage['ZoomLvl'])); - Map.setCenter(new google.maps.LatLng(parseInt(localStorage['CenterLat']), parseInt(localStorage['CenterLon']))); + Map.setCenter(new google.maps.LatLng(parseInt(localStorage['CenterLat']), + parseInt(localStorage['CenterLon']))); Selected = null; refreshSelectedInfo(); } @@ -413,14 +422,14 @@ function initialize() { maxZoom: 18 })); - // show footer at info-area + // show settings at info-area $(function(){ $(window).resize(function(e){ - placeFooter(); + placeSettings(); }); - placeFooter(); + placeSettings(); // hide it before it's positioned - $('#info_footer').css('display','inline'); + $('#info_settings').css('display','inline'); }); // Listener for newly created Map diff --git a/public_html/style.css b/public_html/style.css index 72324b2..db2e481 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -1,49 +1,68 @@ html { height: 100%; } body { height: 100%; margin: 0; padding: 0; font-size: small;} a { color: blue; } + #map_canvas { -height: 100%; -margin-right:390px; + height: 100%; + margin-right: 390px; } + #info { -position: absolute; -width:390px; -height:100%; -bottom:0px; -right:0px; -top:0px; -background-color: white; -border-left:1px #666 solid; -font-family:Helvetica; + position: absolute; + width: 390px; + height: 100%; + bottom: 0px; + right: 0px; + top: 0px; + background-color: white; + border-left: 1px #666 solid; + font-family: Helvetica, Sans-serif, Arial; } + #info div { -padding:0px; -padding-left:10px; -padding-right:10px; -margin:0px; + padding: 0px; + padding-left: 10px; + padding-right: 10px; + margin: 0px; } + #info div h1 { -margin-top:10px; -font-size:16px; + margin-top: 10px; + font-size: 16px; } -#info_footer { -position: absolute; -display: none; -text-align: center; -padding:0px; -margin:0px; + +#info div h2 { + margin-top: 10px; + font-size: 14px; } + +#info_settings { + position: absolute; + display: none; +} + +#info_settings_area { + position: absolute; + display: none; + background-color: white; + border: 1px solid gray; +} + #tabinfo{ -height: 400px; -overflow-y: auto; + height: 400px; + overflow-y: auto; } + #tableinfo { -font-size: x-small; -font-family: monospace; + font-size: x-small; + font-family: monospace; } + #tableinforow { -cursor: pointer; + cursor: pointer; + } + #tableinforow .bold { -font-weight:bold; + font-weight:bold; }