⛏ create mobile screen stub

This commit is contained in:
ghalestrilo 2020-06-09 17:35:06 -03:00
parent 95986a2df6
commit 327406ea31
2 changed files with 19 additions and 6 deletions

View file

@ -1,19 +1,25 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { prop, remSize } from '../../../theme';
const background = prop('Button.default.background');
const textColor = prop('primaryTextColor');
const Header = styled.div` const Header = styled.div`
width: 100%; width: 100%;
color: orange; background-color: ${background} !important;
background: red; color: ${textColor};
padding-left: ${remSize(32)};
`; `;
const Footer = styled.div` const Footer = styled.div`
width: 100%; width: 100%;
color: orange;
background: blue;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
background: ${background};
color: ${textColor};
padding-left: ${remSize(32)};
`; `;
const Screen = ({ children }) => ( const Screen = ({ children }) => (
@ -27,7 +33,11 @@ Screen.propTypes = {
export default () => ( export default () => (
<Screen> <Screen>
<Header><h1>Test</h1></Header> <Header><h1>Mobile View</h1></Header>
<Footer><h1>Actionbar</h1></Footer> <h3>
<br />This page is under construction.
<br /><a href="/?ignoremobile" >Click here</a> to return to the regular editor
</h3>
<Footer><h1>Bottom Bar</h1></Footer>
</Screen> </Screen>
); );

View file

@ -111,8 +111,11 @@ export default {
foreground: grays.light, foreground: grays.light,
background: grays.dark, background: grays.dark,
border: grays.middleDark, border: grays.middleDark,
}, },
}, },
}, },
[Theme.contrast]: { [Theme.contrast]: {
colors, colors,