make search responsive (codesandbox#1185)

SaraVieira · CompuIves · commit ea48b8e4b413 · 2018-10-10T14:03:21.000+02:00
diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/index.js b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/index.js
@@ -49,6 +49,7 @@ class Content extends React.Component {
           <DelayedAnimation
             delay={0.6}
             style={{
+              textAlign: 'center',
               marginTop: '2rem',
               fontWeight: 600,
               color: 'rgba(255, 255, 255, 0.5)',
diff --git a/packages/app/src/app/pages/Search/Filters/Filter/elements.js b/packages/app/src/app/pages/Search/Filters/Filter/elements.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   padding: 1rem;
@@ -19,10 +19,37 @@ export const Container = styled.div`
     font-size: 0.875rem;
     padding-left: 2.5em;
   }
+
+  @media (max-width: 768px) {
+    ${props =>
+      !props.open &&
+      css`
+        height: 30px;
+        overflow: hidden;
+      `};
+  }
 `;
 
 export const Title = styled.div`
   font-weight: 300;
   font-size: 1.25rem;
   margin-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  svg {
+    display: none;
+    width: 30px;
+    height: 30px;
+    @media (max-width: 768px) {
+      display: block;
+    }
+  }
+`;
+
+export const Button = styled.button`
+  border: none;
+  background: inherit;
+  color: ${props => props.theme.white};
 `;
diff --git a/packages/app/src/app/pages/Search/Filters/Filter/index.js b/packages/app/src/app/pages/Search/Filters/Filter/index.js
@@ -1,21 +1,31 @@
-import React from 'react';
-
+import React, { Component } from 'react';
+import Down from 'react-icons/lib/md/expand-more';
+import Up from 'react-icons/lib/md/expand-less';
 import { RefinementList } from 'react-instantsearch/dom';
 
-import { Container, Title } from './elements';
+import { Container, Title, Button } from './elements';
 
-function Filter({ title, attributeName, operator, noSearch }) {
-  return (
-    <Container>
-      <Title>{title}</Title>
-      <RefinementList
-        withSearchBox={!noSearch}
-        showMore={!noSearch}
-        operator={operator}
-        attributeName={attributeName}
-      />
-    </Container>
-  );
-}
+class Filter extends Component {
+  state = { open: false };
 
+  toggle = () => this.setState(({ open }) => ({ open: !open }));
+  render() {
+    const { title, attributeName, operator, noSearch } = this.props;
+    const { open } = this.state;
+    return (
+      <Container open={open}>
+        <Title>
+          <span>{title}</span>
+          <Button onClick={this.toggle}>{open ? <Up /> : <Down />}</Button>
+        </Title>
+        <RefinementList
+          withSearchBox={!noSearch}
+          showMore={!noSearch}
+          operator={operator}
+          attributeName={attributeName}
+        />
+      </Container>
+    );
+  }
+}
 export default Filter;
diff --git a/packages/app/src/app/pages/Search/Filters/elements.js b/packages/app/src/app/pages/Search/Filters/elements.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Container = styled.aside`
+  flex: 1;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+`;
diff --git a/packages/app/src/app/pages/Search/Filters/index.js b/packages/app/src/app/pages/Search/Filters/index.js
@@ -1,10 +1,11 @@
 import React from 'react';
 
 import Filter from './Filter';
+import { Container } from './elements';
 
 function Filters() {
   return (
-    <div style={{ flex: 1 }}>
+    <Container>
       <Filter
         title="Templates"
         operator="or"
@@ -17,7 +18,7 @@ function Filters() {
         attributeName="npm_dependencies.dependency"
       />
       <Filter title="Tags" operator="or" attributeName="tags" />
-    </div>
+    </Container>
   );
 }
 
diff --git a/packages/app/src/app/pages/Search/Results/elements.js b/packages/app/src/app/pages/Search/Results/elements.js
@@ -7,4 +7,11 @@ export const Container = styled.div`
   padding-top: 1rem;
 
   color: rgba(255, 255, 255, 0.6);
+
+  @media (max-width: 768px) {
+    margin-right: 0;
+    order: 1;
+
+    width: 100%;
+  }
 `;
diff --git a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/elements.js b/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/elements.js
@@ -10,6 +10,10 @@ export const CenteredText = styled.div`
 
 export const UpdatedAt = styled.em`
   font-size: 0.75rem;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 `;
 
 export const Stats = styled.div`
diff --git a/packages/app/src/app/pages/Search/SandboxCard/elements.js b/packages/app/src/app/pages/Search/SandboxCard/elements.js
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import Row from 'common/components/flex/Row';
 import getTemplateDefinition from 'common/templates';
 
 export const Container = styled.div`
@@ -51,4 +52,14 @@ export const Description = styled.p`
 export const TagContainer = styled.div`
   font-size: 0.75rem;
   width: 30%;
+
+  @media (max-width: 768px) {
+    width: auto;
+  }
+`;
+
+export const Header = styled(Row)`
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 `;
diff --git a/packages/app/src/app/pages/Search/SandboxCard/index.js b/packages/app/src/app/pages/Search/SandboxCard/index.js
@@ -4,7 +4,6 @@ import { Highlight } from 'react-instantsearch/dom';
 import Tags from 'app/components/Tags';
 
 import { sandboxUrl } from 'common/utils/url-generator';
-import Row from 'common/components/flex/Row';
 
 import SandboxInfo from './SandboxInfo';
 
@@ -14,13 +13,14 @@ import {
   Title,
   Description,
   TagContainer,
+  Header,
 } from './elements';
 
 function SandboxCard({ hit }) {
   return (
     <StyledLink to={sandboxUrl({ id: hit.objectID, git: hit.git })}>
       <Container template={hit.template}>
-        <Row alignItems="flex-start">
+        <Header alignItems="flex-start">
           <Title>
             {hit.title ? (
               <Highlight attributeName="title" hit={hit} />
@@ -35,7 +35,7 @@ function SandboxCard({ hit }) {
               tags={(hit.tags || []).filter(tag => tag.length < 20)}
             />
           </TagContainer>
-        </Row>
+        </Header>
         <Description>
           <Highlight attributeName="description" hit={hit} />
         </Description>
diff --git a/packages/app/src/app/pages/Search/elements.js b/packages/app/src/app/pages/Search/elements.js
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import Title from 'app/components/Title';
+import Row from 'common/components/flex/Row';
 
 export const Content = styled.div`
   margin-top: 5%;
@@ -11,4 +12,20 @@ export const StyledTitle = styled(Title)`
   display: inline-block;
   text-align: left;
   font-size: 2rem;
+
+  /* Algolia Icon */
+  + div {
+    @media (max-width: 768px) {
+      float: none;
+      margin-top: -10px;
+      padding: 0;
+      margin-bottom: 1.5rem;
+    }
+  }
+`;
+
+export const Main = styled(Row)`
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 `;
diff --git a/packages/app/src/app/pages/Search/index.js b/packages/app/src/app/pages/Search/index.js
@@ -5,7 +5,6 @@ import qs from 'qs';
 
 import MaxWidth from 'common/components/flex/MaxWidth';
 import Margin from 'common/components/spacing/Margin';
-import Row from 'common/components/flex/Row';
 
 import Navigation from 'app/pages/common/Navigation';
 import {
@@ -17,7 +16,7 @@ import {
 import './search.css';
 import Results from './Results';
 import Filters from './Filters';
-import { Content, StyledTitle } from './elements';
+import { Content, StyledTitle, Main } from './elements';
 
 const SEARCHABLE_THINGS = [
   'dependency',
@@ -80,7 +79,7 @@ class Search extends React.PureComponent {
         <Margin vertical={1.5} horizontal={1.5}>
           <Navigation title="Search" />
           <Content>
-            <MaxWidth width={1024}>
+            <MaxWidth responsive width={1024}>
               <InstantSearch
                 appId={ALGOLIA_APPLICATION_ID}
                 apiKey={ALGOLIA_API_KEY}
@@ -97,10 +96,10 @@ class Search extends React.PureComponent {
                     placeholder: `Search for a ${this.state.randomSearch}...`,
                   }}
                 />
-                <Row alignItems="flex-start">
+                <Main alignItems="flex-start">
                   <Results />
                   <Filters />
-                </Row>
+                </Main>
               </InstantSearch>
             </MaxWidth>
           </Content>
diff --git a/packages/app/src/app/utils/get-type.js b/packages/app/src/app/utils/get-type.js
@@ -51,6 +51,7 @@ export function getMode(title: string = '') {
   // TEST BASED
   const regexValues = Object.values(regexCasesMap);
   const match = regexValues.find(value =>
+    // $FlowIssue
     new RegExp(value).test(removeIgnoreTitle)
   );
 
diff --git a/packages/common/components/flex/MaxWidth.js b/packages/common/components/flex/MaxWidth.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const Container = styled.div`
   box-sizing: border-box;
@@ -9,6 +9,14 @@ const Container = styled.div`
 
   width: 100%;
   justify-content: center;
+
+  ${props =>
+    props.responsive &&
+    css`
+      @media (max-width: 768px) {
+        padding: 0;
+      }
+    `};
 `;
 
 const InnerContainer = styled.div`
@@ -20,12 +28,14 @@ export default ({
   children,
   width = 1280,
   className,
+  responsive = false,
 }: {
   children: React.CElement,
   width: number,
   className: string,
+  responsive: Boolean,
 }) => (
-  <Container>
+  <Container responsive={responsive}>
     <InnerContainer className={className} width={width}>
       {children}
     </InnerContainer>
