Create Mobile Editor Endpoint #1455
Conversation
client/routes.jsx
Outdated
| // const isMobile = () => window.innerWidth <= 760; | ||
| // const IDEView = isMobile() && !ignoreMobile() ? IDEViewMobileScreen : IDEViewScreen; | ||
|
|
||
| // How to use URL as a prop? |
There was a problem hiding this comment.
@ghalestrilo What is it you want to use the URL for? Maybe I can help?
There was a problem hiding this comment.
@andrewn the idea here is to have a url parameter to render the desktop view even if the user is on a small screen.
There was a problem hiding this comment.
also @ghalestrilo if possible, i'd prefer to not merge in commented out code, so would it be possible to remove this for now?
There was a problem hiding this comment.
Hi guys, sorry for the delay.
Absolutely, will update this right now. @andrewn I had coded a way to bypass the /mobile view through a URL parameter, using window.location, and @catarak suggested we instead used the query parameter as a prop.
I wrote the comment because I didn't know how to do it at the moment, but I think following the react-router documentation will be simple enough :)
There was a problem hiding this comment.
I see. Yeah, there's no way to specify it in the Route and react-router doesn't automatically parse it ASFAIK.
I usually:
- Get the
locationobject passed into the mounted component (or thewithRouterHoC, or theuseLocationhook). - Pass
location.searchinto the browser's nativeURLSearchParamshelper
What I've used in the past, is fetching the querystring from location.search
|
|
||
| const Header = styled.div` | ||
| width: 100%; | ||
| background-color: ${background} !important; |
There was a problem hiding this comment.
do you need to use !important here? i'd prefer not to use it ever unless absolutely necessary (e.g. overriding styles from another library).
There was a problem hiding this comment.
good point, will change this
|
I know this is in progress, but I made a couple of code clean up suggestions! Otherwise this is great. |
Part of the Mobile Web Editor project.
This PR creates a
/mobileendpoint, rendering a new screen, which will be used for the development of the mobile web editor. This screen is enabled/disabled through theMOBILE_ENABLEDenvironment variable.Currently it's just groundwork getting done. Future PRs will implement its design and behavior.
I have verified that this pull request:
npm run lint)Fixes #123