From daa3e00adeb9da3debb8b7c4778cf8b0ac102854 Mon Sep 17 00:00:00 2001
From: Oliver Jowett <oliver@mutability.co.uk>
Date: Fri, 16 Sep 2016 12:40:06 +0100
Subject: [PATCH] Restyle/realign the sidebar/layer controls some more.

---
 public_html/index.html                |  8 ++++--
 public_html/ol3/ol3-layerswitcher.css |  6 ++---
 public_html/script.js                 |  6 ++---
 public_html/style.css                 | 38 ++++++++++++++++++---------
 4 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/public_html/index.html b/public_html/index.html
index 73f916b..8a61ddc 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -108,8 +108,12 @@
 			</div> <!-- selected_infoblock -->
 			<div id="map_container">
 				<div id="map_canvas"></div>
-				<a id="toggle_sidebar_button" class="hide_sidebar" href="#"></a>
-				<a id="expand_sidebar_button" href="#"></a>
+                                <div id="toggle_sidebar_control" class="ol-unselectable ol-control">
+                                  <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 id="sidebar_container">
 				<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
diff --git a/public_html/ol3/ol3-layerswitcher.css b/public_html/ol3/ol3-layerswitcher.css
index b3cb2e9..7e5ebc0 100644
--- a/public_html/ol3/ol3-layerswitcher.css
+++ b/public_html/ol3/ol3-layerswitcher.css
@@ -34,11 +34,11 @@
 
 .layer-switcher button {
     float: right;
-    width: 38px;
-    height: 38px;
+    width: 32px;
+    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-repeat: no-repeat;
-    background-position: 2px;
+    background-position: 0px;
     background-color: transparent;
     border: none;
 }
diff --git a/public_html/script.js b/public_html/script.js
index 4bf3f8f..8a1163b 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -1140,7 +1140,7 @@ function updateMapSize() {
 function toggleSidebarVisibility(e) {
     e.preventDefault();
     $("#sidebar_container").toggle();
-    $("#expand_sidebar_button").toggle();
+    $("#expand_sidebar_control").toggle();
     $("#toggle_sidebar_button").toggleClass("show_sidebar");
     $("#toggle_sidebar_button").toggleClass("hide_sidebar");
     updateMapSize();
@@ -1149,7 +1149,7 @@ function toggleSidebarVisibility(e) {
 function expandSidebar(e) {
     e.preventDefault();
     $("#map_container").hide()
-    $("#toggle_sidebar_button").hide();
+    $("#toggle_sidebar_control").hide();
     $("#splitter").hide();
     $("#sudo_buttons").hide();
     $("#show_map_button").show();
@@ -1161,7 +1161,7 @@ function expandSidebar(e) {
 
 function showMap() {
     $("#map_container").show()
-    $("#toggle_sidebar_button").show();
+    $("#toggle_sidebar_control").show();
     $("#splitter").show();
     $("#sudo_buttons").show();
     $("#show_map_button").hide();
diff --git a/public_html/style.css b/public_html/style.css
index 2fc247d..ef1e885 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -32,15 +32,22 @@ html, body {
     height: 100%;
 }
 
-#toggle_sidebar_button {  
+#toggle_sidebar_control {
     display: block;
-    width: 24px;
-    height: 20px;
     position: absolute;
     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 {
@@ -59,15 +66,22 @@ html, body {
     background-image: url("images/hide_sidebar_active_48x40.png");
 }
 
-#expand_sidebar_button {  
+#expand_sidebar_control {
     display: block;
-    width: 24px;
-    height: 20px;
     position: absolute;
-    top: 36px;
-    right: 20px;
+    top: 48px;
+    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 {
@@ -185,6 +199,6 @@ select.error, textarea.error, input.error {
 }
 
 .layer-switcher {
-    top: 62px !important;
+    top: 86px !important;
     right: 10px !important;
 }