Fix collapsed toc not showing on mobile

3Dan3 · Feb 19, 2016 · 78bcf34 · 78bcf34
1 parent 7b14000
commit 78bcf34
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 26 deletions.
diff --git a/inst/templates/readthedown/default.html b/inst/templates/readthedown/default.html
@@ -84,8 +84,10 @@ <h2><a href="#content">$title$</a></h2>
     </div>
 </div>
 
-
+<div id="main">
 $body$
+</div>
+
 
 </div>
 

diff --git a/inst/templates/readthedown/readthedown.css b/inst/templates/readthedown/readthedown.css
@@ -310,11 +310,6 @@ dl dd{
 }
 
 
-@media screen and (max-width: 480px){
-    .mobile-hide{
-        display:none}
-}
-
 @media screen and (max-width: 768px){
     .tablet-hide{
         display:none}
@@ -324,7 +319,7 @@ dl dd{
         padding: 1em;
     }
     #content.shift{
-        position:fixed;
+        position:relative;
         min-width:100%;
         left:75%;
         top:0;
@@ -382,12 +377,6 @@ dl dd{
 }
 
 
-@media screen and (max-width: 480px){
-    #content .sidebar{
-        width:100%}
-}
-
-
 #nav-top {
     margin-top: 0em;
     margin-bottom: 2em;

diff --git a/inst/templates/readthedown/readthedown.js b/inst/templates/readthedown/readthedown.js
@@ -8,6 +8,11 @@ $( document ).ready(function() {
     $(document).on('click', "#table-of-contents ul li a", function() {
       $("[data-toggle='wy-nav-shift']").removeClass("shift");
     });
+    // Close menu when you click on main content
+    $(document).on('click', "#main, #header", function() {
+      $("[data-toggle='wy-nav-shift']").removeClass("shift");
+    });
+
     // Make tables responsive
     $(".section table").wrap("<div class='table-wrapper'></div>");
     /* Pilltabs */

diff --git a/resources/examples/readthedown/readthedown.html b/resources/examples/readthedown/readthedown.html
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,8 +84,10 @@ <h2><a href="#content">$title$</a></h2> @@
         </div>
     </div>
+    <div id="main">
     $body$
+    </div>
     </div>
@@ Expand Down @@