diff --git a/css/styles.css b/css/styles.css
index 2a7d698..91750c5 100755
--- a/css/styles.css
+++ b/css/styles.css
@@ -32,7 +32,7 @@
position: relative;
}
-.navigate:hover {
+body:not(.mobile) .navigate:hover {
opacity: 1;
}
diff --git a/css/toolbar.css b/css/toolbar.css
index faf8de8..941a9ad 100644
--- a/css/toolbar.css
+++ b/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 {
diff --git a/lib/ComicBook.js b/lib/ComicBook.js
index 1bd26a4..0eb1596 100755
--- a/lib/ComicBook.js
+++ b/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.
diff --git a/lib/templates.js b/lib/templates.js
index b5db973..db099c3 100644
--- a/lib/templates.js
+++ b/lib/templates.js
@@ -38,6 +38,6 @@ helpers = helpers || Handlebars.helpers; data = data || {};
- return "\n\n";
+ return "\n\n";
});
})();
\ No newline at end of file
diff --git a/templates/toolbar.handlebars b/templates/toolbar.handlebars
index e4b2f43..e8683f9 100644
--- a/templates/toolbar.handlebars
+++ b/templates/toolbar.handlebars
@@ -2,12 +2,12 @@