r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

✨make environment variable-based switch for /mobile route

Browse source
This commit is contained in:
ghalestrilo 2020-06-12 16:09:30 -03:00
parent 327406ea31
commit 7dc10ab682
5 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/modules/IDE/pages/IDEViewMobile.jsx
View file

@ -1,6 +1,9 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { Link } from 'react-router';
import Editor from '../components/Editor';
import { prop, remSize } from '../../../theme'; import { prop, remSize } from '../../../theme';
const background = prop('Button.default.background'); const background = prop('Button.default.background');
@ -34,10 +37,13 @@ Screen.propTypes = {
export default () => ( export default () => (
<Screen> <Screen>
<Header><h1>Mobile View</h1></Header> <Header><h1>Mobile View</h1></Header>
<h3> <h3>
<br />This page is under construction. <br />This page is under construction.
<br /><a href="/?ignoremobile" >Click here</a> to return to the regular editor <br /><a href="/">Click here</a> to return to the regular editor
</h3> </h3>
<Footer><h1>Bottom Bar</h1></Footer> <Footer><h1>Bottom Bar</h1></Footer>
</Screen> </Screen>
); );

14
client/routes.jsx
View file

@ -1,8 +1,8 @@
import { Route, IndexRoute } from 'react-router'; import { Route, IndexRoute } from 'react-router';
import React from 'react'; import React from 'react';
import App from './modules/App/App'; import App from './modules/App/App';
import IDEViewScreen from './modules/IDE/pages/IDEView'; import IDEView from './modules/IDE/pages/IDEView';
import IDEViewMobileScreen from './modules/IDE/pages/IDEViewMobile'; import IDEViewMobile from './modules/IDE/pages/IDEViewMobile';
import FullView from './modules/IDE/pages/FullView'; import FullView from './modules/IDE/pages/FullView';
import LoginView from './modules/User/pages/LoginView'; import LoginView from './modules/User/pages/LoginView';
import SignupView from './modules/User/pages/SignupView'; import SignupView from './modules/User/pages/SignupView';
@ -25,11 +25,12 @@ const onRouteChange = (store) => {
store.dispatch(stopSketch()); store.dispatch(stopSketch());
}; };
const ignoreMobile = () => window.location.search.substring(1).includes('ignoremobile'); // TODO: Investigate using react-router for this switch
// const ignoreMobile = () => window.location.search.substring(1).includes('ignoremobile');
const isMobile = () => window.innerWidth <= 760; // const isMobile = () => window.innerWidth <= 760;
const IDEView = isMobile() && !ignoreMobile() ? IDEViewMobileScreen : IDEViewScreen; // const IDEView = isMobile() && !ignoreMobile() ? IDEViewMobileScreen : IDEViewScreen;
// How to use URL as a prop?
const routes = store => ( const routes = store => (
<Route path="/" component={App} onChange={() => { onRouteChange(store); }}> <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
<IndexRoute component={IDEView} onEnter={checkAuth(store)} /> <IndexRoute component={IDEView} onEnter={checkAuth(store)} />
@ -55,6 +56,7 @@ const routes = store => (
<Route path="/:username/collections/create" component={DashboardView} /> <Route path="/:username/collections/create" component={DashboardView} />
<Route path="/:username/collections/:collection_id" component={CollectionView} /> <Route path="/:username/collections/:collection_id" component={CollectionView} />
<Route path="/about" component={IDEView} /> <Route path="/about" component={IDEView} />
<Route path="/mobile" component={IDEViewMobile} />
</Route> </Route>
); );

3
client/theme.js
View file

@ -111,11 +111,8 @@ export default {
foreground: grays.light, foreground: grays.light,
background: grays.dark, background: grays.dark,
border: grays.middleDark, border: grays.middleDark,
}, },
}, },
}, },
[Theme.contrast]: { [Theme.contrast]: {
colors, colors,

4
server/routes/server.routes.js
View file

@ -114,9 +114,11 @@ router.get('/about', (req, res) => {
res.send(renderIndex()); res.send(renderIndex());
}); });
router.get('/feedback', (req, res) => { if (process.env.MOBILE_ENABLED) {
router.get('/mobile', (req, res) => {
res.send(renderIndex()); res.send(renderIndex());
}); });
}
router.get('/:username/collections/create', (req, res) => { router.get('/:username/collections/create', (req, res) => {
userExists(req.params.username, (exists) => { userExists(req.params.username, (exists) => {

1
server/views/index.js
View file

@ -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_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.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.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> </script>
</head> </head>
<body> <body>