From fb8f5845705d7d7eb90f8e0692353fa138a0d254 Mon Sep 17 00:00:00 2001 From: Joel Marcey Date: Fri, 26 Oct 2018 13:04:14 -0700 Subject: [PATCH] Add search bar --- .ruby-version | 2 +- Gemfile | 2 +- Gemfile.lock | 4 +- _includes/footer_scripts.html | 1 + _includes/head.html | 2 + _includes/main_menu.html | 28 ++- _includes/mobile_menu.html | 49 +++- _sass/search.scss | 357 +++++++++++++++++++++++++++ assets/images/search-icon-orange.svg | 11 + assets/images/search-icon-white.svg | 11 + assets/images/search-icon.svg | 11 + assets/main.scss | 1 + assets/search-bar.js | 42 ++++ 13 files changed, 508 insertions(+), 13 deletions(-) create mode 100644 _sass/search.scss create mode 100644 assets/images/search-icon-orange.svg create mode 100644 assets/images/search-icon-white.svg create mode 100644 assets/images/search-icon.svg create mode 100644 assets/search-bar.js diff --git a/.ruby-version b/.ruby-version index 73462a5a1344..aedc15bb0c6e 100644 --- a/.ruby-version +++ b/.ruby-version @@ -1 +1 @@ -2.5.1 +2.5.3 diff --git a/Gemfile b/Gemfile index 65f61d3b2731..d537b17550d1 100644 --- a/Gemfile +++ b/Gemfile @@ -1,5 +1,5 @@ source "https://rubygems.org" -ruby "2.5.1" +ruby "2.5.3" group :jekyll_plugins do gem "github-pages" diff --git a/Gemfile.lock b/Gemfile.lock index 305fb758dc97..b53e53db9cd2 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -253,7 +253,7 @@ DEPENDENCIES jekyll-paginate-v2 RUBY VERSION - ruby 2.5.1p57 + ruby 2.5.3p105 BUNDLED WITH - 1.16.3 + 1.17.1 diff --git a/_includes/footer_scripts.html b/_includes/footer_scripts.html index d122377c271f..5fe356d31d32 100644 --- a/_includes/footer_scripts.html +++ b/_includes/footer_scripts.html @@ -1,6 +1,7 @@ + + {% if jekyll.environment == 'production' %} {% include analytics.html %} {% include pixel.html %} {% endif %} + diff --git a/_includes/main_menu.html b/_includes/main_menu.html index a193c5206692..569383c922fd 100644 --- a/_includes/main_menu.html +++ b/_includes/main_menu.html @@ -1,35 +1,47 @@
diff --git a/_includes/mobile_menu.html b/_includes/mobile_menu.html index 02cfb2c35c0e..e5fad2f0a068 100644 --- a/_includes/mobile_menu.html +++ b/_includes/mobile_menu.html @@ -9,6 +9,53 @@
- {% include main_menu.html %} + +
+ +
+
diff --git a/_sass/search.scss b/_sass/search.scss new file mode 100644 index 000000000000..4befb817b4d3 --- /dev/null +++ b/_sass/search.scss @@ -0,0 +1,357 @@ +/* Search */ +input[type='search'] { + -moz-appearance: none; + -webkit-appearance: none; +} + +.navSearchWrapper { + align-items: center; + align-self: center; + display: flex; + justify-content: center; + position: relative; + right: 10px; + top: 15px; + margin-left: 0; + padding-bottom: 20px; + @include desktop { + position: absolute; + margin-left: 30px; + display: block; + padding-left: 3px; + padding-bottom: 0; + } +} + +.tabletSearchWrapper { + top: -55px; + @include small-desktop { + padding-bottom: 20px; + position: relative; + margin-left: 0; + } +} + +.navSearchWrapper .aa-dropdown-menu { + background: #f9f9f9; + border: 3px solid rgba(57, 57, 57, 0.25); + color: #393939; + font-size: rem(14px); + left: auto !important; + line-height: 1.2em; + right: 0 !important; +} + +.navSearchWrapper + .aa-dropdown-menu + .algolia-docsearch-suggestion--category-header { + background: $black; + color: white; + font-size: rem(14px); + font-weight: 400; +} + +.navSearchWrapper + .aa-dropdown-menu + .algolia-docsearch-suggestion--category-header + .algolia-docsearch-suggestion--highlight { + background-color: $black; + color: #fff; +} + +.navSearchWrapper + .aa-dropdown-menu + .algolia-docsearch-suggestion--title + .algolia-docsearch-suggestion--highlight, +.navSearchWrapper + .aa-dropdown-menu + .algolia-docsearch-suggestion--subcategory-column + .algolia-docsearch-suggestion--highlight { + color: $black; +} + +.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion__secondary, +.navSearchWrapper + .aa-dropdown-menu + .algolia-docsearch-suggestion--subcategory-column { + border-color: rgba(57, 57, 57, 0.3); +} + +input#search-input { + background-color: inherit; + border: none; + border-radius: 20px; + color: $black; + font-size: rem(18px); + font-weight: 300; + line-height: 20px; + outline: none; + padding-left: 25px; + position: relative; + -webkit-transition: 0.5s width ease; + -moz-transition: 0.5s width ease; + -o-transition: 0.5s width ease; + transition: 0.5s width ease; + display: none; + width: 220px; + background-image: url($baseurl + "/assets/images/search-icon.svg"); + background-size: 12px 15px; + background-repeat: no-repeat; + background-position: 8px 5px; + &:hover { + background-image: url($baseurl + "/assets/images/search-icon-orange.svg"); + } +} + +input#mobile-search-input { + font-size: 2rem; + background-color: transparent; + color: $white; + border: none; + outline: none; + padding-left: 25px; + position: relative; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; + width: 300px; + display: block; +} + +input#search-input:focus, +input#search-input:active { + color: $black; +} +.navigationSlider .slidingNav .navSearchWrapper .algolia-docsearch-footer a { + height: auto; +} +@media only screen and (max-width: 735px) { + .navSearchWrapper { + width: 100%; + } +} + +input::-webkit-input-placeholder { + color: #e5e5e5; +} + +input::-moz-placeholder { + color: #e5e5e5; +} + +input::placeholder { + color: #e5e5e5; +} + +.hljs { + padding: 1.25rem 1.5rem; +} + +@media only screen and (max-width: 1024px) { + .reactNavSearchWrapper input#search-input { + background-color: rgba(242, 196, 178, 0.25); + border: none; + border-radius: 20px; + box-sizing: border-box; + color: #393939; + font-size: rem(14px); + line-height: 20px; + outline: none; + padding-left: 25px; + position: relative; + transition: background-color 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), + width 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), color 0.2s ease; + width: 100%; + } + + .reactNavSearchWrapper input#search-input:focus, + .reactNavSearchWrapper input#search-input:active { + background-color: $black; + color: #fff; + } + + .reactNavSearchWrapper .algolia-docsearch-suggestion--subcategory-inline { + display: none; + } + + .reactNavSearchWrapper > span { + width: 100%; + } + + .reactNavSearchWrapper .aa-dropdown-menu { + font-size: rem(12px); + line-height: 2em; + padding: 0; + border-width: 1px; + min-width: 500px; + } + .reactNavSearchWrapper .algolia-docsearch-suggestion__secondary { + border-top: none; + } + .aa-suggestions { + min-height: 140px; + max-height: 60vh; + -webkit-overflow-scrolling: touch; + overflow-y: scroll; + } +} + +@media only screen and (min-width: 1024px) { + .navSearchWrapper { + padding-left: 10px; + position: relative; + right: auto; + top: auto; + @include desktop { + padding-left: 3px; + right: 10px; + margin-left: 0; + } + } + + .navSearchWrapper .algolia-autocomplete { + display: block; + } + + .tabletSearchWrapper { + right: 10px; + top: -55px; + } +} + +@media only screen and (max-width: 735px) { + .reactNavSearchWrapper .aa-dropdown-menu { + min-width: 400px; + } +} +@media only screen and (max-width: 475px) { + .reactNavSearchWrapper .aa-dropdown-menu { + min-width: 300px; + } +} + +.search-border { + display: none; + flex-direction: row; + border: none; + background-color: transparent; + border-radius: 20px; + width: 100%; + float: right; + @include desktop { + display: flex; + } +} + +.mobile-search-border { + flex-direction: row; + border: none; + background-color: rgba(256, 256, 256, 0.1); + border-radius: 20px; + width: 100%; + float: right; + display: flex; + @include small-desktop { + border-radius: 25px; + } +} + +#close-search { + color: $orange; + padding-right: 10px; + font-size: .99em; + display: none; + cursor: pointer; +} + +.active-header { + margin-top: -1px; +} + +.active-search-icon { + background-image: url($baseurl + "/assets/images/search-icon-orange.svg") !important; + display: inline-block !important; +} + +.active-background { + background-color: $light_grey; + width: 50%; + padding: 4px; +} + +.homepage-header { + input#search-input { + background-image: url($baseurl + "/assets/images/search-icon-white.svg"); + color: $white; + } + input#search-input:focus, + input#search-input:active { + color: $white; + } + .active-background { + background-color:rgba(0, 0, 0, 0.2); + } + #close-search { + color: $white; + opacity: 0.5; + &:hover { + color: $orange; + } + } + #search-icon { + background-image: url(/assets/images/search-icon-white.svg); + &:hover { + background-color:rgba(0, 0, 0, 0.2); + } + } +} + +#search-icon { + background-image: url(/assets/images/search-icon.svg); + color: transparent; + width: 25px; + height: 25px; + background-size: 12px 15px; + background-repeat: no-repeat; + background-position: 7px 5px; + border-radius: 25px; + cursor: pointer; + &:hover { + background-color: $light_grey; + background-image: url(/assets/images/search-icon-orange.svg); + } +} + +#mobile-search-icon { + background-image: url(/assets/images/search-icon-white.svg); + width: 30px; + height: 38px; + background-size: 16px 28px; + background-repeat: no-repeat; + background-position: 0px 5px; + cursor: pointer; + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + @include small-desktop { + height: 50px; + width: 35px; + background-size: 20px 42px; + } +} + +.navSearchWrapper { + .algolia-autocomplete .ds-dropdown-menu { + min-width: 330px; + height: 500px; + overflow-y: scroll; + @include desktop { + height: auto; + min-width: 500px; + overflow-y: hidden; + } + @include small-desktop { + height: 700px; + overflow-y: scroll; + } + } +} +/* End of Search */ diff --git a/assets/images/search-icon-orange.svg b/assets/images/search-icon-orange.svg new file mode 100644 index 000000000000..0e66c2c77b40 --- /dev/null +++ b/assets/images/search-icon-orange.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/images/search-icon-white.svg b/assets/images/search-icon-white.svg new file mode 100644 index 000000000000..70b2f6e5b203 --- /dev/null +++ b/assets/images/search-icon-white.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/images/search-icon.svg b/assets/images/search-icon.svg new file mode 100644 index 000000000000..ade68ef1aab3 --- /dev/null +++ b/assets/images/search-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/main.scss b/assets/main.scss index be551c90adf3..4a23474afa9a 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -25,3 +25,4 @@ $baseurl:"{{ site.baseurl }}"; @import "quick-start-module"; @import "blog"; @import "similar-posts-module"; +@import "search"; diff --git a/assets/search-bar.js b/assets/search-bar.js new file mode 100644 index 000000000000..a9128101edda --- /dev/null +++ b/assets/search-bar.js @@ -0,0 +1,42 @@ +docsearch({ + apiKey: "e3b73ac141dff0b0fd27bdae9055bc73", + indexName: "pytorch", + inputSelector: "#search-input", + debug: false // Set debug to true if you want to inspect the dropdown +}); + +docsearch({ + apiKey: 'e3b73ac141dff0b0fd27bdae9055bc73', + indexName: 'pytorch', + inputSelector: '#mobile-search-input', + algoliaOptions: { + hitsPerPage: 5 + }, + debug: false // Set debug to true if you want to inspect the dropdown +}); + +$("#search-icon").on("click", function() { + $(this).hide(); + $("#close-search").show(); + $(".search-border") + .addClass("active-background") + .animate({ width: "100%" }, "slow"); + $("#search-input") + .addClass("active-search-icon") + .focus(); + $(".main-menu-item").hide(); + $(".header-logo").addClass("active-header"); +}); + +$("#close-search").on("click", function() { + $(this).hide(); + $("#search-icon").show(); + $(".search-border") + .attr("style", "") + .removeClass("active-background"); + $("#search-input") + .removeClass("active-search-icon") + .val(""); + $(".main-menu-item").fadeIn("slow"); + $(".header-logo").removeClass("active-header"); +});