Remove mobile frame if the screen is smaller than 615

Also, fix some hard-coded max-width 375px sizes.

src/components/MobileFrame/MobileFrame.js

@@ -2,24 +2,73 @@ import React, { Component, PropTypes } from 'react';
 
 import css from './MobileFrame.css';
 
+/**
+   Show mobile frame only if the screen size is bigger than 615px.
+
+   There's no magic formula behind 615px. It came from my head.
+ */
+const SHOW_FRAME_BREAKPOINT = 615;
+
+/**
+   Return current window width.
+
+   See more: http://stackoverflow.com/a/11744120
+ */
+const windowWidth = () => {
+  const w = window;
+  const d = document;
+  const e = document.documentElement;
+  const g = d.getElementsByTagName('body')[0];
+  const x = w.innerWidth || e.clientWidth || g.clientWidth;
+
+  return x;
+}
+
 class MobileFrame extends Component {
   constructor(props) {
     super(props);
-    this.state = { frameEnabled: true };
+    this.state = {
+      manuallyDisabled: false,
+      automaticallyDisabled: false
+    };
 
     this.closeFrame = this.closeFrame.bind(this);
+    this.toggleBasedOnWindowSize = this.toggleBasedOnWindowSize.bind(this);
+  }
+
+  componentWillMount() {
+    this.toggleBasedOnWindowSize();
+  }
+
+  componentDidMount() {
+    window.addEventListener("resize", this.toggleBasedOnWindowSize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.toggleBasedOnWindowSize);
   }
 
   closeFrame(e) {
     e.preventDefault();
-    this.setState({ frameEnabled: false });
+    this.setState({ manuallyDisabled: true });
+  }
+
+  toggleBasedOnWindowSize() {
+    const shouldHide = windowWidth() < SHOW_FRAME_BREAKPOINT;
+
+    if (shouldHide) {
+      this.setState({automaticallyDisabled: true})
+    } else {
+      this.setState({automaticallyDisabled: false})
+    }
   }
 
   render() {
     const { children } = this.props;
-    const { frameEnabled } = this.state;
+    const { manuallyDisabled, automaticallyDisabled } = this.state;
+    const show = !manuallyDisabled && !automaticallyDisabled;
 
-    if (frameEnabled) {
+    if (show) {
       return (
         <div className={`${css.root} mobileFrameEnabled`}>
           <a href="/" className={css.remove} onClick={this.closeFrame}>

src/components/Modal/Modal.css

@@ -9,12 +9,19 @@
   width: 100%;
   z-index: 100;
   background-color: white;
-
-  /* Mobile frame fix - this needs to be removed */
-  max-width: 375px;
   margin: 0 auto;
 }
 
+/*
+  A temporary solution to make the modal (which has position: fixed)
+  to stay inside the mobile frame.
+
+  Remove this when we remove the mobile frame.
+*/
+:global(.mobileFrameEnabled) .isOpen {
+  max-width: 375px;
+}
+
 /* Content is explicitly hidden (this default can be overridden with passed-in class) */
 /* The use case for having both .isOpen and .isClosed is ModalInMobile use case       */
 /* where desktop layout should not get any styling from Modal component.              */

src/containers/ListingPage/ListingPage.css

@@ -141,13 +141,20 @@
   padding: 1rem;
   background-color: white;
   border-top: solid 1px #ccc;
-
-  /* Mobile frame fix */
-  max-width: 375px;
   left: 50%;
   transform: translateX(-50%);
 }
 
+/*
+  A temporary solution to make the modal (which has position: fixed)
+  to stay inside the mobile frame.
+
+  Remove this when we remove the mobile frame.
+*/
+:global(.mobileFrameEnabled) .openBookingForm {
+  max-width: 375px;
+}
+
 .bookingModalTitle {
   margin: 1rem 0;
 }