From 7c3ee805f7586cd0960a4cf0ce67c7448552c396 Mon Sep 17 00:00:00 2001 From: George Cushen Date: Tue, 5 Jan 2021 22:37:20 +0000 Subject: [PATCH] feat: change behavior of sidebar search to open modal Scope: the built-in search engine. Provides one consistent interface for searching and thus surfacing common search queries to the user and in future typeahead. Also, display the search keyboard shortcut and improve accessibility in Book TOC menu. --- .../scss/wowchemy/{_docs.scss => _book.scss} | 9 ++- wowchemy/assets/scss/wowchemy/_search.scss | 78 +++++++++++++++---- wowchemy/assets/scss/wowchemy/wowchemy.scss | 2 +- wowchemy/layouts/partials/book_sidebar.html | 6 +- wowchemy/layouts/partials/search.html | 2 +- 5 files changed, 78 insertions(+), 19 deletions(-) rename wowchemy/assets/scss/wowchemy/{_docs.scss => _book.scss} (97%) diff --git a/wowchemy/assets/scss/wowchemy/_docs.scss b/wowchemy/assets/scss/wowchemy/_book.scss similarity index 97% rename from wowchemy/assets/scss/wowchemy/_docs.scss rename to wowchemy/assets/scss/wowchemy/_book.scss index 693469b3..d2c6fb21 100644 --- a/wowchemy/assets/scss/wowchemy/_docs.scss +++ b/wowchemy/assets/scss/wowchemy/_book.scss @@ -94,7 +94,7 @@ /* Hide sidebar in printouts. */ -@media print { +@media print { .docs-sidebar { display: none; } @@ -240,10 +240,15 @@ ul.toc-top { .toc-top li a { display: block; padding: .125rem 1.5rem; - color: #99979c; + color: rgba(0,0,0,.65); font-size: 0.7rem; } +.dark #TableOfContents li a, +.dark .toc-top li a { + color: rgba(255,255,255,.65); +} + #TableOfContents li a:hover, .toc-top li a:hover { color: $sta-primary; diff --git a/wowchemy/assets/scss/wowchemy/_search.scss b/wowchemy/assets/scss/wowchemy/_search.scss index 27c0f9e3..990463a4 100644 --- a/wowchemy/assets/scss/wowchemy/_search.scss +++ b/wowchemy/assets/scss/wowchemy/_search.scss @@ -2,7 +2,9 @@ * Search **************************************************/ -.search-results { +// Search modal + +.search-modal { transform: scale(0); -webkit-transform: scale(0); background-color: $sta-background; @@ -16,15 +18,16 @@ z-index: -99; } -.dark .search-results { +.dark .search-modal { background-color: $sta-dark-background; } +// Hide body scrollbars whilst searching in modal .searching { overflow: hidden; } -.searching .search-results { +.searching .search-modal { transform: scale(1); -webkit-transform: scale(1); visibility: visible; @@ -35,15 +38,17 @@ width: 100%; } -.search-results > .container { +.search-modal > .container { padding-top: 70px; /* Navbar height. */ } @media screen and (max-width: 1200px) { - .search-results > .container { + .search-modal > .container { padding-top: 50px; /* Navbar height. */ } } +// Search modal header + .search-header { position: -webkit-sticky; position: sticky; @@ -51,6 +56,11 @@ background-color: $sta-background; padding-top: 2rem; padding-bottom: 1rem; + + // Reduce top padding on mobile + @include media-breakpoint-down(md) { + padding-top: 0; + } } .dark .search-header { @@ -72,6 +82,8 @@ line-height: 1; } +// Search box in modal + #search-box { position: relative; /* Required for search icon positioning. */ margin-bottom: 0.5rem; @@ -100,6 +112,17 @@ font-size: 0.8rem; } +.dark #search-query { + background-color: $sta-dark-background;; +} + +.form-control:focus { + border-color: $sta-primary; + box-shadow: 0 0 0 .2rem $sta-primary-light; +} + +// Search result items + .search-hit em { font-style: normal; background-color: #FFE0B2; @@ -121,9 +144,41 @@ display: none; } -.form-control:focus { - border-color: $sta-primary; - box-shadow: 0 0 0 .2rem $sta-primary-light; +// Search button in Book sidebar + +.sidebar-search { + place-self: center start; + display: flex; + align-items: center; +} + +.sidebar-search:hover { + color: rgba(0,0,0,.8); + box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); +} + +.dark .sidebar-search:hover { + color: rgba(255,255,255,.8); + box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); +} + +.sidebar-search-text { + flex-grow: 1; + text-align: left; +} + +.sidebar-search-shortcut { + box-shadow: 0 1px 1px rgba(12,13,14,0.15), inset 0 1px 0 0 #fff; + flex-shrink: 0; + padding: 1px 8px; + margin: 0 0 0 10px; + color: rgba(0,0,0,.6); + font-size: 1.2rem; + letter-spacing: 1px; + background: rgb(228, 230, 232); + border-radius: 5px; + border: 1px solid rgb(159, 166, 173); + line-height: 1.2; } // Common queries @@ -148,13 +203,8 @@ color: rgb(248, 248, 242); } -/* DARK themed components. */ +// Algolia dark-themed search input -/* Algolia search input */ .dark .ais-search-box--input { background-color: $sta-dark-background;; } - -.dark #search-query { - background-color: $sta-dark-background;; -} diff --git a/wowchemy/assets/scss/wowchemy/wowchemy.scss b/wowchemy/assets/scss/wowchemy/wowchemy.scss index f9402a33..b271ca68 100644 --- a/wowchemy/assets/scss/wowchemy/wowchemy.scss +++ b/wowchemy/assets/scss/wowchemy/wowchemy.scss @@ -16,7 +16,7 @@ @import "content"; @import "listings"; @import "widgets"; -@import "docs"; +@import "book"; @import "dark"; @import "integrations"; @import "rtl"; diff --git a/wowchemy/layouts/partials/book_sidebar.html b/wowchemy/layouts/partials/book_sidebar.html index 96ec6e46..4bf01edc 100644 --- a/wowchemy/layouts/partials/book_sidebar.html +++ b/wowchemy/layouts/partials/book_sidebar.html @@ -4,7 +4,11 @@ {{ if eq site.Params.search.engine 1 }} - + {{ end }} diff --git a/wowchemy/layouts/partials/search.html b/wowchemy/layouts/partials/search.html index 5dc8dbc9..d88a910c 100644 --- a/wowchemy/layouts/partials/search.html +++ b/wowchemy/layouts/partials/search.html @@ -1,6 +1,6 @@ {{/* Partial for built-in search and Algolia search. */}} {{ if eq site.Params.search.engine 1 | or (eq site.Params.search.engine 2) }} -