From 99f4b55ddf24b50b68fa4aebf91644b73e0d3bdb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Tue, 19 Sep 2017 13:07:00 -0700
Subject: [PATCH 1/2] Header component search input fixed for mobile

---
 www/src/components/LayoutHeader/Header.js    | 75 ++++++++++++--------
 www/src/components/LayoutHeader/SearchSvg.js |  2 +-
 www/static/search.svg                        | 14 ++++
 3 files changed, 60 insertions(+), 31 deletions(-)
 create mode 100644 www/static/search.svg

diff --git a/www/src/components/LayoutHeader/Header.js b/www/src/components/LayoutHeader/Header.js
index b30910b114c9..a46ea866e06f 100644
--- a/www/src/components/LayoutHeader/Header.js
+++ b/www/src/components/LayoutHeader/Header.js
@@ -15,7 +15,6 @@ import Container from 'components/Container';
 import HeaderLink from './HeaderLink';
 import Link from 'gatsby-link';
 import React from 'react';
-import SearchSvg from './SearchSvg';
 import {colors, fonts, media} from 'theme';
 
 import logoSvg from 'icons/logo.svg';
@@ -52,7 +51,13 @@ const Header = ({location}) => (
         <Link
           css={{
             display: 'flex',
-            width: 'calc(100% / 6)',
+
+            [media.greaterThan('small')]: {
+              width: 'calc(100% / 6)',
+            },
+            [media.lessThan('small')]: {
+              flex: '0 0 auto',
+            },
           }}
           to="/">
           <img src={logoSvg} alt="" height="20" />
@@ -125,53 +130,63 @@ const Header = ({location}) => (
 
         <form
           css={{
-            width: 'calc(100% / 6)',
             display: 'flex',
+            flex: '0 0 auto',
             flexDirection: 'row',
             alignItems: 'center',
+            paddingLeft: '0.5rem',
+
             [media.lessThan('small')]: {
               justifyContent: 'flex-end',
             },
             [media.between('small', 'medium')]: {
               width: 'calc(100% / 3)',
             },
+            [media.between('medium', 'xlarge')]: {
+              width: 'calc(100% / 6)',
+            },
             [media.greaterThan('xlarge')]: {
               width: 'calc(100% / 3)',
             },
           }}>
-          <label htmlFor="algolia-doc-search">
-            <SearchSvg />
-          </label>
-          <div
+          <input
             css={{
-              flexGrow: 1,
-              paddingLeft: 10,
-              [media.size('xsmall')]: {
-                display: 'none',
+              appearance: 'none',
+              background: 'transparent',
+              border: 0,
+              color: colors.white,
+              fontSize: 18,
+              fontFamily: 'inherit',
+              position: 'relative',
+              paddingLeft: '24px',
+              backgroundImage: 'url(/search.svg)',
+              backgroundSize: '16px 16px',
+              backgroundRepeat: 'no-repeat',
+              backgroundPositionY: 'center',
+              backgroundPositionX: 'left',
+
+              [media.lessThan('large')]: {
+                fontSize: 14,
               },
-            }}>
-            <input
-              css={{
-                appearance: 'none',
-                background: 'transparent',
-                border: 0,
-                color: colors.white,
+              [media.greaterThan('small')]: {
                 width: '100%',
-                fontSize: 18,
-                fontFamily: 'inherit',
-                position: 'relative',
+              },
+              [media.lessThan('small')]: {
+                width: '16px',
+                transition: 'width 0.2s ease, padding 0.2s ease',
+                paddingLeft: '16px',
+
                 ':focus': {
+                  paddingLeft: '24px',
+                  width: '8rem',
                   outline: 'none',
                 },
-                [media.lessThan('large')]: {
-                  fontSize: 14,
-                },
-              }}
-              id="algolia-doc-search"
-              type="search"
-              placeholder="Search docs"
-            />
-          </div>
+              },
+            }}
+            id="algolia-doc-search"
+            type="search"
+            placeholder="Search docs"
+          />
         </form>
 
         <div
diff --git a/www/src/components/LayoutHeader/SearchSvg.js b/www/src/components/LayoutHeader/SearchSvg.js
index 415198338f93..1be8fceaee9e 100644
--- a/www/src/components/LayoutHeader/SearchSvg.js
+++ b/www/src/components/LayoutHeader/SearchSvg.js
@@ -18,7 +18,7 @@ const SearchSvg = () => (
     alt="Search"
     height="16"
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16.00054">
+    viewBox="0 0 16 16">
     <title>Search</title>
     <path
       d={`
diff --git a/www/static/search.svg b/www/static/search.svg
new file mode 100644
index 000000000000..405612de7827
--- /dev/null
+++ b/www/static/search.svg
@@ -0,0 +1,14 @@
+<svg
+  alt="Search"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+>
+  <path
+    d="
+      M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,
+      0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,
+      0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,
+      4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z"
+    fill="#ffffff"
+  />
+</svg>
\ No newline at end of file

From f71981d0360e65fd93551c3fb2cd5c7f0d3b828f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Tue, 19 Sep 2017 14:11:09 -0700
Subject: [PATCH 2/2] Hacked Algolia popup styles for mobile

---
 www/src/css/algolia.css | 83 ++++++++++++++++++++++++-----------------
 1 file changed, 49 insertions(+), 34 deletions(-)

diff --git a/www/src/css/algolia.css b/www/src/css/algolia.css
index 61149f8d1323..656aede4ab28 100644
--- a/www/src/css/algolia.css
+++ b/www/src/css/algolia.css
@@ -186,40 +186,6 @@
   }
 }
 
-.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
-  right: 0 !important;
-  left: inherit !important;
-}
-
-.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before {
-  right: 48px;
-}
-
-.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
-  left: 0 !important;
-  right: inherit !important;
-}
-
-.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu:before {
-  left: 48px;
-}
-
-.algolia-autocomplete .ds-dropdown-menu {
-  position: relative;
-  top: -6px;
-  border-radius: 4px;
-  margin: 6px 0 0;
-  padding: 0;
-  text-align: left;
-  height: auto;
-  position: relative;
-  background: transparent;
-  border: none;
-  z-index: 999;
-  max-width: 600px;
-  min-width: 500px;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
-}
 
 .algolia-autocomplete .ds-dropdown-menu:before {
   display: block;
@@ -237,6 +203,55 @@
   border-radius: 2px;
 }
 
+.algolia-autocomplete .ds-dropdown-menu {
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 601px) {
+  .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
+    right: 0 !important;
+    left: inherit !important;
+  }
+
+  .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before {
+    right: 48px;
+  }
+
+  .algolia-autocomplete .ds-dropdown-menu {
+    position: relative;
+    top: -6px;
+    border-radius: 4px;
+    margin: 6px 0 0;
+    padding: 0;
+    text-align: left;
+    height: auto;
+    position: relative;
+    background: transparent;
+    border: none;
+    z-index: 999;
+    max-width: 600px;
+    min-width: 500px;
+  }
+}
+
+@media (max-width: 600px) {
+  .algolia-autocomplete .ds-dropdown-menu {
+    z-index: 100;
+    position: fixed !important;
+    top: 40px !important;
+    left: auto !important;
+    right: 1rem !important;
+    width: 600px;
+    max-width: calc(100% - 2rem);
+    max-height: calc(100% - 5rem);
+    display: block;
+  }
+
+  .algolia-autocomplete .ds-dropdown-menu:before {
+    right: 6rem;
+  }
+}
+
 .algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
   position: relative;
   z-index: 1000;