From 74b0b0abbf8f49d6444c7df9465d943fbad69704 Mon Sep 17 00:00:00 2001 From: Marius Gavrilescu Date: Mon, 4 May 2015 15:07:47 +0300 Subject: [PATCH] Fix mobilenav and modal --- css/themes/cyborg.css | 22 ++++++++++++++++++++++ css/themes/readable.css | 22 ++++++++++++++++++++++ css/themes/slate.css | 22 ++++++++++++++++++++++ js/10-modal.js | 8 ++++---- js/90-mobilenav.js | 9 ++++----- 5 files changed, 74 insertions(+), 9 deletions(-) diff --git a/css/themes/cyborg.css b/css/themes/cyborg.css index 4ba8625..32c642a 100644 --- a/css/themes/cyborg.css +++ b/css/themes/cyborg.css @@ -1385,6 +1385,28 @@ fieldset[disabled] .btn-primary.active { .affix { position: fixed; } +@-ms-viewport { + width: device-width; +} +.visible-xs-block, +.visible-xs-inline { + display: none !important; +} +@media (max-width: 767px) { + .visible-xs-block { + display: block !important; + } +} +@media (max-width: 767px) { + .visible-xs-inline { + display: inline !important; + } +} +@media (max-width: 767px) { + .hidden-xs { + display: none !important; + } +} .text-primary, .text-primary:hover { color: #2a9fd6; diff --git a/css/themes/readable.css b/css/themes/readable.css index 193cdfd..63f7ae5 100644 --- a/css/themes/readable.css +++ b/css/themes/readable.css @@ -1385,6 +1385,28 @@ fieldset[disabled] .btn-primary.active { .affix { position: fixed; } +@-ms-viewport { + width: device-width; +} +.visible-xs-block, +.visible-xs-inline { + display: none !important; +} +@media (max-width: 767px) { + .visible-xs-block { + display: block !important; + } +} +@media (max-width: 767px) { + .visible-xs-inline { + display: inline !important; + } +} +@media (max-width: 767px) { + .hidden-xs { + display: none !important; + } +} .navbar { font-family: sans-serif; } diff --git a/css/themes/slate.css b/css/themes/slate.css index 34b535e..d20c8fe 100644 --- a/css/themes/slate.css +++ b/css/themes/slate.css @@ -1385,6 +1385,28 @@ fieldset[disabled] .btn-primary.active { .affix { position: fixed; } +@-ms-viewport { + width: device-width; +} +.visible-xs-block, +.visible-xs-inline { + display: none !important; +} +@media (max-width: 767px) { + .visible-xs-block { + display: block !important; + } +} +@media (max-width: 767px) { + .visible-xs-inline { + display: inline !important; + } +} +@media (max-width: 767px) { + .hidden-xs { + display: none !important; + } +} .btn, .btn:hover { border-color: rgba(0, 0, 0, 0.6); diff --git a/js/10-modal.js b/js/10-modal.js index eea85d7..3a8a214 100644 --- a/js/10-modal.js +++ b/js/10-modal.js @@ -13,8 +13,6 @@ function hide_modal () { } $(function() { - if(document.documentElement.clientWidth) - return; modal = $('.modal')[0]; backdrop = $('.backdrop')[0]; $(modal).on('transitionend', el => { @@ -23,8 +21,10 @@ $(function() { }); $('.backdrop,.modal').each(el => document.body.appendChild(el) ); $('#solution').on('click', e => { - show_modal(); - e.preventDefault(); + if(window.matchMedia("(min-width: 768px)").matches){ + show_modal(); + e.preventDefault(); + } }); $('.backdrop').on('click', hide_modal); window.onkeyup = event => { diff --git a/js/90-mobilenav.js b/js/90-mobilenav.js index c536669..36e7298 100644 --- a/js/90-mobilenav.js +++ b/js/90-mobilenav.js @@ -1,7 +1,6 @@ $(function(){ - if(document.documentElement.clientWidth >= 768) - return; - $('#title')[0].insertAdjacentHTML('beforebegin', '
Tap title to toggle menu
'); - $('nav')[0].classList.add('hidden'); - $('#title').on('click', () => $('nav')[0].classList.toggle('hidden')); + const nav = $('nav')[0]; + nav.classList.add('hidden-xs'); + $('#title')[0].insertAdjacentHTML('beforebegin', '
Tap title to toggle menu
'); + $('#title').on('click', () => nav.classList.toggle('hidden-xs')); }); -- 2.39.2