From f639cba7cc93d355123e9b0f6dca2aac9d64fa05 Mon Sep 17 00:00:00 2001 From: Brandon Green Date: Fri, 4 Dec 2020 17:07:24 -0500 Subject: [PATCH 1/3] Add expand/hide to all left side bar items --- js/theme.js | 21 +++++++++------- pytorch_sphinx_theme/static/css/theme.css | 21 ++++++++++------ pytorch_sphinx_theme/static/js/theme.js | 30 ++++++++++++++++------- scss/_sphinx_layout.scss | 2 +- 4 files changed, 48 insertions(+), 26 deletions(-) diff --git a/js/theme.js b/js/theme.js index b046584e..6384f503 100644 --- a/js/theme.js +++ b/js/theme.js @@ -262,28 +262,31 @@ if (downloadNote.length >= 1) { $(".pytorch-call-to-action-links").hide(); } -//This code makes the Notes section of the Docs Left Nav collapsible +//This code handles the Expand/Hide toggle for the Docs/Tutorials left nav items -if ($("p.caption:first").text() == "Notes") { +var expandMenu = "#pytorch-left-menu p.caption"; - $("p.caption:first").addClass("left-nav-top-caption"); - $("span.caption-text:first").after("[Expand]"); - $(".expand-menu").after("[Hide]"); - $("p.caption:first").next("ul").hide(); +if ($(expandMenu)) { + + $(expandMenu).addClass("left-nav-top-caption"); + $("#pytorch-left-menu span.caption-text").after("[Expand]"); + $("#pytorch-left-menu .expand-menu").after("[Hide]"); + $(expandMenu).next("ul").hide(); $(".expand-menu").on("click", function() { - $(".hide-menu").toggle(); + $(this).next(".hide-menu").toggle(); + $(this).parent().next("ul").toggle(); toggleList(this); }); $(".hide-menu").on("click", function() { - $(".expand-menu").toggle(); + $(this).prev(".expand-menu").toggle(); + $(this).parent().next("ul").toggle(); toggleList(this); }); function toggleList(menuCommand) { $(menuCommand).toggle(); - $("p.caption:first").next("ul").toggle(); } } diff --git a/pytorch_sphinx_theme/static/css/theme.css b/pytorch_sphinx_theme/static/css/theme.css index 59fe0cd5..88c724a5 100644 --- a/pytorch_sphinx_theme/static/css/theme.css +++ b/pytorch_sphinx_theme/static/css/theme.css @@ -2107,6 +2107,10 @@ pre code { color: #6c757d; opacity: 1; } +.form-control::-moz-placeholder { + color: #6c757d; + opacity: 1; +} .form-control:-ms-input-placeholder { color: #6c757d; opacity: 1; @@ -4553,8 +4557,10 @@ tbody.collapse.show { @media (min-width: 576px) { .card-columns { -webkit-column-count: 3; + -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1.25rem; + -moz-column-gap: 1.25rem; column-gap: 1.25rem; } .card-columns .card { @@ -5670,7 +5676,7 @@ button.close { -webkit-transform: translateX(0); transform: translateX(0); } -@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) { +@supports (transform-style: preserve-3d) { .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { -webkit-transform: translate3d(0, 0, 0); @@ -5683,7 +5689,7 @@ button.close { -webkit-transform: translateX(100%); transform: translateX(100%); } -@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) { +@supports (transform-style: preserve-3d) { .carousel-item-next, .active.carousel-item-right { -webkit-transform: translate3d(100%, 0, 0); @@ -5696,7 +5702,7 @@ button.close { -webkit-transform: translateX(-100%); transform: translateX(-100%); } -@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) { +@supports (transform-style: preserve-3d) { .carousel-item-prev, .active.carousel-item-left { -webkit-transform: translate3d(-100%, 0, 0); @@ -7227,7 +7233,6 @@ button.bg-dark:focus { } .position-sticky { - position: -webkit-sticky !important; position: sticky !important; } @@ -7247,9 +7252,8 @@ button.bg-dark:focus { z-index: 1030; } -@supports ((position: -webkit-sticky) or (position: sticky)) { +@supports (position: sticky) { .sticky-top { - position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; @@ -11680,7 +11684,7 @@ article.pytorch-article .tutorials-callout-container .btn.callout-button a { line-height: 1.375rem; margin-bottom: 1rem; text-transform: none; - white-space: nowrap; + white-space: normal; } .pytorch-left-menu-search { @@ -11695,6 +11699,9 @@ article.pytorch-article .tutorials-callout-container .btn.callout-button a { .pytorch-left-menu-search ::-webkit-input-placeholder { color: #262626; } +.pytorch-left-menu-search ::-moz-placeholder { + color: #262626; +} .pytorch-left-menu-search :-ms-input-placeholder { color: #262626; } diff --git a/pytorch_sphinx_theme/static/js/theme.js b/pytorch_sphinx_theme/static/js/theme.js index a4ae47fb..e4e8b1ca 100644 --- a/pytorch_sphinx_theme/static/js/theme.js +++ b/pytorch_sphinx_theme/static/js/theme.js @@ -957,28 +957,31 @@ if (downloadNote.length >= 1) { $(".pytorch-call-to-action-links").hide(); } -//This code makes the Notes section of the Docs Left Nav collapsible +//This code handles the Expand/Hide toggle for the Docs/Tutorials left nav items -if ($("p.caption:first").text() == "Notes") { +var expandMenu = "#pytorch-left-menu p.caption"; - $("p.caption:first").addClass("left-nav-top-caption"); - $("span.caption-text:first").after("[Expand]"); - $(".expand-menu").after("[Hide]"); - $("p.caption:first").next("ul").hide(); +if ($(expandMenu)) { + + $(expandMenu).addClass("left-nav-top-caption"); + $("#pytorch-left-menu span.caption-text").after("[Expand]"); + $("#pytorch-left-menu .expand-menu").after("[Hide]"); + $(expandMenu).next("ul").hide(); $(".expand-menu").on("click", function() { - $(".hide-menu").toggle(); + $(this).next(".hide-menu").toggle(); + $(this).parent().next("ul").toggle(); toggleList(this); }); $(".hide-menu").on("click", function() { - $(".expand-menu").toggle(); + $(this).prev(".expand-menu").toggle(); + $(this).parent().next("ul").toggle(); toggleList(this); }); function toggleList(menuCommand) { $(menuCommand).toggle(); - $("p.caption:first").next("ul").toggle(); } } @@ -1039,4 +1042,13 @@ $("#tutorial-cards p").each(function(index, item) { } }); +// Jump back to top on pagination click + +$(document).on("click", ".page", function() { + $('html, body').animate( + {scrollTop: $("#dropdown-filter-tags").position().top}, + 'slow' + ); +}); + },{"jquery":"jquery"}]},{},[1,2,3,4,5,6,7,8,9,10,"pytorch-sphinx-theme"]); diff --git a/scss/_sphinx_layout.scss b/scss/_sphinx_layout.scss index 580f920f..0bd88525 100644 --- a/scss/_sphinx_layout.scss +++ b/scss/_sphinx_layout.scss @@ -169,7 +169,7 @@ line-height: rem(22px); margin-bottom: rem(16px); text-transform: none; - white-space: nowrap; + white-space: normal; } .pytorch-left-menu-search { From f0dc8d30c6a042e08d2caf09afb85d567aaa5e44 Mon Sep 17 00:00:00 2001 From: Brandon Green Date: Fri, 18 Dec 2020 17:32:19 -0500 Subject: [PATCH 2/3] change expand/hide to +/- --- js/theme.js | 4 ++-- pytorch_sphinx_theme/static/js/theme.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/theme.js b/js/theme.js index 6384f503..90abb17c 100644 --- a/js/theme.js +++ b/js/theme.js @@ -269,8 +269,8 @@ var expandMenu = "#pytorch-left-menu p.caption"; if ($(expandMenu)) { $(expandMenu).addClass("left-nav-top-caption"); - $("#pytorch-left-menu span.caption-text").after("[Expand]"); - $("#pytorch-left-menu .expand-menu").after("[Hide]"); + $("#pytorch-left-menu span.caption-text").after("[ + ]"); + $("#pytorch-left-menu .expand-menu").after("[ - ]"); $(expandMenu).next("ul").hide(); $(".expand-menu").on("click", function() { diff --git a/pytorch_sphinx_theme/static/js/theme.js b/pytorch_sphinx_theme/static/js/theme.js index e4e8b1ca..dbcc7a5a 100644 --- a/pytorch_sphinx_theme/static/js/theme.js +++ b/pytorch_sphinx_theme/static/js/theme.js @@ -964,8 +964,8 @@ var expandMenu = "#pytorch-left-menu p.caption"; if ($(expandMenu)) { $(expandMenu).addClass("left-nav-top-caption"); - $("#pytorch-left-menu span.caption-text").after("[Expand]"); - $("#pytorch-left-menu .expand-menu").after("[Hide]"); + $("#pytorch-left-menu span.caption-text").after("[ + ]"); + $("#pytorch-left-menu .expand-menu").after("[ - ]"); $(expandMenu).next("ul").hide(); $(".expand-menu").on("click", function() { From 4d8c6503b834a7bf75254eb01686109b74071463 Mon Sep 17 00:00:00 2001 From: Brandon Green Date: Tue, 23 Feb 2021 09:44:13 -0500 Subject: [PATCH 3/3] Update script and style for collapse --- js/theme.js | 45 +++++++++++++++++++++------------------- scss/_sphinx_layout.scss | 2 +- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/js/theme.js b/js/theme.js index 5a9d0c7a..53432474 100644 --- a/js/theme.js +++ b/js/theme.js @@ -264,30 +264,33 @@ if (downloadNote.length >= 1) { //This code handles the Expand/Hide toggle for the Docs/Tutorials left nav items -var expandMenu = "#pytorch-left-menu p.caption"; - -if ($(expandMenu)) { - - $(expandMenu).addClass("left-nav-top-caption"); - $("#pytorch-left-menu span.caption-text").after("[ + ]"); - $("#pytorch-left-menu .expand-menu").after("[ - ]"); - $(expandMenu).next("ul").hide(); +$("#pytorch-left-menu p.caption").each(function(){ + var collapsedSections = ['Notes']; + var menuName = this.innerText.replace(/[^\w\s]/gi, '').trim(); + if (collapsedSections.includes(menuName) == true && $(this).children().not(".expand-menu")) { + $(this).children("span").after("[ + ]"); + $(this).children("span").after("[ - ]"); + $(this).next("ul").hide(); + }else{ + $(this).children("span").after("[ - ]"); + $(this).children("span").after("[ + ]"); + } + }) - $(".expand-menu").on("click", function() { - $(this).next(".hide-menu").toggle(); - $(this).parent().next("ul").toggle(); - toggleList(this); - }); +$(".expand-menu").on("click", function() { + $(this).next(".hide-menu").toggle(); + $(this).parent().next("ul").toggle(); + toggleList(this); +}); - $(".hide-menu").on("click", function() { - $(this).prev(".expand-menu").toggle(); - $(this).parent().next("ul").toggle(); - toggleList(this); - }); +$(".hide-menu").on("click", function() { + $(this).prev(".expand-menu").toggle(); + $(this).parent().next("ul").toggle(); + toggleList(this); +}); - function toggleList(menuCommand) { - $(menuCommand).toggle(); - } +function toggleList(menuCommand) { + $(menuCommand).toggle(); } // Get the card link from the card's link attribute diff --git a/scss/_sphinx_layout.scss b/scss/_sphinx_layout.scss index 47bd5187..f6427661 100644 --- a/scss/_sphinx_layout.scss +++ b/scss/_sphinx_layout.scss @@ -154,7 +154,7 @@ cursor: pointer; } -.hide-menu { +.collapse { display: none; }