resolves #46 enable search on mobile (PR #77)

Author: mojavelinux

src/css/header.css

@@ -60,12 +60,14 @@ body {
 
 #search {
   display: flex;
+  position: relative; /* make results relative to whole search field, not just input */
   color: var(--body-font-color);
   width: 100%;
 }
 
 #search > .algolia-autocomplete {
   display: inherit !important;
+  position: static !important;
   flex: auto;
 }
 
@@ -246,7 +248,12 @@ body {
   }
 
   .navbar-end .navbar-item.search {
-    display: none;
+    height: 3rem;
+    display: flex;
+  }
+
+  #search .query {
+    height: 100%;
   }
 }
 
@@ -330,8 +337,8 @@ body {
     background: var(--navbar-menu-background);
     border: 1px solid var(--navbar-menu-border-color);
     border-top: 2px solid var(--color-brand-primary);
-    border-radius: 0 0 0.25rem 0.25rem;
-    box-shadow: 0 2px 4px var(--navbar-menu-box-shadow);
+    border-radius: var(--navbar-menu-border-radius);
+    box-shadow: var(--navbar-menu-box-shadow);
     display: none;
     top: 100%;
     left: 0;

src/css/vars.css

@@ -46,7 +46,8 @@
   --navbar-button-border-color: var(--panel-border-color);
   --navbar-button-font-color: var(--body-font-color);
   --navbar-menu-border-color: var(--panel-border-color);
-  --navbar-menu-box-shadow: rgba(160, 160, 160, 0.15);
+  --navbar-menu-border-radius: 0 0 0.25rem 0.25rem;
+  --navbar-menu-box-shadow: 0 2px 4px rgba(160, 160, 160, 0.15);
   --navbar-menu-background: var(--color-white);
   --navbar-menu-font-color: var(--body-font-color);
   --navbar-menu_hover-background: var(--color-smoke-50);

src/css/vendor/docsearch.css

@@ -1,33 +1,70 @@
 @import "docsearch.js/dist/cdn/docsearch.css";
 
+.algolia-autocomplete .ds-dropdown-menu {
+  max-width: none;
+  min-width: auto;
+  width: 100%;
+  font-size: initial;
+  background: var(--color-white);
+  border: 1px solid var(--navbar-button-border-color);
+  border-radius: var(--navbar-menu-border-radius);
+  box-shadow: var(--navbar-menu-box-shadow);
+}
+
 .algolia-autocomplete .ds-dropdown-menu::before {
   border-color: var(--navbar-button-border-color);
   border-radius: 0;
 }
 
 .algolia-autocomplete .ds-dropdown-menu > :first-child {
-  max-height: calc(var(--viewport-height) - var(--navbar-height));
-  border-radius: 0.1em;
-  border-color: var(--navbar-button-border-color);
+  max-height: calc(var(--viewport-height) - var(--navbar-height) - 4rem);
   padding-bottom: 0;
-}
-
-.algolia-autocomplete .ds-dropdown-menu > :first-child > :last-child {
-  margin-bottom: 8px;
+  border: none;
+  background: none;
+  border-radius: 0;
 }
 
 .algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
   margin-top: 4px;
 }
 
+.algolia-autocomplete .algolia-docsearch-suggestion {
+  background: none;
+}
+
 .algolia-autocomplete .algolia-docsearch-suggestion--title {
   font-weight: var(--body-font-weight-bold);
 }
 
-/*
-@media screen and (max-width: 1023.5px) {
-  .algolia-autocomplete .ds-dropdown-menu {
-    min-width: calc(100vw - var(--navbar-height)) !important;
+.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+  font-weight: normal;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column::after {
+  display: none;
+}
+
+.algolia-docsearch-suggestion--subcategory-column-text::after {
+  content: "|";
+  padding: 0 0.5em;
+}
+
+.algolia-autocomplete .ds-dropdown-menu > :first-child > :last-child {
+  margin-bottom: 8px;
+}
+
+@media screen and (min-width: 769px) {
+  .algolia-docsearch-suggestion--subcategory-column-text::after {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .algolia-autocomplete .ds-dropdown-menu.ds-with-1 {
+    width: 28rem;
+  }
+
+  .algolia-autocomplete .ds-dropdown-menu > :first-child {
+    max-height: calc(var(--viewport-height) - var(--navbar-height));
   }
 }
-*/