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.

wowchemy/assets/scss/wowchemy/_docs.scss → 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;

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;;
-}

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";

wowchemy/layouts/partials/book_sidebar.html

@@ -4,7 +4,11 @@
   </button>
 
   {{ if eq site.Params.search.engine 1 }}
-  <input name="q" type="search" class="form-control" placeholder="{{ i18n "search_placeholder" }}" autocomplete="off">
+  <button class="form-control sidebar-search js-search">
+    <i class="fas fa-search pr-2"></i>
+    <span class="sidebar-search-text">{{ i18n "search_placeholder" }}</span>
+    <span class="sidebar-search-shortcut">/</span>
+  </button>
   {{ end }}
 </form>
 

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) }}
-<aside class="search-results" id="search">
+<aside class="search-modal" id="search">
   <div class="container">
     <section class="search-header">