⛏ create mobile screen stub
This commit is contained in:
parent
95986a2df6
commit
327406ea31
2 changed files with 19 additions and 6 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in a new issue