Docs 3 (Lightning-Universe#44)

* fixed click on row * css * css font * added menu title * cleaned up left bar
synthetic-tensors · Mar 30, 2022 · 389a399 · 389a399
1 parent ad78762
commit 389a399
Show file tree

Hide file tree

Showing 7 changed files with 197 additions and 35 deletions.
diff --git a/js/theme.js b/js/theme.js
@@ -267,16 +267,18 @@ if (downloadNote.length >= 1) {
 $(document).ready(function() {
   var caption = "#pytorch-left-menu p.caption";
   var collapseAdded = $(this).not("checked");
+  var chevronRight = "<i class='fa-solid fa-chevron-right'></i>"
+  var chevronDown = "<i class='fa-solid fa-chevron-down'></i>"
   $(caption).each(function () {
     var menuName = this.innerText.replace(/[^\w\s]/gi, "").trim();
     $(this).find("span").addClass("checked");
     if (collapsedSections.includes(menuName) == true && collapseAdded && sessionStorage.getItem(menuName) !== "expand" || sessionStorage.getItem(menuName) == "collapse") {
-      $(this.firstChild).after("<span class='expand-menu'>[ + ]</span>");
-      $(this.firstChild).after("<span class='hide-menu collapse'>[ - ]</span>");
+      $(this.firstChild).after("<span class='expand-menu menu-item-decorator'>" + chevronRight + "  </span>");
+      $(this.firstChild).after("<span class='hide-menu collapse menu-item-decorator'>" + chevronDown + "</span>");
       $(this).next("ul").hide();
     } else if (collapsedSections.includes(menuName) == false && collapseAdded || sessionStorage.getItem(menuName) == "expand") {
-      $(this.firstChild).after("<span class='expand-menu collapse'>[ + ]</span>");
-      $(this.firstChild).after("<span class='hide-menu'>[ - ]</span>");
+      $(this.firstChild).after("<span class='expand-menu collapse menu-item-decorator'>" + chevronRight + "</span>");
+      $(this.firstChild).after("<span class='hide-menu menu-item-decorator'>" + chevronDown + "</span>");
     }
   });
 
@@ -302,6 +304,40 @@ $(document).ready(function() {
     toggleList(this);
   });
 
+
+  $("#pytorch-left-menu p.caption").on("click", function () {
+    // pull out the name from sessionStorage (to persist across visits)
+    var menuName = $(this).text().replace(/[^\w\s]/gi, "").trim();
+
+    var expandedState = sessionStorage.getItem(menuName);
+    if (expandedState == null) {
+        sessionStorage.setItem(menuName, "expand");
+        expandedState = 'expand';
+    }
+
+    var isExpanded = expandedState == 'expand';
+
+    if (isExpanded) {
+        // swap the arrows
+        $(this).children(".hide-menu").toggle();
+        $(this).children(".expand-menu").toggle();
+
+        // show the list
+        $(this).next("ul").toggle()
+
+        sessionStorage.setItem(menuName, "collapse");
+    }else {
+        // swap the arrows
+        $(this).children(".hide-menu").toggle();
+        $(this).children(".expand-menu").toggle();
+
+        // show the list
+        $(this).next("ul").toggle()
+
+        sessionStorage.setItem(menuName, "expand");
+    }
+  });
+
   function toggleList(menuCommand) {
     $(menuCommand).toggle();
   }

diff --git a/pt_lightning_sphinx_theme/layout.html b/pt_lightning_sphinx_theme/layout.html
@@ -104,7 +104,7 @@
   <script src="{{ pathto('_static/js/modernizr.min.js', 1) }}"></script>
 
   {% include "fonts.html" %}
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
+  <script defer src="https://use.fontawesome.com/releases/v6.1.1/js/all.js" integrity="sha384-xBXmu0dk1bEoiwd71wOonQLyH+VpgR1XcDH3rtxrLww5ajNTuMvBdL5SOiFZnNdp" crossorigin="anonymous"></script>
 </head>
 
 <div class="container-fluid header-holder tutorials-header" id="header-holder">

diff --git a/pt_lightning_sphinx_theme/static/css/theme.css b/pt_lightning_sphinx_theme/static/css/theme.css
diff --git a/pt_lightning_sphinx_theme/static/js/theme.js b/pt_lightning_sphinx_theme/static/js/theme.js
@@ -960,16 +960,18 @@ if (downloadNote.length >= 1) {
 $(document).ready(function() {
   var caption = "#pytorch-left-menu p.caption";
   var collapseAdded = $(this).not("checked");
+  var chevronRight = "<i class='fa-solid fa-chevron-right'></i>"
+  var chevronDown = "<i class='fa-solid fa-chevron-down'></i>"
   $(caption).each(function () {
     var menuName = this.innerText.replace(/[^\w\s]/gi, "").trim();
     $(this).find("span").addClass("checked");
     if (collapsedSections.includes(menuName) == true && collapseAdded && sessionStorage.getItem(menuName) !== "expand" || sessionStorage.getItem(menuName) == "collapse") {
-      $(this.firstChild).after("<span class='expand-menu'>[ + ]</span>");
-      $(this.firstChild).after("<span class='hide-menu collapse'>[ - ]</span>");
+      $(this.firstChild).after("<span class='expand-menu menu-item-decorator'>" + chevronRight + "  </span>");
+      $(this.firstChild).after("<span class='hide-menu collapse menu-item-decorator'>" + chevronDown + "</span>");
       $(this).next("ul").hide();
     } else if (collapsedSections.includes(menuName) == false && collapseAdded || sessionStorage.getItem(menuName) == "expand") {
-      $(this.firstChild).after("<span class='expand-menu collapse'>[ + ]</span>");
-      $(this.firstChild).after("<span class='hide-menu'>[ - ]</span>");
+      $(this.firstChild).after("<span class='expand-menu collapse menu-item-decorator'>" + chevronRight + "</span>");
+      $(this.firstChild).after("<span class='hide-menu menu-item-decorator'>" + chevronDown + "</span>");
     }
   });
 
@@ -995,6 +997,40 @@ $(document).ready(function() {
     toggleList(this);
   });
 
+
+  $("#pytorch-left-menu p.caption").on("click", function () {
+    // pull out the name from sessionStorage (to persist across visits)
+    var menuName = $(this).text().replace(/[^\w\s]/gi, "").trim();
+
+    var expandedState = sessionStorage.getItem(menuName);
+    if (expandedState == null) {
+        sessionStorage.setItem(menuName, "expand");
+        expandedState = 'expand';
+    }
+
+    var isExpanded = expandedState == 'expand';
+
+    if (isExpanded) {
+        // swap the arrows
+        $(this).children(".hide-menu").toggle();
+        $(this).children(".expand-menu").toggle();
+
+        // show the list
+        $(this).next("ul").toggle()
+
+        sessionStorage.setItem(menuName, "collapse");
+    }else {
+        // swap the arrows
+        $(this).children(".hide-menu").toggle();
+        $(this).children(".expand-menu").toggle();
+
+        // show the list
+        $(this).next("ul").toggle()
+
+        sessionStorage.setItem(menuName, "expand");
+    }
+  });
+
   function toggleList(menuCommand) {
     $(menuCommand).toggle();
   }

diff --git a/scss/_sphinx_base.scss b/scss/_sphinx_base.scss
@@ -1,7 +1,7 @@
 $sphinx_full_width_content_width: 700px;
 
 $sphinx_left_menu_wrapper_padding_right: 13.5%;
-$sphinx_left_menu_width: 25%;
+$sphinx_left_menu_width: 22%;
 $sphinx_left_menu_scroll_wrapper_width: 120%;
 
 $sphinx_content_wrap_width: 71%;
@@ -259,6 +259,15 @@ article.pytorch-article {
 article.pytorch-article .section:first-of-type h1:first-of-type {
   margin-top: 0;
 }
+
+
+.left-menu-link {
+    background-color: green;
+    &:hover {
+      background-color: $color_primary;
+    }
+}
+
 
 article.pytorch-article .sphx-glr-thumbcontainer {
   margin: 0;
@@ -292,11 +301,15 @@ article.pytorch-article .sphx-glr-thumbcontainer {
 
   .caption-text {
     a {
-      font-size: rem(16px);
-      color: $not_quite_black;
-      letter-spacing: 0;
-      line-height: rem(24px);
+      color: $primary_text;
       text-decoration: none;
+      font-family: UCity;
+      font-size: rem(14px);
+      font-style: normal;
+      font-weight: 600;
+      line-height: rem(20px);
+      letter-spacing: 0px;
+      text-align: left;
     }
   }
 

diff --git a/scss/_sphinx_layout.scss b/scss/_sphinx_layout.scss
@@ -120,9 +120,10 @@
 
 .pytorch-left-menu {
   display: none;
-  background-color: $light_grey;
+  background-color: white;
   color: $slate;
   overflow: scroll;
+  border-right: 1px solid #e2e2e2;
 
   @include sphinx-medium-size {
     display: block;
@@ -152,7 +153,13 @@
 .expand-menu, .hide-menu {
   color: $dark_grey;
   padding-left: 10px;
-  cursor: pointer;
+  cursor: none;
+  float: right;
+  pointer-events: none;
+}
+
+.menu-item-decorator {
+  color: #848484;
 }
 
 .collapse {
@@ -164,13 +171,26 @@
 }
 
 .pytorch-left-menu p.caption {
-  color: $not_quite_black;
   display: block;
-  font-size: rem(16px);
-  line-height: rem(22px);
-  margin-bottom: rem(16px);
+  margin-bottom: 0px;
   text-transform: none;
   white-space: normal;
+  border-radius: 6px;
+  padding: rem(8px);
+
+  color: $primary_text;
+  font-family: UCity;
+  font-size: rem(14px);
+  font-style: normal;
+  font-weight: 600;
+  line-height: rem(20px);
+  letter-spacing: 0px;
+  text-align: left;
+
+  &:hover {
+    background-color: #EFEEFF;
+    color: #4F00BA;
+  }
 }
 
 .pytorch-left-menu-search {
@@ -217,7 +237,7 @@
   background-size: 18px 18px;
   background-position: 12px 10px;
   padding-left: 40px;
-  background-color: $white;
+  background-color: #F6F8FB;
 
   &:focus {
     outline: 0;
@@ -352,6 +372,7 @@
     }
   }
 
+  // little ball next to name
   li.toctree-l1.current > a {
     color: $color_primary;
     &:before {
@@ -455,7 +476,7 @@
 }
 
 .pytorch-left-menu ul {
-  padding-left: 0;
+  padding-left: 8px;
 }
 
 .pytorch-right-menu {