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

Restyle/realign the sidebar/layer controls some more.

Browse source
This commit is contained in:
Oliver Jowett 2016-09-16 12:40:06 +01:00
parent 2a708ef848
commit daa3e00ade
4 changed files with 38 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public_html/index.html
View file

@ -108,8 +108,12 @@
</div> <!-- selected_infoblock --> </div> <!-- selected_infoblock -->
<div id="map_container"> <div id="map_container">
<div id="map_canvas"></div> <div id="map_canvas"></div>
<a id="toggle_sidebar_button" class="hide_sidebar" href="#"></a> <div id="toggle_sidebar_control" class="ol-unselectable ol-control">
<a id="expand_sidebar_button" href="#"></a> <button id="toggle_sidebar_button" class="hide_sidebar" title="Toggle Sidebar"></button>
</div>
<div id="expand_sidebar_control" class="ol-unselectable ol-control">
<button id="expand_sidebar_button" title="Expand Sidebar"></button>
</div>
</div> </div>
<div id="sidebar_container"> <div id="sidebar_container">
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div> <div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>

6
public_html/ol3/ol3-layerswitcher.css
View file

@ -34,11 +34,11 @@
.layer-switcher button { .layer-switcher button {
float: right; float: right;
width: 38px; width: 32px;
height: 38px; height: 32px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==') /*logo.png*/; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==') /*logo.png*/;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 2px; background-position: 0px;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }

6
public_html/script.js
View file

@ -1140,7 +1140,7 @@ function updateMapSize() {
function toggleSidebarVisibility(e) { function toggleSidebarVisibility(e) {
e.preventDefault(); e.preventDefault();
$("#sidebar_container").toggle(); $("#sidebar_container").toggle();
$("#expand_sidebar_button").toggle(); $("#expand_sidebar_control").toggle();
$("#toggle_sidebar_button").toggleClass("show_sidebar"); $("#toggle_sidebar_button").toggleClass("show_sidebar");
$("#toggle_sidebar_button").toggleClass("hide_sidebar"); $("#toggle_sidebar_button").toggleClass("hide_sidebar");
updateMapSize(); updateMapSize();
@ -1149,7 +1149,7 @@ function toggleSidebarVisibility(e) {
function expandSidebar(e) { function expandSidebar(e) {
e.preventDefault(); e.preventDefault();
$("#map_container").hide() $("#map_container").hide()
$("#toggle_sidebar_button").hide(); $("#toggle_sidebar_control").hide();
$("#splitter").hide(); $("#splitter").hide();
$("#sudo_buttons").hide(); $("#sudo_buttons").hide();
$("#show_map_button").show(); $("#show_map_button").show();
@ -1161,7 +1161,7 @@ function expandSidebar(e) {
function showMap() { function showMap() {
$("#map_container").show() $("#map_container").show()
$("#toggle_sidebar_button").show(); $("#toggle_sidebar_control").show();
$("#splitter").show(); $("#splitter").show();
$("#sudo_buttons").show(); $("#sudo_buttons").show();
$("#show_map_button").hide(); $("#show_map_button").hide();

38
public_html/style.css
View file

@ -32,15 +32,22 @@ html, body {
height: 100%; height: 100%;
} }
#toggle_sidebar_button { #toggle_sidebar_control {
display: block; display: block;
width: 24px;
height: 20px;
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 20px; right: 10px;
}
background-size: 24px 20px; #toggle_sidebar_button {
float: right;
width: 32px;
height: 28px;
background-size: 32px 28px;
background-repeat: no-repeat;
background-position: 0px;
background-color: transparent;
border: none;
} }
#toggle_sidebar_button.show_sidebar { #toggle_sidebar_button.show_sidebar {
@ -59,15 +66,22 @@ html, body {
background-image: url("images/hide_sidebar_active_48x40.png"); background-image: url("images/hide_sidebar_active_48x40.png");
} }
#expand_sidebar_button { #expand_sidebar_control {
display: block; display: block;
width: 24px;
height: 20px;
position: absolute; position: absolute;
top: 36px; top: 48px;
right: 20px; right: 10px;
}
background-size: 24px 20px; #expand_sidebar_button {
float: right;
width: 32px;
height: 28px;
background-size: 32px 28px;
background-repeat: no-repeat;
background-position: 0px;
background-color: transparent;
border: none;
} }
#expand_sidebar_button { #expand_sidebar_button {
@ -185,6 +199,6 @@ select.error, textarea.error, input.error {
} }
.layer-switcher { .layer-switcher {
top: 62px !important; top: 86px !important;
right: 10px !important; right: 10px !important;
} }