feat(website): mobile support

christianalfoni · christianalfoni · commit 948a5e51336d · 2018-08-29T20:19:47.000+02:00
diff --git a/packages/overmind-website/backend/index.html b/packages/overmind-website/backend/index.html
@@ -90,6 +90,8 @@
       border-radius: 50%;
       width: 125px;
       height: 125px;
+      box-shadow: 0 0 0 rgba(206, 206, 206, 0.4);
+      animation: pulse 2s infinite 0.5s;
     }
 
     #overmind-inner-circle {
@@ -113,6 +115,33 @@
       height: 25px;
       width: 125px;
     }
+
+    @-webkit-keyframes pulse {
+      0% {
+        -webkit-box-shadow: 0 0 0 0 rgba(206, 206, 206, 0.4);
+      }
+      70% {
+        -webkit-box-shadow: 0 0 0 20px rgba(211, 211, 211, 0);
+      }
+      100% {
+        -webkit-box-shadow: 0 0 0 0 rgba(199, 199, 199, 0);
+      }
+    }
+
+    @keyframes pulse {
+      0% {
+        -moz-box-shadow: 0 0 0 0 rgba(201, 201, 201, 0.4);
+        box-shadow: 0 0 0 0 rgba(196, 196, 196, 0.4);
+      }
+      70% {
+        -moz-box-shadow: 0 0 0 20px rgba(202, 202, 202, 0);
+        box-shadow: 0 0 0 20px rgba(209, 209, 209, 0);
+      }
+      100% {
+        -moz-box-shadow: 0 0 0 0 rgba(206, 206, 206, 0);
+        box-shadow: 0 0 0 0 rgba(202, 202, 202, 0);
+      }
+    }
   </style>
   <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
