mobile fixes (codesandbox#1168)

SaraVieira · CompuIves · commit 8bc3bca70ceb · 2018-10-08T15:42:07.000+02:00
diff --git a/packages/app/src/app/index.html b/packages/app/src/app/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:type" content="website">
   <meta property="og:author" content='https://ivesvh.com'>
   <meta property="og:title" content="CodeSandbox">
@@ -83,4 +83,4 @@
   </div>
 </body>
 
-</html>
+</html>
diff --git a/packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/Template/elements.js b/packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/Template/elements.js
@@ -6,18 +6,22 @@ export const Container = styled.div`
   padding: 1em;
   color: white;
 
-  width: ${props => props.width}px;
+  width: 100%;
   border: 2px solid rgba(0, 0, 0, 0.3);
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   display: flex;
   align-items: center;
   margin-bottom: 1em;
-  margin-right: 1em;
   cursor: pointer;
 
-  &:last-child {
-    margin-right: 0;
+  @media (min-width: 768px) {
+    width: ${props => props.width}px;
+    margin-right: 1em;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
   outline: none;
diff --git a/packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/elements.js b/packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/elements.js
@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import delayEffect from 'common/utils/animation/delay-effect';
 import delayOutEffect from 'common/utils/animation/delay-out-effect';
 
-export const Container = styled.div`
+export const Container = styled.main`
   transition: 0.3s ease all;
   background-color: ${props => props.theme.background};
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
@@ -51,7 +51,7 @@ export const Title = styled.h2`
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.4);
+  color: rgba(255, 255, 255, 0.5);
   margin-bottom: 1rem;
   margin-top: 1rem;
 
@@ -63,26 +63,27 @@ export const Title = styled.h2`
 export const Templates = styled.div`
   display: flex;
   align-items: center;
+
+  @media (max-width: 870px) {
+    flex-wrap: wrap;
+  }
+`;
+
+export const ImportChoices = Templates.extend`
+  justify-content: space-between;
 `;
 
 export const ImportChoice = styled.a`
   transition: 0.2s ease color;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.6);
   text-decoration: none;
-  width: 100%;
   font-size: 1.125rem;
+  margin-top: 0.2rem;
 
   display: flex;
   align-items: center;
 
-  &:nth-child(2) {
-    justify-content: center;
-  }
-  &:nth-child(3) {
-    justify-content: flex-end;
-  }
-
   svg {
     margin-right: 0.5rem;
   }
diff --git a/packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/index.js b/packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/index.js
@@ -12,6 +12,7 @@ import {
   Templates,
   Title,
   ImportChoice,
+  ImportChoices,
 } from './elements';
 import Template from './Template';
 
@@ -106,7 +107,7 @@ export default class Modal extends React.PureComponent {
             </Templates>
           ))}
 
-          <Templates style={{ marginTop: '1.5rem' }}>
+          <ImportChoices style={{ marginTop: '1.5rem' }}>
             <ImportChoice
               href="/docs/importing#import-from-github"
               target="_blank"
@@ -122,7 +123,7 @@ export default class Modal extends React.PureComponent {
             <ImportChoice href="/docs/importing#define-api" target="_blank">
               <UploadIcon /> Create with API
             </ImportChoice>
-          </Templates>
+          </ImportChoices>
         </InnerContainer>
       </Container>
     );
diff --git a/packages/app/src/app/pages/Dashboard/Content/SandboxGrid/elements.js b/packages/app/src/app/pages/Dashboard/Content/SandboxGrid/elements.js
@@ -21,4 +21,9 @@ export const Content = styled.div`
   height: calc(100% - 23px);
   padding-top: 2rem;
   box-sizing: border-box;
+
+  @media (max-width: 768px) {
+    width: calc(100% - 30px);
+    margin-left: 30px;
+  }
 `;
diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/elements.js b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/elements.js
@@ -7,4 +7,10 @@ export const Container = styled.div`
   bottom: 0;
   display: flex;
   align-items: center;
+
+  @media (max-width: 1000px) {
+    position: relative;
+    right: 0;
+    margin-top: 1rem;
+  }
 `;
diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/index.js b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/index.js
@@ -4,7 +4,7 @@ import DelayedAnimation from 'app/components/DelayedAnimation';
 import SandboxGrid from '../SandboxGrid';
 import Filters from './Filters';
 
-import { Container, HeaderContainer } from '../elements';
+import { Container, HeaderContainer, HeaderTitle } from '../elements';
 
 // eslint-disable-next-line react/prefer-stateless-function
 class Content extends React.Component {
@@ -23,13 +23,7 @@ class Content extends React.Component {
     return (
       <Container>
         <HeaderContainer>
-          <div
-            style={{
-              display: 'flex',
-              verticalAlign: 'middle',
-              alignItems: 'center',
-            }}
-          >
+          <HeaderTitle>
             {Header}{' '}
             {sandboxes &&
               !isLoading && (
@@ -44,7 +38,7 @@ class Content extends React.Component {
                   {sandboxes.length}
                 </span>
               )}
-          </div>
+          </HeaderTitle>
           <Filters
             hideOrder={hideOrder}
             hideFilters={hideFilters}
diff --git a/packages/app/src/app/pages/Dashboard/Content/elements.js b/packages/app/src/app/pages/Dashboard/Content/elements.js
@@ -11,6 +11,10 @@ export const HeaderContainer = styled.div`
   position: relative;
   font-size: 1.25rem;
   color: white;
+
+  @media (max-width: 768px) {
+    margin-left: 1rem;
+  }
 `;
 
 export const Description = styled.p`
@@ -21,4 +25,14 @@ export const Description = styled.p`
     props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
 
   line-height: 1.6;
+
+  @media (max-width: 768px) {
+    margin-left: 1rem;
+  }
+`;
+
+export const HeaderTitle = styled.div`
+  display: flex;
+  vertical-align: middle;
+  align-items: center;
 `;
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/elements.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/elements.js
@@ -20,6 +20,10 @@ export const Section = styled.div`
 
 export const Members = styled.div`
   margin-top: 1rem;
+
+  @media (max-width: 768px) {
+    margin-left: 1rem;
+  }
 `;
 
 export const MemberHeader = styled.div`
diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/elements.js b/packages/app/src/app/pages/Dashboard/Sidebar/elements.js
@@ -18,3 +18,13 @@ export const CategoryHeader = styled.div`
   text-decoration: none;
   font-weight: 600;
 `;
+
+export const SidebarStyled = styled.aside`
+  width: 275px;
+  overflow-y: auto;
+`;
+
+export const InputWrapper = styled.div`
+  margin: 0 1rem;
+  margin-bottom: 1.5rem;
+`;
diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/index.js b/packages/app/src/app/pages/Dashboard/Sidebar/index.js
@@ -12,7 +12,7 @@ import { teamOverviewUrl } from 'common/utils/url-generator';
 import Item from './Item';
 import SandboxesItem from './SandboxesItem';
 import TrashItem from './TrashItem';
-import { Items, CategoryHeader } from './elements';
+import { Items, CategoryHeader, SidebarStyled, InputWrapper } from './elements';
 import { TEAMS_QUERY } from '../queries';
 
 class Sidebar extends React.Component {
@@ -34,16 +34,16 @@ class Sidebar extends React.Component {
     const { store } = this.props;
 
     return (
-      <div style={{ width: 275, overflowY: 'auto' }}>
-        <div style={{ margin: '0 1rem', marginBottom: '1.5rem' }}>
+      <SidebarStyled>
+        <InputWrapper>
           <Input
             onFocus={this.handleSearchFocus}
             block
             value={store.dashboard.filters.search}
             onChange={this.handleSearchChange}
             placeholder="Filter Sandboxes"
           />
-        </div>
+        </InputWrapper>
 
         <Items style={{ marginBottom: '1rem' }}>
           <Item Icon={TimeIcon} path="/dashboard/recent" name="Recent" />
@@ -89,7 +89,7 @@ class Sidebar extends React.Component {
             Create Team
           </Button>
         </div>
-      </div>
+      </SidebarStyled>
     );
   }
 }
diff --git a/packages/app/src/app/pages/Dashboard/elements.js b/packages/app/src/app/pages/Dashboard/elements.js
@@ -35,6 +35,17 @@ export const NavigationContainer = styled.div`
   right: 1rem;
 `;
 
+export const ShowSidebarButton = styled.button`
+  opacity: 0;
+  transition: opacity 200ms ease;
+  border: none;
+  background-color: rgba(255, 255, 255, 0.1);
+
+  @media (max-width: 768px) {
+    opacity: 1;
+  }
+`;
+
 const paddingTop = css`
   padding-top: 100px;
 `;
@@ -49,6 +60,19 @@ export const Sidebar = styled.div`
   ${paddingTop};
 
   box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
+
+  @media (max-width: 768px) {
+    width: 0;
+    position: fixed;
+    transition: width 200ms ease;
+    z-index: 1;
+
+    ${props =>
+      props.active &&
+      css`
+        width: 275px;
+      `};
+  }
 `;
 
 export const Content = styled.div`
diff --git a/packages/app/src/app/pages/Dashboard/index.js b/packages/app/src/app/pages/Dashboard/index.js
@@ -1,6 +1,9 @@
 // @ts-check
 import * as React from 'react';
 import { inject, observer } from 'mobx-react';
+import RightIcon from 'react-icons/lib/md/keyboard-arrow-right';
+import LeftIcon from 'react-icons/lib/md/keyboard-arrow-left';
+import { withRouter } from 'react-router-dom';
 
 import Navigation from 'app/pages/common/Navigation';
 import SignInButton from 'app/pages/common/SignInButton';
@@ -16,9 +19,14 @@ import {
   LoggedInSubTitle,
   Sidebar,
   NavigationContainer,
+  ShowSidebarButton,
 } from './elements';
 
 class Dashboard extends React.Component {
+  state = {
+    showSidebar: false,
+  };
+
   componentDidMount() {
     this.props.signals.dashboard.dashboardMounted();
   }
@@ -28,13 +36,36 @@ class Dashboard extends React.Component {
     client.resetStore();
   }
 
+  onRouteChange = () => {
+    this.setState({ showSidebar: false });
+  };
+
+  toggleSidebar = () => {
+    this.setState(({ showSidebar }) => ({ showSidebar: !showSidebar }));
+  };
+
   render() {
-    const signedIn = this.props.store.hasLogIn;
+    const {
+      store: { hasLogIn },
+      history,
+    } = this.props;
+    const { showSidebar } = this.state;
+
+    history.listen(() => {
+      this.onRouteChange();
+    });
 
     let DashboardContent = (
       <React.Fragment>
-        <Sidebar>
+        <Sidebar active={showSidebar}>
           <SidebarContents />
+          <ShowSidebarButton onClick={this.toggleSidebar}>
+            {showSidebar ? (
+              <LeftIcon style={{ color: 'white' }} />
+            ) : (
+              <RightIcon style={{ color: 'white' }} />
+            )}
+          </ShowSidebarButton>
         </Sidebar>
 
         <ContentContainer>
@@ -43,7 +74,7 @@ class Dashboard extends React.Component {
       </React.Fragment>
     );
 
-    if (!signedIn) {
+    if (!hasLogIn) {
       DashboardContent = (
         <Container>
           <LoggedInContainer>
@@ -71,4 +102,4 @@ class Dashboard extends React.Component {
   }
 }
 
-export default inject('store', 'signals')(observer(Dashboard));
+export default inject('store', 'signals')(observer(withRouter(Dashboard)));
diff --git a/packages/app/src/app/pages/NewSandbox/index.js b/packages/app/src/app/pages/NewSandbox/index.js
@@ -30,7 +30,7 @@ class NewSandboxComponent extends React.PureComponent {
           <Margin top={9}>
             <Centered horizontal vertical>
               <Title>New Sandbox</Title>
-              <Margin style={{ width: 950 }} top={2}>
+              <Margin style={{ maxWidth: '100%', width: 950 }} top={2}>
                 <NewSandboxModal
                   createSandbox={this.createSandbox}
                   width={950}
diff --git a/packages/app/src/app/pages/common/Navigation/elements.js b/packages/app/src/app/pages/common/Navigation/elements.js
diff --git a/packages/app/src/app/pages/common/Navigation/index.js b/packages/app/src/app/pages/common/Navigation/index.js
