Merge pull request graphql#1007 from saswatamcode/fix-search-bar

Fix search bar issues

Author: orta

src/Containers/Sections/Hero/index.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'gatsby';
 import React from 'react';
 import HeaderLinks from '../../../components/HeaderLinks';
+import Search from '../../../components/Search';
 import Prism from '../../../components/Prism';
 
 
@@ -11,6 +12,7 @@ const Hero = () => {
           <header aria-hidden>
             <section>
               <HeaderLinks />
+              <Search searchID="hero-search-input" />
             </section>
           </header>
           <section className="intro">

src/assets/css/_css/algolia.less

@@ -23,11 +23,21 @@
     margin-top: 10px;
     outline: none;
     padding: 0 10px 0 35px;
-    width: 180px;
+    width: 160px;
     transition: width 0.2s ease-out;
 
-    &:focus {
-      width: 250px;
+    @media screen and (min-width: 1076px) {
+      &:focus {
+        width: 190px;
+      }
+    }
+    @media screen and (min-width: 1065px) and (max-width: 1075px) {
+      &:focus {
+        width: 180px;
+      }
+    }
+    @media screen and (min-width: 1021px) and (max-width: 1064px) {
+      width: 135px;
     }
   }
 

src/assets/css/_css/index.less

@@ -18,14 +18,6 @@ div.index {
     }
   }
 
-  .fixedSearch {
-    position: fixed;
-    right: 0;
-    left: 0;
-    z-index: 12;
-    pointer-events: none;
-  }
-
   .hero {
     background: @dark-color;
     @media screen and (min-width: 1020px) {

src/pages/index.tsx

@@ -1,8 +1,6 @@
 import React from "react"
 import Layout from "../components/Layout"
 
-import Search from "../components/Search"
-
 import Hero from "../Containers/Sections/Hero"
 import SingleRequest from "../Containers/Sections/SingleRequest"
 import TypeSystem from "../Containers/Sections/TypeSystem"
@@ -15,9 +13,6 @@ import WhosUsing from "../Containers/Sections/WhosUsing"
 export default ({ pageContext }) => {
   return (
     <Layout className={"index"} title="GraphQL | A query language for your API" pageContext={pageContext}>
-      <section className="fixedSearch">
-        <Search searchID="hero-search-input" />
-      </section>
       <Hero />
       <section className="lead">
         <h1>A query language for your API</h1>