trigger drop down menus on touch in mobile
This commit is contained in:
Bala Clark
parent
ea42cb3ddc
commit
22402e640a
5 changed files with 29 additions and 10 deletions
|
|
@ -32,7 +32,7 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.navigate:hover {
|
||||
body:not(.mobile) .navigate:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
});
|
||||
})();
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue