Merge pull request #1455 from ghalestrilo/feature/mobile-canvas

catarak · web-flow · commit b8ba3b911d3e · 2020-06-15T13:35:26.000-04:00
Create Mobile Editor Endpoint
diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Link } from 'react-router';
+
+import { prop, remSize } from '../../../theme';
+
+const background = prop('Button.default.background');
+const textColor = prop('primaryTextColor');
+
+const Header = styled.div`
+  width: 100%;
+  background-color: ${background};
+  color: ${textColor};
+  padding-left: ${remSize(32)};
+`;
+
+const Footer = styled.div`
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  background: ${background};
+  color: ${textColor};
+  padding-left: ${remSize(32)};
+`;
+
+const Screen = ({ children }) => (
+  <div className="fullscreen-preview">
+    {children}
+  </div>
+);
+Screen.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default () => (
+  <Screen>
+    <Header><h1>Mobile View</h1></Header>
+
+
+    <h3>
+      <br />This page is under construction.
+      <br /><Link to="/">Click here</Link> to return to the regular editor
+    </h3>
+
+    <Footer><h1>Bottom Bar</h1></Footer>
+  </Screen>
+);
diff --git a/client/routes.jsx b/client/routes.jsx
@@ -2,6 +2,7 @@ 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 FullView from './modules/IDE/pages/FullView';
 import LoginView from './modules/User/pages/LoginView';
 import SignupView from './modules/User/pages/SignupView';
@@ -49,6 +50,8 @@ const routes = store => (
     <Route path="/:username/collections/create" component={DashboardView} />
     <Route path="/:username/collections/:collection_id" component={CollectionView} />
     <Route path="/about" component={IDEView} />
+    <Route path="/mobile" component={IDEViewMobile} />
+
   </Route>
 );
 
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
@@ -114,9 +114,11 @@ router.get('/about', (req, res) => {
   res.send(renderIndex());
 });
 
-router.get('/feedback', (req, res) => {
-  res.send(renderIndex());
-});
+if (process.env.MOBILE_ENABLED) {
+  router.get('/mobile', (req, res) => {
+    res.send(renderIndex());
+  });
+}
 
 router.get('/:username/collections/create', (req, res) => {
   userExists(req.params.username, (exists) => {
diff --git a/server/views/index.js b/server/views/index.js
@@ -32,6 +32,7 @@ export function renderIndex() {
         window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
         window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
         window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
+        window.process.env.MOBILE_ENABLED = ${process.env.MOBILE_ENABLED ? `${process.env.MOBILE_ENABLED}` : undefined};
       </script>
     </head>
     <body>
