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 PropTypes from 'prop-types';
import styled from 'styled-components';
import { Link } from 'react-router';
import Editor from '../components/Editor';
import { prop, remSize } from '../../../theme';
const background = prop('Button.default.background');
@ -34,10 +37,13 @@ Screen.propTypes = {
export default () => (
<Screen>
<Header><h1>Mobile View</h1></Header>
<h3>
<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>
<Footer><h1>Bottom Bar</h1></Footer>
</Screen>
);

14
client/routes.jsx
View file

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

3
client/theme.js
View file

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

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

@ -114,9 +114,11 @@ router.get('/about', (req, res) => {
res.send(renderIndex());
});
router.get('/feedback', (req, res) => {
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) => {

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_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>