Makes search responsive on mobile

galahq · Nov 1, 2017 · ecf3a36 · ecf3a36
1 parent 00ce4f6
commit ecf3a36
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 12 deletions.
diff --git a/app/javascript/catalog/CaseList.jsx b/app/javascript/catalog/CaseList.jsx
@@ -45,6 +45,7 @@ const UnstyledList = styled.ul`
 
 const Image = styled.img.attrs({ role: 'presentation' })`
   width: 50px;
+  min-width: 50px;
   height: 50px;
   border-radius: 2px;
   margin-right: 1em;

diff --git a/app/javascript/catalog/CatalogToolbar.jsx b/app/javascript/catalog/CatalogToolbar.jsx
@@ -4,6 +4,7 @@
  */
 
 import * as React from 'react'
+import styled, { css } from 'styled-components'
 import { injectIntl } from 'react-intl'
 import { withRouter } from 'react-router-dom'
 
@@ -39,11 +40,17 @@ const CatalogToolbar = ({ history }: ContextRouter) => (
 
 export default withRouter(CatalogToolbar)
 
-class SearchField extends React.Component<ContextRouter & { intl: IntlShape }> {
+class SearchField extends React.Component<
+  ContextRouter & { intl: IntlShape },
+  { active: boolean }
+> {
+  state = { active: false }
   input: ?HTMLInputElement
 
   handleSubmit = (e: SyntheticEvent<*>) => {
     e.preventDefault()
+    if (!this.input || this.input.value === '') return
+
     this.input &&
       this.props.history.push(
         getSearchPath({
@@ -56,7 +63,10 @@ class SearchField extends React.Component<ContextRouter & { intl: IntlShape }> {
 
   render () {
     return (
-      <form onSubmit={this.handleSubmit}>
+      <FormCoveringToolbarOnMobile
+        active={this.state.active}
+        onSubmit={this.handleSubmit}
+      >
         <InputGroup
           inputRef={el => (this.input = el)}
           className="pt-round"
@@ -71,10 +81,28 @@ class SearchField extends React.Component<ContextRouter & { intl: IntlShape }> {
             id: 'catalog.search',
             defaultMessage: 'Search cases',
           })}
+          onFocus={() => this.setState({ active: true })}
+          onBlur={() => this.setState({ active: false })}
         />
-      </form>
+      </FormCoveringToolbarOnMobile>
     )
   }
 }
 
 const Search = withRouter(injectIntl(SearchField))
+
+const FormCoveringToolbarOnMobile = styled.form`
+  @media screen and (max-width: 513px) {
+    background-color: #1d3f5e;
+    margin-left: -24px;
+    ${({ active }) =>
+      active
+        ? css`
+            margin-left: 0px;
+            position: absolute;
+            left: 14px;
+            width: calc(100vw - 28px);
+          `
+        : ''};
+  }
+`
diff --git a/app/javascript/catalog/Results.jsx b/app/javascript/catalog/Results.jsx
@@ -4,7 +4,6 @@
  */
 
 import * as React from 'react'
-import styled from 'styled-components'
 import qs from 'qs'
 import { map } from 'ramda'
 
@@ -16,6 +15,7 @@ import CaseList from 'catalog/CaseList'
 import LibraryInfo from 'catalog/LibraryInfo'
 import SearchForm from 'catalog/SearchForm'
 import { Main, CatalogSection, SectionTitle } from 'catalog/shared'
+import { Container as Sidebar } from 'catalog/Sidebar'
 
 import type { ContextRouter } from 'react-router-dom'
 import type { State } from 'catalog'
@@ -101,8 +101,3 @@ function getQueryFromPathname (pathname: string): { [string]: string[] } {
     return params
   }, {})
 }
-
-const Sidebar = styled.aside`
-  width: 18em;
-  margin: 0 0.5em 2em;
-`
diff --git a/app/javascript/catalog/Sidebar.jsx b/app/javascript/catalog/Sidebar.jsx
@@ -49,8 +49,9 @@ const Sidebar = ({
 
 export default Sidebar
 
-const Container = styled.aside`
+export const Container = styled.aside`
   width: 18em;
+
   @media (max-width: 700px) {
     width: 100%;
   }

diff --git a/app/javascript/catalog/index.jsx b/app/javascript/catalog/index.jsx
@@ -93,7 +93,7 @@ class Catalog extends React.Component<{ intl: IntlShape }, State> {
   render () {
     return (
       <Router>
-        <div style={{ minHeight: '100%' }}>
+        <Container>
           <CatalogToolbar />
           <MaxWidthContainer>
             <Window>
@@ -122,7 +122,7 @@ class Catalog extends React.Component<{ intl: IntlShape }, State> {
               </Switch>
             </Window>
           </MaxWidthContainer>
-        </div>
+        </Container>
       </Router>
     )
   }
@@ -135,6 +135,11 @@ class Catalog extends React.Component<{ intl: IntlShape }, State> {
 
 export default injectIntl(Catalog)
 
+const Container = styled.div`
+  min-height: 100%;
+  width: 100vw;
+  overflow: hidden;
+`
 const Window = styled.div`
   min-height: 100%;
   position: relative;