Skip to content

Create Mobile Editor Endpoint #1455

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jun 15, 2020
Merged

Create Mobile Editor Endpoint #1455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cb2f42d
⛏ switch to mobile screen by window width
ghalestrilo Jun 9, 2020
ca0d953
⛏ create basic header and footer components
ghalestrilo Jun 9, 2020
95986a2
⛏ create uri method for bypassing the mobile screen
ghalestrilo Jun 9, 2020
327406e
⛏ create mobile screen stub
ghalestrilo Jun 9, 2020
7dc10ab
✨make environment variable-based switch for /mobile route
ghalestrilo Jun 12, 2020
cdf1197
🧹use <Link /> instead of <a />
ghalestrilo Jun 12, 2020
2084991
:ok_hand: clean up comments and remove css important directive
ghalestrilo Jun 15, 2020
96261db
Merge branch 'develop' of https://github.com/processing/p5.js-web-edi…
ghalestrilo Jun 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions client/modules/IDE/pages/IDEViewMobile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 3 additions & 0 deletions client/routes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);

Expand Down
8 changes: 5 additions & 3 deletions server/routes/server.routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
1 change: 1 addition & 0 deletions server/views/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down