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

⛏ create basic header and footer components

Browse source
This commit is contained in:
ghalestrilo 2020-06-09 16:51:57 -03:00
parent cb2f42dc50
commit ca0d953b80
2 changed files with 35 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
client/modules/IDE/pages/IDEViewMobile.jsx
View file

@ -1,5 +1,33 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
export default () => (<div> const Header = styled.div`
<h1>Test</h1> width: 100%;
</div>); //eslint-disable-line color: orange;
background: red;
`;
const Footer = styled.div`
width: 100%;
color: orange;
background: blue;
position: absolute;
bottom: 0;
`;
const Screen = ({ children }) => (
<div className="fullscreen-preview">
{children}
</div>
);
Screen.propTypes = {
children: PropTypes.element.isRequired
};
export default () => (
<Screen>
<Header><h1>Test</h1></Header>
<Footer><h1>Actionbar</h1></Footer>
</Screen>
);

7
client/routes.jsx
View file

@ -1,8 +1,8 @@
import { Route, IndexRoute } from 'react-router'; 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 IDEViewScreen from './modules/IDE/pages/IDEView';
import IDEViewMobile from './modules/IDE/pages/IDEViewMobile'; import IDEViewMobileScreen 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';
@ -26,10 +26,11 @@ const onRouteChange = (store) => {
}; };
const isMobile = () => window.innerWidth <= 760; const isMobile = () => window.innerWidth <= 760;
const IDEView = isMobile() ? IDEViewMobileScreen : IDEViewScreen;
const routes = store => ( const routes = store => (
<Route path="/" component={App} onChange={() => { onRouteChange(store); }}> <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
<IndexRoute component={isMobile() ? IDEViewMobile : IDEView} onEnter={checkAuth(store)} /> <IndexRoute component={IDEView} onEnter={checkAuth(store)} />
<Route path="/login" component={userIsNotAuthenticated(LoginView)} /> <Route path="/login" component={userIsNotAuthenticated(LoginView)} />
<Route path="/signup" component={userIsNotAuthenticated(SignupView)} /> <Route path="/signup" component={userIsNotAuthenticated(SignupView)} />
<Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} /> <Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />