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> <p id="selinfo">Click on a plane for info.</p>
<div id="tabinfo"></div> <div id="tabinfo"></div>
</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> </div>
</body> </body>
</html> </html>

18
public_html/script.js
View file

@ -364,10 +364,24 @@ function printTime() {
} }
function placeSettings() { function placeSettings() {
$('#info_settings').css('top', parseInt($('#utcTime').offset().top)); // Settings link
var marginLeft = $('#header').width() - $('#info_settings').width(); var marginLeft = $('#header').width() - $('#info_settings').width();
$('#info_settings').css('left', marginLeft); $('#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() { function resetMap() {

72
public_html/style.css
View file

@ -1,46 +1,68 @@
html { height: 100%; } html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; font-size: small;} body { height: 100%; margin: 0; padding: 0; font-size: small;}
a { color: blue; } a { color: blue; }
#map_canvas { #map_canvas {
height: 100%; height: 100%;
margin-right:390px; margin-right: 390px;
} }
#info { #info {
position: absolute; position: absolute;
width:390px; width: 390px;
height:100%; height: 100%;
bottom:0px; bottom: 0px;
right:0px; right: 0px;
top:0px; top: 0px;
background-color: white; background-color: white;
border-left:1px #666 solid; border-left: 1px #666 solid;
font-family:Helvetica; font-family: Helvetica, Sans-serif, Arial;
} }
#info div { #info div {
padding:0px; padding: 0px;
padding-left:10px; padding-left: 10px;
padding-right:10px; padding-right: 10px;
margin:0px; margin: 0px;
} }
#info div h1 { #info div h1 {
margin-top:10px; margin-top: 10px;
font-size:16px; font-size: 16px;
} }
#info div h2 {
margin-top: 10px;
font-size: 14px;
}
#info_settings { #info_settings {
position: absolute; position: absolute;
display: none; display: none;
} }
#info_settings_area {
position: absolute;
display: none;
background-color: white;
border: 1px solid gray;
}
#tabinfo{ #tabinfo{
height: 400px; height: 400px;
overflow-y: auto; overflow-y: auto;
} }
#tableinfo { #tableinfo {
font-size: x-small; font-size: x-small;
font-family: monospace; font-family: monospace;
} }
#tableinforow { #tableinforow {
cursor: pointer; cursor: pointer;
} }
#tableinforow .bold { #tableinforow .bold {
font-weight:bold; font-weight:bold;
} }