Merge pull request #83 from sharetribe/mobile-frame

Add mobile frame

src/components/HeroSection/HeroSection.css

@@ -32,6 +32,6 @@
   flex-direction: column;
   flex-grow: 1;
   align-items: center;
-  width: 90vw;
+  width: 90%;
 }
 

src/components/MobileFrame/MobileFrame.css

@@ -0,0 +1,44 @@
+.root {
+  position: relative;
+}
+
+.frame {
+  margin: auto;
+  max-width: 375px;
+  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
+}
+
+.remove {
+  /* max-width: 375 + (120 * 2) */
+  @media (max-width: 615px) {
+    & {
+      display: none;
+    }
+  }
+
+  text-decoration: none;
+  position: absolute;
+  display: block;
+  max-width: calc((100% - 375px) / 2);
+  min-width: 120px;
+  padding: 20px;
+
+  cursor: pointer;
+
+  color: rgb(0, 0, 0, 0.5);
+
+  &:hover {
+    color: rgb(0, 0, 0, 1);
+  }
+}
+
+.removeLabel {
+  display: block;
+  font-size: 14px;
+}
+
+.removeLabelRefresh {
+  font-size: 12px;
+  margin-top: 6px;
+  display: block;
+}

src/components/MobileFrame/MobileFrame.js

@@ -0,0 +1,50 @@
+import React, { Component, PropTypes } from 'react';
+
+import css from './MobileFrame.css';
+
+class MobileFrame extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { frameEnabled: true };
+
+    this.closeFrame = this.closeFrame.bind(this);
+  }
+
+  closeFrame(e) {
+    e.preventDefault();
+    this.setState({frameEnabled: false});
+  }
+
+  render() {
+    const { children } = this.props;
+    const { frameEnabled } = this.state;
+
+    if (frameEnabled) {
+      return (
+        <div className={css.root}>
+          <a href="/" className={css.remove} onClick={this.closeFrame}>
+            <span className={css.removeLabel}>✖ Remove mobile frame</span>
+            <span className={css.removeLabelRefresh}>(refresh browser to get it back)</span>
+          </a>
+          <div className={css.frame}>
+            {children}
+          </div>
+        </div>
+      )
+    } else {
+      return (
+        <div>
+          {children}
+        </div>
+      )
+    }
+  }
+}
+
+const { any } = PropTypes;
+
+MobileFrame.propTypes = {
+  children: any.isRequired,
+}
+
+export default MobileFrame;

src/components/PageLayout/PageLayout.js

@@ -4,6 +4,7 @@ import Helmet from 'react-helmet';
 import { withRouter } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { Topbar } from '../../containers';
+import { MobileFrame } from '../../components';
 
 const scrollToTop = () => {
   // Todo: this might need fine tuning later
@@ -36,21 +37,23 @@ class PageLayout extends Component {
     /* eslint-enable no-console */
 
     return (
-      <div className={className}>
-        <Helmet title={title} />
-        {authInfoError
-          ? <div style={{ color: 'red' }}>
-              <FormattedMessage id="PageLayout.authInfoFailed" />
-            </div>
-          : null}
-        {logoutError
-          ? <div style={{ color: 'red' }}>
-              <FormattedMessage id="PageLayout.logoutFailed" />
-            </div>
-          : null}
-        <Topbar />
-        {children}
-      </div>
+      <MobileFrame>
+        <div className={className}>
+          <Helmet title={title} />
+          {authInfoError
+            ? <div style={{ color: 'red' }}>
+                <FormattedMessage id="PageLayout.authInfoFailed" />
+              </div>
+            : null}
+          {logoutError
+            ? <div style={{ color: 'red' }}>
+                <FormattedMessage id="PageLayout.logoutFailed" />
+              </div>
+            : null}
+          <Topbar />
+          {children}
+        </div>
+      </MobileFrame>
     );
   }
 }

src/components/index.js

@@ -9,6 +9,7 @@ import LocationAutocompleteInput from './LocationAutocompleteInput/LocationAutoc
 import Map from './Map/Map';
 import MapPanel from './MapPanel/MapPanel';
 import Menu from './Menu/Menu';
+import MobileFrame from './MobileFrame/MobileFrame';
 import NamedLink from './NamedLink/NamedLink';
 import NamedRedirect from './NamedRedirect/NamedRedirect';
 import OrderDetailsPanel from './OrderDetailsPanel/OrderDetailsPanel';
@@ -30,6 +31,7 @@ export {
   Map,
   MapPanel,
   Menu,
+  MobileFrame,
   NamedLink,
   NamedRedirect,
   OrderDetailsPanel,

src/containers/SearchPage/SearchPage.css

@@ -11,7 +11,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   background-color: #fff;
 }
@@ -25,7 +25,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
 }
 

src/containers/Topbar/Topbar.css

@@ -3,7 +3,7 @@
   background-color: #f9f9f9;
   flex-direction: row;
   padding: 0 1rem;
-  width: 100vw;
+  width: 100%;
   height: 80px;
   justify-content: space-between;
   align-items: center;
@@ -15,6 +15,7 @@
 
 .navDropDown {
   height: 60px;
+  width: 60px;
   font-size: 2rem;
   border-radius: 0;
   appearance: none;