diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index d8bb3e33..b603e758 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -1,5 +1,33 @@ import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; -export default () => (
-

Test

-
); //eslint-disable-line +const Header = styled.div` + width: 100%; + color: orange; + background: red; +`; + +const Footer = styled.div` + width: 100%; + color: orange; + background: blue; + position: absolute; + bottom: 0; +`; + +const Screen = ({ children }) => ( +
+ {children} +
+); +Screen.propTypes = { + children: PropTypes.element.isRequired +}; + +export default () => ( + +

Test

+ +
+); diff --git a/client/routes.jsx b/client/routes.jsx index 061e537c..02cdaa07 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -1,8 +1,8 @@ import { Route, IndexRoute } from 'react-router'; import React from 'react'; import App from './modules/App/App'; -import IDEView from './modules/IDE/pages/IDEView'; -import IDEViewMobile from './modules/IDE/pages/IDEViewMobile'; +import IDEViewScreen from './modules/IDE/pages/IDEView'; +import IDEViewMobileScreen from './modules/IDE/pages/IDEViewMobile'; import FullView from './modules/IDE/pages/FullView'; import LoginView from './modules/User/pages/LoginView'; import SignupView from './modules/User/pages/SignupView'; @@ -26,10 +26,11 @@ const onRouteChange = (store) => { }; const isMobile = () => window.innerWidth <= 760; +const IDEView = isMobile() ? IDEViewMobileScreen : IDEViewScreen; const routes = store => ( { onRouteChange(store); }}> - +