trigger drop down menus on touch in mobile

css/styles.css

@@ -32,7 +32,7 @@
 	position: relative;
 }
 
-.navigate:hover {
+body:not(.mobile) .navigate:hover {
 	opacity: 1;
 }
 

css/toolbar.css

@@ -23,7 +23,7 @@ button, input, label {
 	background-color: black;
 	background-image: linear-gradient(to bottom, rgb(80, 80, 80), rgb(17, 17, 17));
 	overflow: visible;
-	padding: 8px;
+	padding: 0.75em;
 	position: fixed;
 	left: 0;
 	right: 0;
@@ -34,6 +34,10 @@ button, input, label {
   transition: opacity 0.2s ease-in-out;
 }
 
+.mobile .toolbar {
+	opacity: 1;
+}
+
 .toolbar:hover {
 	opacity: 1;
 }
@@ -56,7 +60,7 @@ button, input, label {
 }
 
 .toolbar li > button {
-	font-size: 16px;
+	font-size: 1.5em;
 	padding: 0 12px;
 }
 
@@ -69,7 +73,7 @@ button, input, label {
 }
 
 .toolbar .dropdown {
-	font-size: 12px;
+	font-size: 1em;
 	position: absolute;
 	width: 212px;
 	background-color: white;
@@ -81,7 +85,7 @@ button, input, label {
 	display: none;
 }
 
-.toolbar li:hover > .dropdown {
+body:not(.mobile) .toolbar li:hover > .dropdown {
 	display: block;
 }
 
@@ -97,12 +101,16 @@ button, input, label {
 	content: '';
 }
 
+.toolbar .close {
+	display: none;
+}
+
 .dropdown .control-group {
 	padding: 8px;
 }
 
 .dropdown .sliders {
-	font-size: 16px;
+	font-size: 1.5em;
 }
 
 .dropdown .control-group span {

lib/ComicBook.js

@@ -102,6 +102,10 @@ var ComicBook = (function ($) {
     var page_requested = false; // used to request non preloaded pages
     var shiv = false;
 
+    if (navigator.userAgent.match(/mobile/i)) {
+      document.body.classList.add('mobile');
+    }
+
     /**
      * Gets the window.innerWidth - scrollbars
      */
@@ -182,6 +186,13 @@ var ComicBook = (function ($) {
       window.addEventListener('hashchange', checkHash, false);
     }
 
+    window.addEventListener('touchstart', function (e) {
+      var $dropdown, $el = $(e.target);
+      if ($el.data('toggle') === 'dropdown' ) {
+        $el.siblings('.dropdown').toggle();
+      }
+    }, false);
+
     /**
      * Render Handlebars templates. Templates with data-trigger & data-action will
      * have the specified events bound.

lib/templates.js

@@ -38,6 +38,6 @@ helpers = helpers || Handlebars.helpers; data = data || {};
   
 
 
-  return "\n<div class=\"toolbar\">\n\n	<ul class=\"pull-left\">\n		<li>\n			<button data-trigger=\"click\" data-action=\"close\" title=\"close\" class=\"icon-remove-sign\"></button>\n		</li>\n		<li class=\"separator\"></li>\n		<li>\n			<button title=\"image settings\" class=\"icon-settings\"></button>\n			<div class=\"dropdown\">\n				<form name=\"image-enhancements\" data-trigger=\"reset\" data-action=\"resetEnhancements\">\n					<div class=\"sliders\">\n						<div class=\"control-group\">\n							<label title=\"adjust brightness\" class=\"icon-sun\"></label>\n							<input data-trigger=\"change\" data-action=\"brightness\" type=\"range\" min=\"-100\" max=\"100\" step=\"1\" value=\"0\">\n						</div>\n						<div class=\"control-group\">\n							<label title=\"adjust contrast\" class=\"icon-adjust\"></label>\n							<input data-trigger=\"change\" data-action=\"contrast\" type=\"range\" min=\"-1\" max=\"1\" step=\"0.1\" value=\"0\">\n						</div>\n						<div class=\"control-group\">\n							<label title=\"sharpen\" class=\"icon-droplet\"></label>\n							<input data-trigger=\"change\" data-action=\"sharpen\" type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0\">\n						</div>\n					</div>\n					<div class=\"control-group pull-left\">\n						<input id=\"image-desaturate\" type=\"checkbox\" data-trigger=\"change\" data-action=\"desaturate\">\n						<label for=\"image-desaturate\">desaturate</label>\n					</div>\n					<div class=\"control-group pull-right\">\n						<input type=\"reset\" value=\"reset\">\n					</div>\n				</form>\n			</div>\n		</li>\n		<li>\n			<button data-trigger=\"click\" data-action=\"toggleLayout\" title=\"toggle one/two pages at a time\" class=\"icon-file\"></button>\n		</li>\n		<li>\n			<button data-trigger=\"click\" data-action=\"zoomOut\" title=\"zoom out\" class=\"icon-zoom-out\"></button>\n		</li>\n		<li>\n			<button data-trigger=\"click\" data-action=\"zoomIn\" title=\"zoom in\" class=\"icon-zoom-in\"></button>\n		</li>\n		<li>\n			<button data-trigger=\"click\" data-action=\"fitWidth\" title=\"fit page to window width\" class=\"icon-expand\"></button>\n		</li>\n	</ul>\n\n	<ul class=\"pull-right\">\n		<li><span id=\"current-page\"></span> / <span id=\"page-count\"></span></li>\n	</ul>\n\n</div>\n";
+  return "\n<div class=\"toolbar\">\n\n	<ul class=\"pull-left\">\n		<li class=\"close\">\n			<button data-trigger=\"click\" data-action=\"close\" title=\"close\" class=\"icon-remove-sign\"></button>\n		</li>\n		<li class=\"close separator\"></li>\n		<li>\n			<button title=\"image settings\" class=\"icon-settings\" data-toggle=\"dropdown\"></button>\n			<div class=\"dropdown\">\n				<form name=\"image-enhancements\" data-trigger=\"reset\" data-action=\"resetEnhancements\">\n					<div class=\"sliders\">\n						<div class=\"control-group\">\n							<label title=\"adjust brightness\" class=\"icon-sun\"></label>\n							<input data-trigger=\"change\" data-action=\"brightness\" type=\"range\" min=\"-100\" max=\"100\" step=\"1\" value=\"0\">\n						</div>\n						<div class=\"control-group\">\n							<label title=\"adjust contrast\" class=\"icon-adjust\"></label>\n							<input data-trigger=\"change\" data-action=\"contrast\" type=\"range\" min=\"-1\" max=\"1\" step=\"0.1\" value=\"0\">\n						</div>\n						<div class=\"control-group\">\n							<label title=\"sharpen\" class=\"icon-droplet\"></label>\n							<input data-trigger=\"change\" data-action=\"sharpen\" type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0\">\n						</div>\n					</div>\n					<div class=\"control-group pull-left\">\n						<input id=\"image-desaturate\" type=\"checkbox\" data-trigger=\"change\" data-action=\"desaturate\">\n						<label for=\"image-desaturate\">desaturate</label>\n					</div>\n					<div class=\"control-group pull-right\">\n						<input type=\"reset\" value=\"reset\">\n					</div>\n				</form>\n			</div>\n		</li>\n		<li>\n			<button data-trigger=\"click\" data-action=\"toggleLayout\" title=\"toggle one/two pages at a time\" class=\"icon-file\"></button>\n		</li>\n		<li>\n			<button data-trigger=\"click\" data-action=\"zoomOut\" title=\"zoom out\" class=\"icon-zoom-out\"></button>\n		</li>\n		<li>\n			<button data-trigger=\"click\" data-action=\"zoomIn\" title=\"zoom in\" class=\"icon-zoom-in\"></button>\n		</li>\n		<li>\n			<button data-trigger=\"click\" data-action=\"fitWidth\" title=\"fit page to window width\" class=\"icon-expand\"></button>\n		</li>\n	</ul>\n\n	<ul class=\"pull-right\">\n		<li><span id=\"current-page\"></span> / <span id=\"page-count\"></span></li>\n	</ul>\n\n</div>\n";
   });
 })();

templates/toolbar.handlebars

@@ -2,12 +2,12 @@
 <div class="toolbar">
 
 	<ul class="pull-left">
-		<li>
+		<li class="close">
 			<button data-trigger="click" data-action="close" title="close" class="icon-remove-sign"></button>
 		</li>
-		<li class="separator"></li>
+		<li class="close separator"></li>
 		<li>
-			<button title="image settings" class="icon-settings"></button>
+			<button title="image settings" class="icon-settings" data-toggle="dropdown"></button>
 			<div class="dropdown">
 				<form name="image-enhancements" data-trigger="reset" data-action="resetEnhancements">
 					<div class="sliders">