From 74b0b0abbf8f49d6444c7df9465d943fbad69704 Mon Sep 17 00:00:00 2001
From: Marius Gavrilescu <marius@ieval.ro>
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', '<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'));
 });
-- 
2.39.2