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

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

Browse source 
Create Mobile Editor Endpoint
This commit is contained in:
Cassie Tarakajian 2020-06-15 13:35:26 -04:00 committed by GitHub
commit b8ba3b911d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
client/modules/IDE/pages/IDEViewMobile.jsx Normal file
View file

@ -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>
);

3
client/routes.jsx
View file

@ -2,6 +2,7 @@ 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 IDEView from './modules/IDE/pages/IDEView'; import IDEView from './modules/IDE/pages/IDEView';
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';
@ -49,6 +50,8 @@ 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>
); );

8
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) {
res.send(renderIndex()); router.get('/mobile', (req, res) => {
}); 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>