diff --git a/packages/overmind-website/examples/api/app_initialize.ts b/packages/overmind-website/examples/api/app_initialize.ts
@@ -1,4 +1,4 @@
-import tsAppIndex from '../tsAppIndex'
+import { tsAppIndex } from '../templates'
 
 function createJsCode(view) {
   return [
diff --git a/packages/overmind-website/examples/guide/getstarted/actions.ts b/packages/overmind-website/examples/guide/getstarted/actions.ts
@@ -1,4 +1,4 @@
-import tsAppIndex from '../../tsAppIndex'
+import { tsAppIndex } from '../../templates'
 
 function createJsCode(view) {
   return [
diff --git a/packages/overmind-website/examples/guide/getstarted/createapp.ts b/packages/overmind-website/examples/guide/getstarted/createapp.ts
@@ -1,4 +1,4 @@
-import tsAppIndex from '../../tsAppIndex'
+import { tsAppIndex } from '../../templates'
 
 function createJsCode(view) {
   return [
diff --git a/packages/overmind-website/examples/guide/getstarted/devtools.ts b/packages/overmind-website/examples/guide/getstarted/devtools.ts
@@ -1,11 +1,13 @@
+import { getPackageWithVersion } from '../../templates'
+
 export const js = [
   {
     fileName: 'package.json',
     code: `
 {
   "name": "my-app",
   "scripts": {
-    "devtools": "npx overmind-devtools@next"
+    "devtools": "npx ${getPackageWithVersion('overmind-devtools')}"
   }
 }
   `,
diff --git a/packages/overmind-website/examples/guide/getstarted/effects.ts b/packages/overmind-website/examples/guide/getstarted/effects.ts
@@ -1,4 +1,4 @@
-import tsAppIndex from '../../tsAppIndex'
+import { tsAppIndex } from '../../templates'
 
 function createJsCode(view) {
   return [
diff --git a/packages/overmind-website/examples/guide/getstarted/install.ts b/packages/overmind-website/examples/guide/getstarted/install.ts
@@ -1,7 +1,9 @@
+import { getPackageWithVersion } from '../../templates'
+
 export const react = [
   {
     code: `
-npm install react-overmind
+npm install ${getPackageWithVersion('react-overmind')}
   `,
   },
 ]
@@ -11,7 +13,7 @@ export const reactTs = react
 export const vue = [
   {
     code: `
-npm install vue-overmind
+npm install ${getPackageWithVersion('vue-overmind')}
   `,
   },
 ]
diff --git a/packages/overmind-website/examples/guide/runningsideeffects/axios.ts b/packages/overmind-website/examples/guide/runningsideeffects/axios.ts
@@ -1,4 +1,4 @@
-import tsAppIndex from '../../tsAppIndex'
+import { tsAppIndex } from '../../templates'
 
 function createJsCode(view) {
   return [
diff --git a/packages/overmind-website/examples/templates.ts b/packages/overmind-website/examples/templates.ts
@@ -1,4 +1,7 @@
-export default (view, config) => `
+const getVersion = () => (location.host.split('.')[0] === 'next' ? '@next' : '')
+
+export const tsAppIndex = (view, config) => {
+  return `
 import App, { TConnect } from '${view}'
 ${config.trim()}
 
@@ -13,3 +16,6 @@ export type Connect = TConnect<typeof app>
 
 export default app
 `
+}
+
+export const getPackageWithVersion = (name) => name + getVersion()
diff --git a/packages/overmind-website/guides/beginner/05_connectingcomponents.md b/packages/overmind-website/guides/beginner/05_connectingcomponents.md
@@ -0,0 +1 @@
+# Connecting components
diff --git a/packages/overmind-website/src/components/App/index.tsx b/packages/overmind-website/src/components/App/index.tsx
@@ -3,12 +3,13 @@ import FrontPage from '../FrontPage'
 import * as page from 'page'
 import * as themes from 'overmind-themes'
 import { ThemeProvider } from '../../styled-components'
-import { getTheme } from '../../utils'
+import { getTheme, viewport } from '../../utils'
 import Guides from '../Guides'
 import Videos from '../Videos'
 import Guide from '../Guide'
 import Api from '../Api'
 import TopBar from '../TopBar'
+import MobileTopBar from '../MobileTopBar'
 import { Wrapper } from './elements'
 
 const routesMap = {
@@ -104,7 +105,15 @@ class App extends React.Component<{}, State> {
     return (
       <ThemeProvider theme={themes[getTheme()]}>
         <Wrapper>
-          <TopBar currentPage={currentPage} selectedTheme={getTheme()} />
+          {viewport.isMobile ? (
+            <MobileTopBar
+              currentPage={currentPage}
+              selectedTheme={getTheme()}
+              currentPath={currentPath}
+            />
+          ) : (
+            <TopBar currentPage={currentPage} selectedTheme={getTheme()} />
+          )}
           <Page
             currentPath={currentPath}
             isLoading={this.state.isLoading}
diff --git a/packages/overmind-website/src/components/Doc/elements.tsx b/packages/overmind-website/src/components/Doc/elements.tsx
@@ -11,6 +11,11 @@ export const Content = styled.div`
   font-size: 18px;
   color: ${({ theme }) => theme.color.black};
 
+  @media (max-width: 700px) {
+    width: 100%;
+    padding: ${({ theme }) => `${theme.padding.large} ${theme.padding.normal}`};
+  }
+
   ol {
     list-style: none;
     counter-reset: li;
diff --git a/packages/overmind-website/src/components/FrontPage/elements.tsx b/packages/overmind-website/src/components/FrontPage/elements.tsx
@@ -7,6 +7,8 @@ export const QuickstartWrapper = styled.div`
   left: 0;
   width: 100vw;
   display: flex;
+  bottom: -75px;
+  transition: bottom 0.5s ease-out;
 `
 
 export const Quickstart = styled.a`
@@ -19,8 +21,8 @@ export const Quickstart = styled.a`
   justify-content: center;
   text-decoration: none;
   flex: 1;
-  > *:first-child {
-    margin-right: 15px;
+  > *:nth-child(2) {
+    margin-left: 15px;
   }
   color: ${({ theme }) => theme.color.fade(theme.color.white, 0.25)};
   :hover {
diff --git a/packages/overmind-website/src/components/FrontPage/index.tsx b/packages/overmind-website/src/components/FrontPage/index.tsx
@@ -2,25 +2,38 @@ import * as React from 'react'
 import Logo from '../Logo'
 import { QuickstartWrapper, Quickstart } from './elements'
 import Icon from '../Icon'
+import { viewport } from '../../utils'
 
-const FrontPage: React.SFC = () => (
-  <React.Fragment>
-    <Logo />
-    <QuickstartWrapper>
-      <Quickstart>
-        <Icon>movie</Icon>
-        Video introduction
-      </Quickstart>
-      <Quickstart href="/guides/beginner/01_getstarted">
-        <Icon>guide</Icon>
-        Get started guide
-      </Quickstart>
-      <Quickstart href="https://spectrum.chat/overmindjs" target="_blank">
-        <Icon>chat</Icon>
-        Chat Support
-      </Quickstart>
-    </QuickstartWrapper>
-  </React.Fragment>
-)
+class FrontPage extends React.Component {
+  node: HTMLElement
+  componentDidMount() {
+    requestAnimationFrame(() => (this.node.style.bottom = '0'))
+  }
+  render() {
+    return (
+      <React.Fragment>
+        <Logo />
+        <QuickstartWrapper
+          innerRef={(node) => {
+            this.node = node
+          }}
+        >
+          <Quickstart>
+            <Icon>movie</Icon>
+            {viewport.isMobile ? null : <span>Video introduction</span>}
+          </Quickstart>
+          <Quickstart href="/guides/beginner/01_getstarted">
+            <Icon>guide</Icon>
+            {viewport.isMobile ? null : <span>Get started guide</span>}
+          </Quickstart>
+          <Quickstart href="https://spectrum.chat/overmindjs" target="_blank">
+            <Icon>chat</Icon>
+            {viewport.isMobile ? null : <span>Chat Support</span>}
+          </Quickstart>
+        </QuickstartWrapper>
+      </React.Fragment>
+    )
+  }
+}
 
 export default FrontPage
diff --git a/packages/overmind-website/src/components/Guides/elements.tsx b/packages/overmind-website/src/components/Guides/elements.tsx
@@ -4,6 +4,7 @@ export const Wrapper = styled.div`
   display: flex;
   max-width: 800px;
   padding: ${({ theme }) => theme.padding.large};
+  flex-wrap: wrap;
   margin-top: 50px;
   margin-left: auto;
   margin-right: auto;
diff --git a/packages/overmind-website/src/components/Icon/elements.tsx b/packages/overmind-website/src/components/Icon/elements.tsx
@@ -7,6 +7,7 @@ const icons = {
   movie: '\f008',
   chat: '\f086',
   guide: '\f0f6',
+  bars: '\f0c9',
 }
 
 export const IconElement = styled<
diff --git a/packages/overmind-website/src/components/MobileTopBar/elements.tsx b/packages/overmind-website/src/components/MobileTopBar/elements.tsx
@@ -0,0 +1,51 @@
+import styled from '../../styled-components'
+
+export const Wrapper = styled.div`
+  position: fixed;
+  z-index: 2;
+  background-color: ${({ theme }) =>
+    theme.color.lighten(theme.color.dark, -0.25)};
+  height: 50px;
+  top: -50px;
+  color: ${({ theme }) => theme.color.white};
+  transition: top 0.5s ease-out;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: ${({ theme }) => `0 ${theme.padding.small}`};
+`
+
+export const MenuWrapper = styled.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  transform: translate3d(-110vw, 0, 0);
+  transition: transform 0.2s ease-in-out;
+  width: 100vw;
+  height: 100vh;
+`
+
+export const Menu = styled.div`
+  background-color: ${({ theme }) => theme.color.white};
+  box-shadow: 10px 0px 41px 6px rgba(0, 0, 0, 0.35);
+  width: 250px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  border-right: 2px solid ${({ theme }) => theme.color.primary};
+`
+
+export const Link = styled<{ selected?: boolean }, 'a'>('a')`
+  text-decoration: none;
+  color: ${({ selected, theme }) =>
+    selected ? theme.color.primary : theme.color.black};
+  margin: ${({ theme }) => theme.padding.small};
+  cursor: pointer;
+  text-transform: uppercase;
+  :hover {
+    color: ${({ theme }) => theme.color.white};
+  }
+`
diff --git a/packages/overmind-website/src/components/MobileTopBar/index.tsx b/packages/overmind-website/src/components/MobileTopBar/index.tsx
diff --git a/packages/overmind-website/src/components/VideoPlayer/elements.tsx b/packages/overmind-website/src/components/VideoPlayer/elements.tsx
diff --git a/packages/overmind-website/src/components/VideoPlayer/index.tsx b/packages/overmind-website/src/components/VideoPlayer/index.tsx
diff --git a/packages/overmind-website/src/components/Videos/elements.tsx b/packages/overmind-website/src/components/Videos/elements.tsx
diff --git a/packages/overmind-website/src/components/ViewSelector/elements.tsx b/packages/overmind-website/src/components/ViewSelector/elements.tsx
diff --git a/packages/overmind-website/src/icomoon.woff2 b/packages/overmind-website/src/icomoon.woff2
diff --git a/packages/overmind-website/src/index.tsx b/packages/overmind-website/src/index.tsx
diff --git a/packages/overmind-website/src/utils.tsx b/packages/overmind-website/src/utils.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import tsAppIndex from '../tsAppIndex'`
	`1`	`+import { tsAppIndex } from '../templates'`
`2`	`2`
`3`	`3`	`function createJsCode(view) {`
`4`	`4`	`return [`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import tsAppIndex from '../../tsAppIndex'`
	`1`	`+import { tsAppIndex } from '../../templates'`
`2`	`2`
`3`	`3`	`function createJsCode(view) {`
`4`	`4`	`return [`
Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,13 @@`
	`1`	`+import { getPackageWithVersion } from '../../templates'`
	`2`	`+`
`1`	`3`	`export const js = [`
`2`	`4`	`{`
`3`	`5`	`fileName: 'package.json',`
`4`	`6`	code: `
`5`	`7`	`{`
`6`	`8`	`"name": "my-app",`
`7`	`9`	`"scripts": {`
`8`		`- "devtools": "npx overmind-devtools@next"`
	`10`	`+ "devtools": "npx ${getPackageWithVersion('overmind-devtools')}"`
`9`	`11`	`}`
`10`	`12`	`}`
`11`	`13`	`,
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,9 @@`
	`1`	`+import { getPackageWithVersion } from '../../templates'`
	`2`	`+`
`1`	`3`	`export const react = [`
`2`	`4`	`{`
`3`	`5`	code: `
`4`		`-npm install react-overmind`
	`6`	`+npm install ${getPackageWithVersion('react-overmind')}`
`5`	`7`	`,
`6`	`8`	`},`
`7`	`9`	`]`
`@@ -11,7 +13,7 @@ export const reactTs = react`
`11`	`13`	`export const vue = [`
`12`	`14`	`{`
`13`	`15`	code: `
`14`		`-npm install vue-overmind`
	`16`	`+npm install ${getPackageWithVersion('vue-overmind')}`
`15`	`17`	`,
`16`	`18`	`},`
`17`	`19`	`]`