mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-29 05:00:43 +10:00
Remove MobileFrame and related hacks
This commit is contained in:
Kimmo Puputti
parent
b43edf8664
commit
5781c79ff7
8 changed files with 3 additions and 190 deletions
10
src/app.js
10
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, MobileFrame } from './components';
|
||||
import { RoutesProvider } from './components';
|
||||
import routesConfiguration from './routesConfiguration';
|
||||
import { flattenRoutes } from './util/routes';
|
||||
import localeData from './translations/en.json';
|
||||
|
|
@ -21,9 +21,7 @@ export const ClientApp = props => {
|
|||
<Provider store={store}>
|
||||
<RoutesProvider flattenedRoutes={flattenedRoutes}>
|
||||
<BrowserRouter>
|
||||
<MobileFrame>
|
||||
<Routes />
|
||||
</MobileFrame>
|
||||
<Routes />
|
||||
</BrowserRouter>
|
||||
</RoutesProvider>
|
||||
</Provider>
|
||||
|
|
@ -44,9 +42,7 @@ export const ServerApp = props => {
|
|||
<Provider store={store}>
|
||||
<RoutesProvider flattenedRoutes={flattenedRoutes}>
|
||||
<StaticRouter location={url} context={context}>
|
||||
<MobileFrame>
|
||||
<Routes />
|
||||
</MobileFrame>
|
||||
<Routes />
|
||||
</StaticRouter>
|
||||
</RoutesProvider>
|
||||
</Provider>
|
||||
|
|
|
|||
|
|
@ -27,16 +27,6 @@
|
|||
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);
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
.root { }
|
||||
|
||||
.frame {
|
||||
margin: auto;
|
||||
max-width: 375px;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
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 = {
|
||||
manuallyDisabled: false,
|
||||
automaticallyDisabled: false,
|
||||
};
|
||||
|
||||
this.closeFrame = this.closeFrame.bind(this);
|
||||
this.toggleBasedOnWindowSize = this.toggleBasedOnWindowSize.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.toggleBasedOnWindowSize();
|
||||
window.addEventListener('resize', this.toggleBasedOnWindowSize);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.toggleBasedOnWindowSize);
|
||||
}
|
||||
|
||||
closeFrame(e) {
|
||||
e.preventDefault();
|
||||
this.setState({ manuallyDisabled: true });
|
||||
}
|
||||
|
||||
toggleBasedOnWindowSize() {
|
||||
const shouldHide = windowWidth() < SHOW_FRAME_BREAKPOINT;
|
||||
this.setState({ automaticallyDisabled: shouldHide });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
const { manuallyDisabled, automaticallyDisabled } = this.state;
|
||||
const show = !manuallyDisabled && !automaticallyDisabled;
|
||||
|
||||
if (show) {
|
||||
return (
|
||||
<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>
|
||||
</a>
|
||||
<div className={css.frame}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const { any } = PropTypes;
|
||||
|
||||
MobileFrame.propTypes = {
|
||||
children: any.isRequired,
|
||||
};
|
||||
|
||||
export default MobileFrame;
|
||||
|
|
@ -12,16 +12,6 @@
|
|||
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. */
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ 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 MobileMenu from './MobileMenu/MobileMenu';
|
||||
import Modal from './Modal/Modal';
|
||||
import ModalInMobile from './ModalInMobile/ModalInMobile';
|
||||
|
|
@ -71,7 +70,6 @@ export {
|
|||
Map,
|
||||
MapPanel,
|
||||
Menu,
|
||||
MobileFrame,
|
||||
MobileMenu,
|
||||
Modal,
|
||||
ModalInMobile,
|
||||
|
|
|
|||
|
|
@ -145,16 +145,6 @@
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,6 @@
|
|||
top: 0;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
|
||||
/* This may be overriden if mobile frame is in use */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.listings{
|
||||
|
|
@ -30,22 +27,8 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue