From cb2f42dc505a576728cae3603e66857d4bf5da10 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 9 Jun 2020 16:29:20 -0300 Subject: [PATCH 1/7] =?UTF-8?q?=E2=9B=8F=20switch=20to=20mobile=20screen?= =?UTF-8?q?=20by=20window=20width?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/modules/IDE/pages/IDEViewMobile.jsx | 5 +++++ client/routes.jsx | 6 +++++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 client/modules/IDE/pages/IDEViewMobile.jsx diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx new file mode 100644 index 00000000..d8bb3e33 --- /dev/null +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export default () => (
+

Test

+
); //eslint-disable-line diff --git a/client/routes.jsx b/client/routes.jsx index 18ff9b20..061e537c 100644 --- 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'; @@ -24,9 +25,11 @@ const onRouteChange = (store) => { store.dispatch(stopSketch()); }; +const isMobile = () => window.innerWidth <= 760; + const routes = store => ( { onRouteChange(store); }}> - + @@ -49,6 +52,7 @@ const routes = store => ( + ); From ca0d953b808a65c358cd51830bf3039d78185584 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 9 Jun 2020 16:51:57 -0300 Subject: [PATCH 2/7] =?UTF-8?q?=E2=9B=8F=20=20create=20basic=20header=20an?= =?UTF-8?q?d=20footer=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/modules/IDE/pages/IDEViewMobile.jsx | 34 ++++++++++++++++++++-- client/routes.jsx | 7 +++-- 2 files changed, 35 insertions(+), 6 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index d8bb3e33..b603e758 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -1,5 +1,33 @@ import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; -export default () => (
-

Test

-
); //eslint-disable-line +const Header = styled.div` + width: 100%; + color: orange; + background: red; +`; + +const Footer = styled.div` + width: 100%; + color: orange; + background: blue; + position: absolute; + bottom: 0; +`; + +const Screen = ({ children }) => ( +
+ {children} +
+); +Screen.propTypes = { + children: PropTypes.element.isRequired +}; + +export default () => ( + +

Test

+

Actionbar

+ +); diff --git a/client/routes.jsx b/client/routes.jsx index 061e537c..02cdaa07 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -1,8 +1,8 @@ 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 IDEViewScreen from './modules/IDE/pages/IDEView'; +import IDEViewMobileScreen 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'; @@ -26,10 +26,11 @@ const onRouteChange = (store) => { }; const isMobile = () => window.innerWidth <= 760; +const IDEView = isMobile() ? IDEViewMobileScreen : IDEViewScreen; const routes = store => ( { onRouteChange(store); }}> - + From 95986a2df6491fcb8f6c13aa356a190284a0f3de Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 9 Jun 2020 17:08:14 -0300 Subject: [PATCH 3/7] =?UTF-8?q?=E2=9B=8F=20=20create=20uri=20method=20for?= =?UTF-8?q?=20bypassing=20the=20mobile=20screen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/modules/IDE/pages/IDEViewMobile.jsx | 2 +- client/routes.jsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index b603e758..edc7c4bb 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -22,7 +22,7 @@ const Screen = ({ children }) => ( ); Screen.propTypes = { - children: PropTypes.element.isRequired + children: PropTypes.node.isRequired }; export default () => ( diff --git a/client/routes.jsx b/client/routes.jsx index 02cdaa07..9502857f 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -25,8 +25,10 @@ const onRouteChange = (store) => { store.dispatch(stopSketch()); }; +const ignoreMobile = () => window.location.search.substring(1).includes('ignoremobile'); + const isMobile = () => window.innerWidth <= 760; -const IDEView = isMobile() ? IDEViewMobileScreen : IDEViewScreen; +const IDEView = isMobile() && !ignoreMobile() ? IDEViewMobileScreen : IDEViewScreen; const routes = store => ( { onRouteChange(store); }}> From 327406ea31dd9f9099da9e287ef425e1011e322d Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 9 Jun 2020 17:35:06 -0300 Subject: [PATCH 4/7] =?UTF-8?q?=E2=9B=8F=20=20create=20mobile=20screen=20s?= =?UTF-8?q?tub?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/modules/IDE/pages/IDEViewMobile.jsx | 22 ++++++++++++++++------ client/theme.js | 3 +++ 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index edc7c4bb..fcb39f99 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -1,19 +1,25 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; +import { prop, remSize } from '../../../theme'; + +const background = prop('Button.default.background'); +const textColor = prop('primaryTextColor'); const Header = styled.div` width: 100%; - color: orange; - background: red; + background-color: ${background} !important; + color: ${textColor}; + padding-left: ${remSize(32)}; `; const Footer = styled.div` width: 100%; - color: orange; - background: blue; position: absolute; bottom: 0; + background: ${background}; + color: ${textColor}; + padding-left: ${remSize(32)}; `; const Screen = ({ children }) => ( @@ -27,7 +33,11 @@ Screen.propTypes = { export default () => ( -

Test

-

Actionbar

+

Mobile View

+

+
This page is under construction. +
Click here to return to the regular editor +

+

Bottom Bar

 ); diff --git a/client/theme.js b/client/theme.js index 5215dd99..4b61d77c 100644 --- a/client/theme.js +++ b/client/theme.js @@ -111,8 +111,11 @@ export default { foreground: grays.light, background: grays.dark, border: grays.middleDark, + }, }, + + }, [Theme.contrast]: { colors, From 7dc10ab682468f894a4c3a571bc158b38b680237 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 12 Jun 2020 16:09:30 -0300 Subject: [PATCH 5/7] =?UTF-8?q?=E2=9C=A8make=20environment=20variable-base?= =?UTF-8?q?d=20switch=20for=20/mobile=20route?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/modules/IDE/pages/IDEViewMobile.jsx | 8 +++++++- client/routes.jsx | 14 ++++++++------ client/theme.js | 3 --- server/routes/server.routes.js | 8 +++++--- server/views/index.js | 1 + 5 files changed, 21 insertions(+), 13 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index fcb39f99..1e3fb820 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -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 () => (

Mobile View

+ +


This page is under construction. -
Click here to return to the regular editor +
Click here to return to the regular editor

+

Bottom Bar

 ); diff --git a/client/routes.jsx b/client/routes.jsx index 9502857f..5f4f9b8b 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -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 => ( { onRouteChange(store); }}> @@ -55,6 +56,7 @@ const routes = store => ( + ); diff --git a/client/theme.js b/client/theme.js index 4b61d77c..5215dd99 100644 --- a/client/theme.js +++ b/client/theme.js @@ -111,11 +111,8 @@ export default { foreground: grays.light, background: grays.dark, border: grays.middleDark, - }, }, - - }, [Theme.contrast]: { colors, diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js index ddec0c22..bec91b17 100644 --- 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 index 52b98985..ef88aec6 100644 --- 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}; From cdf11971c4dabd43e646b8cdef529f24c20acf1d Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 12 Jun 2020 16:36:31 -0300 Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=A7=B9use=20=20instead=20of?= =?UTF-8?q?=20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/modules/IDE/pages/IDEViewMobile.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 1e3fb820..b8b50e92 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -3,7 +3,6 @@ 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'); @@ -41,7 +40,7 @@ export default () => (


This page is under construction. -
Click here to return to the regular editor +
Click here to return to the regular editor

Bottom Bar

From 20849912901a7c9a045ae11cda827a5868259ab8 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 15 Jun 2020 14:18:25 -0300 Subject: [PATCH 7/7] :ok_hand: clean up comments and remove css important directive --- client/modules/IDE/pages/IDEViewMobile.jsx | 2 +- client/routes.jsx | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index b8b50e92..845f5203 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -10,7 +10,7 @@ const textColor = prop('primaryTextColor'); const Header = styled.div` width: 100%; - background-color: ${background} !important; + background-color: ${background}; color: ${textColor}; padding-left: ${remSize(32)}; `; diff --git a/client/routes.jsx b/client/routes.jsx index 5f4f9b8b..e406e357 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -25,12 +25,6 @@ const onRouteChange = (store) => { store.dispatch(stopSketch()); }; -// 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 => ( { onRouteChange(store); }}>