Header component search input fixed for mobile (#10749)

* Header component search input fixed for mobile * Hacked Algolia popup styles for mobile
facebook · Sep 19, 2017 · 00296ea · 00296ea
1 parent 7f254de
commit 00296ea
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 65 deletions.
diff --git 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
@@ -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/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;

diff --git a/www/static/search.svg b/www/static/search.svg