From 2d1325f014a20018b4b5bdf0f5758686b05da3be Mon Sep 17 00:00:00 2001 From: terribl Date: Tue, 21 May 2013 09:47:58 +0300 Subject: [PATCH 1/3] Changing info_footer to info_settings. Location from footer to top right hand corner. modified: public_html/gmap.html modified: public_html/script.js modified: public_html/style.css --- public_html/gmap.html | 2 +- public_html/script.js | 26 +++++++++++--------------- public_html/style.css | 9 +++------ 3 files changed, 15 insertions(+), 22 deletions(-) diff --git a/public_html/gmap.html b/public_html/gmap.html index 78bfd77..a197601 100644 --- a/public_html/gmap.html +++ b/public_html/gmap.html @@ -18,7 +18,7 @@

Click on a plane for info.

- +
[Settings]
diff --git a/public_html/script.js b/public_html/script.js index 9a3186d..4d6c9fd 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -363,17 +363,12 @@ function printTime() { } } -function placeFooter() { - var windHeight = $(window).height(); - var footerHeight = $('#info_footer').height(); - var offset = parseInt(windHeight) - parseInt(footerHeight); +function placeSettings() { + $('#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); + var marginLeft = $('#info').width() - $('#info_settings').width(); + marginLeft -= parseInt($('#info_settings').width() / 3); // Little air around + $('#info_settings').css('left', marginLeft); } function resetMap() { @@ -381,7 +376,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 +409,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..dd6835f 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -26,12 +26,9 @@ margin:0px; margin-top:10px; font-size:16px; } -#info_footer { -position: absolute; -display: none; -text-align: center; -padding:0px; -margin:0px; +#info_settings { +position: absolute; +display: none; } #tabinfo{ height: 400px; From 0ee5cdb5de72e3a3c4cdbf9157438f0e5c8e44dc Mon Sep 17 00:00:00 2001 From: terribl Date: Tue, 21 May 2013 11:43:08 +0300 Subject: [PATCH 2/3] Fixed a bug on Settings-link placement --- public_html/gmap.html | 2 +- public_html/script.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/public_html/gmap.html b/public_html/gmap.html index a197601..6bdd622 100644 --- a/public_html/gmap.html +++ b/public_html/gmap.html @@ -13,7 +13,7 @@
-

Dump1090 - 00:00:00 UTC

+

Dump1090 - 00:00:00 UTC

Click on a plane for info.

diff --git a/public_html/script.js b/public_html/script.js index 4d6c9fd..ba89a47 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -366,8 +366,7 @@ function printTime() { function placeSettings() { $('#info_settings').css('top', parseInt($('#utcTime').offset().top)); - var marginLeft = $('#info').width() - $('#info_settings').width(); - marginLeft -= parseInt($('#info_settings').width() / 3); // Little air around + var marginLeft = $('#header').width() - $('#info_settings').width(); $('#info_settings').css('left', marginLeft); } From 0dfc083aa539aa9a0d2a32eba20703335e9b1713 Mon Sep 17 00:00:00 2001 From: terribl Date: Tue, 21 May 2013 15:19:36 +0300 Subject: [PATCH 3/3] New settings area New settings area can be opened by clicking Settings-link and closed by same link or OK-button. No settings to change yet. modified: public_html/gmap.html modified: public_html/script.js modified: public_html/style.css --- public_html/gmap.html | 7 ++++- public_html/script.js | 18 +++++++++-- public_html/style.css | 72 ++++++++++++++++++++++++++++--------------- 3 files changed, 69 insertions(+), 28 deletions(-) diff --git a/public_html/gmap.html b/public_html/gmap.html index 6bdd622..e6462bf 100644 --- a/public_html/gmap.html +++ b/public_html/gmap.html @@ -18,7 +18,12 @@

Click on a plane for info.

- + +
+

Settings

+ + +
diff --git a/public_html/script.js b/public_html/script.js index ba89a47..96b3926 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -364,10 +364,24 @@ function printTime() { } function placeSettings() { - $('#info_settings').css('top', parseInt($('#utcTime').offset().top)); - + // Settings link var marginLeft = $('#header').width() - $('#info_settings').width(); $('#info_settings').css('left', marginLeft); + $('#info_settings').css('top', parseInt($('#utcTime').offset().top)); + + // 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() { diff --git a/public_html/style.css b/public_html/style.css index dd6835f..db2e481 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -1,46 +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 div h2 { + margin-top: 10px; + font-size: 14px; +} + #info_settings { -position: absolute; -display: none; + 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; }