Made the sidebar use clicking instead of hovering for mobile devices.

web/css/dynmap_style.css

@@ -159,12 +159,6 @@
     color: #fff;
 
     border-left: 1px solid rgba(0,0,0,0.5);
-
-    -moz-transition: all 0.6s ease-in-out;
-    -webkit-transition: all 0.6s ease-in-out;
-    -o-transition: all 0.6s ease-in-out;
-
-    transition: all 0.6s ease-in-out;
 }
 
 .dynmap .hitbar {
@@ -186,26 +180,43 @@
     background-position:center;
 
     border: 1px solid rgba(0,0,0,0.5);
-
-    -moz-transition: all 0.6s ease-in-out;
-    -webkit-transition: all 0.6s ease-in-out;
-    -o-transition: all 0.6s ease-in-out;
-
-    transition: all 0.6s ease-in-out;
 }
 
 /* magic and metrics */
 
-.dynmap .sidebar:hover,
+/* The following only applies to desktops, not to mobile devices */
+@media screen and (min-device-width: 640px) {
+    .dynmap .sidebar {
+        -moz-transition: all 0.6s ease-in-out;
+        -webkit-transition: all 0.6s ease-in-out;
+        -o-transition: all 0.6s ease-in-out;
+        transition: all 0.6s ease-in-out;
+    }
+
+    .dynmap .hitbar {
+        -moz-transition: all 0.6s ease-in-out;
+        -webkit-transition: all 0.6s ease-in-out;
+        -o-transition: all 0.6s ease-in-out;
+        transition: all 0.6s ease-in-out;
+    }
+
+    .dynmap .sidebar:hover {
+        margin-right: 0px;
+    }
+
+    .dynmap .sidebar < .hitbar:hover {
+        margin-right: 0px;
+    }
+
+    .dynmap .sidebar:hover .hitbar {
+        right: -120px;
+    }
+}
+
 .dynmap .sidebar.pinned {
     margin-right: 0px;
 }
 
-.dynmap .sidebar < .hitbar:hover {
-    margin-right: 0px;
-}
-
-.dynmap .sidebar:hover .hitbar,
 .dynmap .sidebar.pinned .hitbar {
     right: -120px;
 }

web/index.html

@@ -7,7 +7,7 @@
 	<meta charset="utf-8" />
 	<meta name="keywords" content="minecraft, map, dynamic" />
 	<meta name="description" content="Minecraft Dynamic Map" />
-	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
 	<!-- These 2 lines make us fullscreen on apple mobile products - remove if you don't like that -->
 	<meta name="apple-mobile-web-app-capable" content="yes" />
 	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />	

web/js/map.js

@@ -328,12 +328,15 @@ DynMap.prototype = {
 			.append(link=$('<input type="text" />'))
 			.data('link', link)
 			.appendTo(container);*/
-        if(me.options.sidebaropened != 'true') {
+		if(me.options.sidebaropened != 'true') {
-            $('<div/>')
+			var hitbar = $('<div/>')
-                .addClass('hitbar')
+			.addClass('hitbar')
-                .appendTo(panel);
+			.click(function() {
+				sidebar.toggleClass('pinned');
+			})
+			.appendTo(panel);
 		}
-        
+
 		var alertbox = me.alertbox = $('<div/>')
 			.addClass('alertbox')
 			.hide()