Merge pull request #62 from shiftlab/doc-left-nav-collapse

Notes is now collaspible

Author: brianjo

images/chevron-down-orange.svg

@@ -261,3 +261,17 @@ if (downloadNote.length >= 1) {
 } else {
     $(".pytorch-call-to-action-links").hide();
 }
+
+//This code makes the Notes section of the Docs Left Nav collapsible
+
+if ($("p.caption:first").text() == "Notes") {
+
+    $("p.caption:first").addClass("left-nav-top-caption");
+    $("span.caption-text:first").addClass("pytorch-left-nav-collapsed");
+    $("p.caption:first").next("ul").hide();
+
+    $("span.caption-text:first").on("click", function() {
+    $(this).toggleClass("pytorch-left-nav-collapsible pytorch-left-nav-collapsed");
+    $("p.caption:first").next("ul").toggle();
+    });
+}

js/theme.js

@@ -894,4 +894,17 @@ if (downloadNote.length >= 1) {
     $(".pytorch-call-to-action-links").hide();
 }
 
+//This code makes the Notes section of the Docs Left Nav collapsible
+
+if ($("p.caption:first").text() == "Notes") {
+
+    $("p.caption:first").addClass("left-nav-top-caption");
+    $("span.caption-text:first").addClass("pytorch-left-nav-collapsed");
+    $("p.caption:first").next("ul").hide();
+
+    $("span.caption-text:first").on("click", function() {
+    $(this).toggleClass("pytorch-left-nav-collapsible pytorch-left-nav-collapsed");
+    $("p.caption:first").next("ul").toggle();
+    });
+}
 },{"jquery":"jquery"}]},{},[1,2,3,4,5,6,7,8,9,"pytorch-sphinx-theme"]);

pytorch_sphinx_theme/static/css/theme.css

@@ -121,6 +121,7 @@
   display: none;
   background-color: $light_grey;
   color: $slate;
+  overflow: scroll;
 
   @include sphinx-medium-size {
     display: block;
@@ -147,14 +148,53 @@
   }
 }
 
+.pytorch-left-nav-collapsible {
+  display: block;
+  background-image: url(../images/chevron-down-orange.svg);
+  background-repeat: no-repeat;
+  background-size: 15px 8px;
+  background-position: 46px 9px;
+  width: 25%;
+}
+
+.pytorch-left-nav-collapsible:hover {
+  cursor: pointer;
+}
+
+.pytorch-left-nav-collapsed {
+  display: block;
+  background-image: url(../images/chevron-right-orange.svg);
+  background-repeat: no-repeat;
+  background-size: 15px 11px;
+  background-position: 46px 7px;
+  width: 25%;
+}
+
+.pytorch-left-nav-collapsed:hover {
+  cursor: pointer;
+}
+
+.left-nav-top-caption {
+  padding-top: 1rem;
+}
+
+@media screen and (max-width: 767px) {
+  .pytorch-left-nav-collapsible {
+    background-size: 11px 8px;
+    background-position: 43px 5px;
+  }
+  .pytorch-left-nav-collapsed { 
+    background-size: 10px 9px;
+    background-position: 45px 4px;
+  }
+}
+
 .pytorch-left-menu p.caption {
   color: $not_quite_black;
   display: block;
-  display: inline-block;
   font-size: rem(16px);
   line-height: rem(22px);
   margin-bottom: rem(16px);
-  padding: 0;
   text-transform: none;
   white-space: nowrap;
 }