Fix mobilenav and modal

diff --git a/css/themes/cyborg.css b/css/themes/cyborg.css
index 4ba86259c95be9c52a9d292ce6e08047053f0789..32c642a7b47f3fdc01f9ab2ebaadc5d95f8dd782 100644 (file)
--- 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 193cdfd0d4b35c7387c00afccc4966f7f13f3f12..63f7ae5c66beb576ac6f82b44ef19fcfda7cad7e 100644 (file)
--- 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 34b535ee2892de731e947e15b2427619d4b63fd9..d20c8fea68ef3b71f80095d61a49e99285408087 100644 (file)
--- 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 eea85d7ac43e7a080aff36bd9164ea840071752b..3a8a214a6c1716bda539d27ed58ff7b2313bd0e2 100644 (file)
--- 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 c53666967596cf298dfabcfad404a75e1d5fcceb..36e7298b9b4b43e834b9fd6c7be2a41f97b72e45 100644 (file)
--- 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', '<div class="text-center">Tap title to toggle menu</div>');
-       $('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', '<div class="text-center visible-xs-block">Tap title to toggle menu</div>');
+       $('#title').on('click', () => nav.classList.toggle('hidden-xs'));
 });