AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

New settings area

Browse source 
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
This commit is contained in:
terribl 2013-05-21 15:19:36 +03:00
parent 0ee5cdb5de
commit 0dfc083aa5
3 changed files with 69 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
public_html/gmap.html
View file

@ -18,7 +18,12 @@
<p id="selinfo">Click on a plane for info.</p>
<div id="tabinfo"></div>
</div>
<div id="info_settings">[<a href="#" onClick="#resetMap();">Settings</a>]</div>
<div id="info_settings">[<a href="#" onClick="toggleSettings();">Settings</a>]</div>
<div id="info_settings_area">
<h2>Settings</h2>
<input type="button" value="Reset Map" onClick="resetMap();toggleSettings();">
<input type="button" value="OK" style="position:absolute;bottom:0;right:2px;" onClick="toggleSettings();">
</div>
</div>
</body>
</html>

18
public_html/script.js
View file

@ -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() {

24
public_html/style.css
View file

@ -1,10 +1,12 @@
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; font-size: small;}
a { color: blue; }
#map_canvas {
height: 100%;
margin-right: 390px;
}
#info {
position: absolute;
width: 390px;
@ -14,33 +16,53 @@ right:0px;
top: 0px;
background-color: white;
border-left: 1px #666 solid;
font-family:Helvetica;
font-family: Helvetica, Sans-serif, Arial;
}
#info div {
padding: 0px;
padding-left: 10px;
padding-right: 10px;
margin: 0px;
}
#info div h1 {
margin-top: 10px;
font-size: 16px;
}
#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;
}
#tableinfo {
font-size: x-small;
font-family: monospace;
}
#tableinforow {
cursor: pointer;
}
#tableinforow .bold {
font-weight:bold;
}