From 69dcd29115768decc268fc429ade71aad27a8e2d Mon Sep 17 00:00:00 2001 From: Pat Mellon <16585245+patmellon@users.noreply.github.com> Date: Tue, 4 Aug 2020 16:20:20 -0400 Subject: [PATCH 1/9] Update homepage nav opacity (#61) --- _includes/footer_scripts.html | 4 ++-- _sass/homepage.scss | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/_includes/footer_scripts.html b/_includes/footer_scripts.html index e494d4b1f4ab..742669b60ccd 100644 --- a/_includes/footer_scripts.html +++ b/_includes/footer_scripts.html @@ -24,8 +24,8 @@ var top = $(this).scrollTop(); var fullPosition = $(".main-background").height() - $(".header-holder").height(); - if (top === 0) { - $(".header-holder").css({"backgroundColor": "transparent"}); + if (top <= 40) { + $(".header-holder").css({"backgroundColor": "rgba(0, 0, 0, 0.165)"}); } else if (top >= fullPosition) { $(".header-holder").css({"backgroundColor": "#000000"}); } else { diff --git a/_sass/homepage.scss b/_sass/homepage.scss index 35c96c3311d2..6144b2746071 100644 --- a/_sass/homepage.scss +++ b/_sass/homepage.scss @@ -53,6 +53,10 @@ background-color: $light_grey; } } + + .homepage-header { + background-color: rgba(0, 0, 0, 0.165); + } } .homepage-feature-module { @@ -368,7 +372,7 @@ &:hover { color: $orange; } - } + } } .no-banner { From 1c7fe51735432294c11d4ef134769b3d2eaa7f44 Mon Sep 17 00:00:00 2001 From: Brandon Green <31549535+Bgreen23@users.noreply.github.com> Date: Tue, 4 Aug 2020 16:56:32 -0400 Subject: [PATCH 2/9] Increase main nav font and search icon size * Increase main nav font and search icon size --- _sass/navigation.scss | 2 +- _sass/search.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 61eb26cf33bf..1c378b462577 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -118,7 +118,7 @@ ul li a { color: $white; - font-size: rem(18px); + font-size: 1.3rem; letter-spacing: 0; line-height: rem(34px); text-align: center; diff --git a/_sass/search.scss b/_sass/search.scss index 87496739441f..b3a2a09b23e9 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -321,9 +321,9 @@ input::placeholder { color: transparent; width: 25px; height: 25px; - background-size: 12px 15px; + background-size: 14px 16px; background-repeat: no-repeat; - background-position: 7px 5px; + background-position: 6px 5px; border-radius: 25px; cursor: pointer; &:hover { From f54860666572462b5ce0814d6ce69c43bc7e8560 Mon Sep 17 00:00:00 2001 From: Brandon Green <31549535+Bgreen23@users.noreply.github.com> Date: Tue, 4 Aug 2020 16:57:58 -0400 Subject: [PATCH 3/9] Add arrow for main nav ecosystem and resources dropdown (#59) * Add arrows for main nav ecosystem and resources dropdown --- _includes/main_menu.html | 8 ++++---- _sass/navigation.scss | 26 ++++++++++++++++++++++++++ assets/images/chevron-down-white.svg | 17 +++++++++++++++++ assets/main-menu-dropdown.js | 6 ++++++ 4 files changed, 53 insertions(+), 4 deletions(-) create mode 100644 assets/images/chevron-down-white.svg diff --git a/_includes/main_menu.html b/_includes/main_menu.html index cbd9f7934114..67454d862b7d 100644 --- a/_includes/main_menu.html +++ b/_includes/main_menu.html @@ -6,8 +6,8 @@
  • -
    - +
  • -
    - +
    + Resources
    diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 1c378b462577..75e33a3f230e 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -242,6 +242,32 @@ cursor: pointer; } + .ecosystem-dropdown, .resources-dropdown { + .with-right-white-arrow { + padding-right: rem(32px); + position: relative; + background-image: url($baseurl + "/assets/images/chevron-right-white.svg"); + background-size: 7px 12px; + background-position: top 7px right 15px; + background-repeat: no-repeat; + &:hover { + background-image: url($baseurl + "/assets/images/chevron-right-orange.svg"); + } + } + + .with-down-white-arrow { + padding-right: rem(32px); + position: relative; + background-image: url($baseurl + "/assets/images/chevron-down-white.svg"); + background-size: 13px 13px; + background-position: top 7px right 10px; + background-repeat: no-repeat; + &:hover { + background-image: url($baseurl + "/assets/images/chevron-down-orange.svg"); + } + } + } + .dropdown-menu { border-radius: 0; padding: 0; diff --git a/assets/images/chevron-down-white.svg b/assets/images/chevron-down-white.svg new file mode 100644 index 000000000000..e7bd84de3a86 --- /dev/null +++ b/assets/images/chevron-down-white.svg @@ -0,0 +1,17 @@ + + + + Created with Sketch. + + + + + + + + + + + + + diff --git a/assets/main-menu-dropdown.js b/assets/main-menu-dropdown.js index 441456811c53..0ee2ea1fce58 100644 --- a/assets/main-menu-dropdown.js +++ b/assets/main-menu-dropdown.js @@ -1,9 +1,11 @@ $("[data-toggle='ecosystem-dropdown']").on("click", function() { toggleDropdown($(this).attr("data-toggle")); + toggleArrowClass(".ecosystem-option"); }); $("[data-toggle='resources-dropdown']").on("click", function() { toggleDropdown($(this).attr("data-toggle")); + toggleArrowClass(".resource-option"); }); function toggleDropdown(menuToggle) { @@ -17,3 +19,7 @@ function toggleDropdown(menuToggle) { $(menuClass).addClass(showMenuClass); } } + +function toggleArrowClass(dropdown) { + $(dropdown).toggleClass("with-right-white-arrow with-down-white-arrow"); +} From f02271876c674e4f74649263eef335b178015315 Mon Sep 17 00:00:00 2001 From: Brandon Green <31549535+Bgreen23@users.noreply.github.com> Date: Wed, 5 Aug 2020 17:17:26 -0400 Subject: [PATCH 4/9] Change dropdown to work on hover instead of on click (#62) * Change dropdown to hover --- _sass/navigation.scss | 14 +++++++------- assets/main-menu-dropdown.js | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 75e33a3f230e..4b1198c76213 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -247,8 +247,8 @@ padding-right: rem(32px); position: relative; background-image: url($baseurl + "/assets/images/chevron-right-white.svg"); - background-size: 7px 12px; - background-position: top 7px right 15px; + background-size: 7px 18px; + background-position: top 6px right 15px; background-repeat: no-repeat; &:hover { background-image: url($baseurl + "/assets/images/chevron-right-orange.svg"); @@ -259,7 +259,7 @@ padding-right: rem(32px); position: relative; background-image: url($baseurl + "/assets/images/chevron-down-white.svg"); - background-size: 13px 13px; + background-size: 14px 18px; background-position: top 7px right 10px; background-repeat: no-repeat; &:hover { @@ -305,13 +305,11 @@ width: 226px; display: none; position: absolute; - top: rem(50px); z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0.5rem 0; - margin: 0.125rem 0 0; font-size: 1rem; color: #212529; text-align: left; @@ -322,8 +320,10 @@ border-radius: 0.25rem; } -.ecosystem-dropdown-menu.show-menu, .resources-dropdown-menu.show-menu { - display: block; +.ecosystem-dropdown:hover, .resources-dropdown:hover { + .ecosystem-dropdown-menu, .resources-dropdown-menu { + display: block; + } } .main-menu ul li { diff --git a/assets/main-menu-dropdown.js b/assets/main-menu-dropdown.js index 0ee2ea1fce58..2e1a8733c12e 100644 --- a/assets/main-menu-dropdown.js +++ b/assets/main-menu-dropdown.js @@ -1,9 +1,9 @@ -$("[data-toggle='ecosystem-dropdown']").on("click", function() { +$("[data-toggle='ecosystem-dropdown']").hover(function() { toggleDropdown($(this).attr("data-toggle")); toggleArrowClass(".ecosystem-option"); }); -$("[data-toggle='resources-dropdown']").on("click", function() { +$("[data-toggle='resources-dropdown']").hover(function() { toggleDropdown($(this).attr("data-toggle")); toggleArrowClass(".resource-option"); }); From 811e35144f16a1c7883e38557ea95a4cb76e8712 Mon Sep 17 00:00:00 2001 From: Brandon Green <31549535+Bgreen23@users.noreply.github.com> Date: Mon, 10 Aug 2020 09:51:14 -0400 Subject: [PATCH 5/9] Add forums link under Resources dropdown (#64) * Add forums link under Resources dropdown This commits adds PyTorch Forums link to resources dropdown --- _includes/main_menu.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_includes/main_menu.html b/_includes/main_menu.html index 67454d862b7d..40dc27c03f64 100644 --- a/_includes/main_menu.html +++ b/_includes/main_menu.html @@ -54,6 +54,10 @@ About

    Learn about PyTorch’s features and capabilities

    + + Forums +

    A place to discuss PyTorch code, issues, install, research

    +
    • From fea583d6a5bf4cc16f1f5693faf27896e850ce30 Mon Sep 17 00:00:00 2001 From: Brandon Green <31549535+Bgreen23@users.noreply.github.com> Date: Mon, 10 Aug 2020 09:59:21 -0400 Subject: [PATCH 6/9] Add anchor to community module under Resources dropdown (#65) * Add anchor to community module under Resources dropdown --- _includes/main_menu.html | 4 ++++ index.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/_includes/main_menu.html b/_includes/main_menu.html index 40dc27c03f64..402de4d3bc31 100644 --- a/_includes/main_menu.html +++ b/_includes/main_menu.html @@ -54,6 +54,10 @@ About

    Learn about PyTorch’s features and capabilities

    + + Community +

    Join the PyTorch developer community to contribute, learn, and get your questions answered.

    +     Forums

    A place to discuss PyTorch code, issues, install, research

    diff --git a/index.html b/index.html index 8cfa6a316927..6d2cc8004773 100644 --- a/index.html +++ b/index.html @@ -98,7 +98,7 @@

    {{ item.title }}

    {% endfor %} -
    +

    Community

    From 0b24e997c758874ca062cc198b4208c0431f9a18 Mon Sep 17 00:00:00 2001 From: Brandon Green <31549535+Bgreen23@users.noreply.github.com> Date: Thu, 13 Aug 2020 14:31:59 -0400 Subject: [PATCH 7/9] Move Hub link (#66) * wip move hub link to resources dropdown * remove css for active class * wip add resources option to array * Add resource dropdown options to array for readability * updates based on PR feedback Co-authored-by: Brandon Green --- _includes/main_menu.html | 22 +++++++++------------- assets/main-menu-dropdown.js | 5 ----- 2 files changed, 9 insertions(+), 18 deletions(-) diff --git a/_includes/main_menu.html b/_includes/main_menu.html index 402de4d3bc31..288441eb842f 100644 --- a/_includes/main_menu.html +++ b/_includes/main_menu.html @@ -4,22 +4,12 @@     Get Started -
  • +
    • @@ -39,7 +29,9 @@ Docs -
  • + {% assign resources = "resources, features, hub" | split: ", " %} + +
  • @@ -54,6 +46,10 @@ About

    Learn about PyTorch’s features and capabilities

     + + Models (Beta) +

    Discover, publish, and reuse pre-trained models

    +     Community

    Join the PyTorch developer community to contribute, learn, and get your questions answered.

    diff --git a/assets/main-menu-dropdown.js b/assets/main-menu-dropdown.js index 2e1a8733c12e..63ee11d4be93 100644 --- a/assets/main-menu-dropdown.js +++ b/assets/main-menu-dropdown.js @@ -1,8 +1,3 @@ -$("[data-toggle='ecosystem-dropdown']").hover(function() { - toggleDropdown($(this).attr("data-toggle")); - toggleArrowClass(".ecosystem-option"); -}); - $("[data-toggle='resources-dropdown']").hover(function() { toggleDropdown($(this).attr("data-toggle")); toggleArrowClass(".resource-option"); From 0f4a0a6db8be806ebf4a9ed79f97ea926c977adc Mon Sep 17 00:00:00 2001 From: Brandon Green <31549535+Bgreen23@users.noreply.github.com> Date: Thu, 13 Aug 2020 17:21:49 -0400 Subject: [PATCH 8/9] Update Nav Arrow (#72) * Change dropdown arrows to static down arrows * Remove dot from active Resource pages --- _includes/main_menu.html | 2 +- _sass/navigation.scss | 37 ++++++++++++++++++++++------ assets/images/chevron-down-black.svg | 17 +++++++++++++ assets/main-menu-dropdown.js | 5 ---- 4 files changed, 48 insertions(+), 13 deletions(-) create mode 100644 assets/images/chevron-down-black.svg diff --git a/_includes/main_menu.html b/_includes/main_menu.html index 288441eb842f..d5bcfd16d658 100644 --- a/_includes/main_menu.html +++ b/_includes/main_menu.html @@ -34,7 +34,7 @@
  • - + Resources
    diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 4b1198c76213..92757c022313 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -109,6 +109,10 @@ a { color: $orange; } + + .with-down-arrow { + background-image: url($baseurl + "/assets/images/chevron-down-orange.svg"); + } } &:last-of-type { @@ -237,28 +241,47 @@ } } +.resources, .features, .hub { + .main-menu ul li{ + &.active { + &:after { + display: none; + } + } + } +} + .main-menu ul li { .ecosystem-dropdown, .resources-dropdown a { cursor: pointer; } .ecosystem-dropdown, .resources-dropdown { - .with-right-white-arrow { + .with-down-orange-arrow { + padding-right: rem(32px); + position: relative; + background-image: url($baseurl + "/assets/images/chevron-down-orange.svg"); + background-size: 14px 18px; + background-position: top 7px right 10px; + background-repeat: no-repeat; + } + + .with-down-white-arrow { padding-right: rem(32px); position: relative; - background-image: url($baseurl + "/assets/images/chevron-right-white.svg"); - background-size: 7px 18px; - background-position: top 6px right 15px; + background-image: url($baseurl + "/assets/images/chevron-down-white.svg"); + background-size: 14px 18px; + background-position: top 7px right 10px; background-repeat: no-repeat; &:hover { - background-image: url($baseurl + "/assets/images/chevron-right-orange.svg"); + background-image: url($baseurl + "/assets/images/chevron-down-orange.svg"); } } - .with-down-white-arrow { + .with-down-arrow { padding-right: rem(32px); position: relative; - background-image: url($baseurl + "/assets/images/chevron-down-white.svg"); + background-image: url($baseurl + "/assets/images/chevron-down-black.svg"); background-size: 14px 18px; background-position: top 7px right 10px; background-repeat: no-repeat; diff --git a/assets/images/chevron-down-black.svg b/assets/images/chevron-down-black.svg new file mode 100644 index 000000000000..9fffa77268c3 --- /dev/null +++ b/assets/images/chevron-down-black.svg @@ -0,0 +1,17 @@ + + + + Created with Sketch. + + + + + + + + + + + + + diff --git a/assets/main-menu-dropdown.js b/assets/main-menu-dropdown.js index 63ee11d4be93..3da2d3220480 100644 --- a/assets/main-menu-dropdown.js +++ b/assets/main-menu-dropdown.js @@ -1,6 +1,5 @@ $("[data-toggle='resources-dropdown']").hover(function() { toggleDropdown($(this).attr("data-toggle")); - toggleArrowClass(".resource-option"); }); function toggleDropdown(menuToggle) { @@ -14,7 +13,3 @@ function toggleDropdown(menuToggle) { $(menuClass).addClass(showMenuClass); } } - -function toggleArrowClass(dropdown) { - $(dropdown).toggleClass("with-right-white-arrow with-down-white-arrow"); -} From 02741f94364dff5c010fe65ae371ffbbbc2a28f3 Mon Sep 17 00:00:00 2001 From: Pat Mellon <16585245+patmellon@users.noreply.github.com> Date: Mon, 21 Sep 2020 11:11:21 -0400 Subject: [PATCH 9/9] Nav updates mobile menu (#77) * Update mobile menu * Remove class from Community link * update mobile menu * Update class name --- _includes/mobile_menu.html | 34 ++++++++++++++++++++++++---------- _sass/navigation.scss | 18 +++++++++++++----- 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/_includes/mobile_menu.html b/_includes/mobile_menu.html index 1ef931ab669b..32f67f6d3ced 100644 --- a/_includes/mobile_menu.html +++ b/_includes/mobile_menu.html @@ -27,10 +27,6 @@ Get Started
    • -
  • - Features -
    • -
  • Ecosystem
    • @@ -39,10 +35,6 @@ Mobile -
  • - PyTorch Hub -
    • -
  • Blog
    • @@ -55,10 +47,32 @@ Docs -
  • - Resources +
  • + Resources
    • + + diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 92757c022313..579ebf18cc45 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -168,7 +168,7 @@ padding: 0; } - ul li a { + ul li a, .resources-mobile-menu-title { font-size: rem(32px); color: $white; letter-spacing: 0; @@ -203,14 +203,14 @@ height: 100%; min-height: 100%; margin-top: -$mobile_header_height; - padding-top: 25%; + padding-top: 50%; + overflow-y: scroll; @media only screen and (max-width: 320px) { - padding-top: 50%; - overflow-y: scroll; + padding-top: 75%; } @include small-desktop { - padding-top: 0; + padding-top: 25%; } .navSearchWrapper { @@ -396,3 +396,11 @@ background-color: $orange; color: white; } + +.mobile-main-menu-links-container { + ul.resources-mobile-menu-items { + li { + padding-left: 15px; + } + } +}