Merge pull request #86 from sharetribe/mobile-frame-improvements

Mobile frame improvements

src/app.js

@@ -7,7 +7,7 @@ import { IntlProvider, addLocaleData } from 'react-intl';
 import en from 'react-intl/locale-data/en';
 import configureStore from './store';
 import Routes from './Routes';
-import { RoutesProvider } from './components';
+import { RoutesProvider, MobileFrame } from './components';
 import routesConfiguration from './routesConfiguration';
 import { flattenRoutes } from './util/routes';
 import localeData from './translations/en.json';
@@ -21,7 +21,9 @@ export const ClientApp = props => {
       <Provider store={store}>
         <RoutesProvider flattenedRoutes={flattenedRoutes}>
           <BrowserRouter>
-            <Routes />
+            <MobileFrame>
+              <Routes />
+            </MobileFrame>
           </BrowserRouter>
         </RoutesProvider>
       </Provider>
@@ -42,7 +44,9 @@ export const ServerApp = props => {
       <Provider store={store}>
         <RoutesProvider flattenedRoutes={flattenedRoutes}>
           <StaticRouter location={url} context={context}>
-            <Routes />
+            <MobileFrame>
+              <Routes />
+            </MobileFrame>
           </StaticRouter>
         </RoutesProvider>
       </Provider>

src/components/Discussion/Discussion.css

@@ -27,6 +27,16 @@
   padding: 1rem;
 }
 
+/*
+  A temporary solution to make the filters panel (which has position: fixed)
+  to stay inside the mobile frame.
+
+  Remove this when we remove the mobile frame.
+*/
+:global(.mobileFrameEnabled) .sendMessageForm {
+  width: 375px;
+}
+
 .sendMessageInput {
   display: inline-block;
   width: calc(100% - 6rem);

src/components/MobileFrame/MobileFrame.css

@@ -1,11 +1,13 @@
-.root {
-  position: relative;
-}
+.root { }
 
 .frame {
   margin: auto;
   max-width: 375px;
   box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
+  position: relative;
+
+  /* Make the frame to fill the whole screen */
+  min-height: 100vh;
 }
 
 .remove {

src/components/MobileFrame/MobileFrame.js

@@ -21,7 +21,7 @@ class MobileFrame extends Component {
 
     if (frameEnabled) {
       return (
-        <div className={css.root}>
+        <div className={`${css.root} mobileFrameEnabled`}>
           <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>

src/components/PageLayout/PageLayout.js

@@ -4,7 +4,6 @@ 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
@@ -37,23 +36,21 @@ class PageLayout extends Component {
     /* eslint-enable no-console */
 
     return (
-      <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>
+      <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>
     );
   }
 }

src/containers/SearchPage/SearchPage.css

@@ -10,10 +10,11 @@
   composes: tab;
   position: fixed;
   top: 0;
-  left: 0;
-  width: 100%;
   height: 100vh;
   background-color: #fff;
+
+  /* This may be overriden if mobile frame is in use */
+  width: 100%;
 }
 
 .listings{
@@ -24,13 +25,23 @@
   composes: tab;
   position: fixed;
   top: 0;
-  left: 0;
-  width: 100%;
   height: 100vh;
+
+  /* This may be overriden if mobile frame is in use */
+  width: 100%;
 }
 
-
-
 .open {
   display: block;
 }
+
+/*
+  A temporary solution to make the filters panel (which has position: fixed)
+  to stay inside the mobile frame.
+
+  Remove this when we remove the mobile frame.
+*/
+:global(.mobileFrameEnabled) .filters,
+:global(.mobileFrameEnabled) .map {
+  width: 375px;
+}