Merge pull request #68 from shiftlab/add-expand-text

Add expand text

Author: brianjo

js/theme.js

@@ -267,11 +267,22 @@ if (downloadNote.length >= 1) {
 if ($("p.caption:first").text() == "Notes") {
 
     $("p.caption:first").addClass("left-nav-top-caption");
-    $("span.caption-text:first").addClass("pytorch-left-nav-collapsed");
+    $("span.caption-text:first").after("<span class='expand-menu'>[Expand]</span>");
+    $(".expand-menu").after("<span class='hide-menu'>[Hide]</span>");
     $("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();
+    $(".expand-menu").on("click", function() {
+        $(".hide-menu").toggle();
+        toggleList(this);
     });
+
+    $(".hide-menu").on("click", function() {
+        $(".expand-menu").toggle();
+        toggleList(this);
+    });
+
+    function toggleList(menuCommand) {
+        $(menuCommand).toggle();
+        $("p.caption:first").next("ul").toggle();
+    }
 }

pytorch_sphinx_theme/static/css/theme.css

@@ -899,12 +899,24 @@ if (downloadNote.length >= 1) {
 if ($("p.caption:first").text() == "Notes") {
 
     $("p.caption:first").addClass("left-nav-top-caption");
-    $("span.caption-text:first").addClass("pytorch-left-nav-collapsed");
+    $("span.caption-text:first").after("<span class='expand-menu'>[Expand]</span>");
+    $(".expand-menu").after("<span class='hide-menu'>[Hide]</span>");
     $("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();
+    $(".expand-menu").on("click", function() {
+        $(".hide-menu").toggle();
+        toggleList(this);
     });
+
+    $(".hide-menu").on("click", function() {
+        $(".expand-menu").toggle();
+        toggleList(this);
+    });
+
+    function toggleList(menuCommand) {
+        $(menuCommand).toggle();
+        $("p.caption:first").next("ul").toggle();
+    }
 }
+
 },{"jquery":"jquery"}]},{},[1,2,3,4,5,6,7,8,9,"pytorch-sphinx-theme"]);

pytorch_sphinx_theme/static/js/theme.js

@@ -148,47 +148,20 @@
   }
 }
 
-.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 {
+.expand-menu, .hide-menu {
+  color: $dark_grey;
+  padding-left: 10px;
   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;
+.hide-menu {
+  display: none;
 }
 
 .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;