🚧 create alternate content wrapper for proper top padding

This commit is contained in:
ghalestrilo 2020-06-18 16:01:13 -03:00
parent 49a9fe7819
commit e5bbb53b37
3 changed files with 49 additions and 7 deletions

View file

@ -0,0 +1,8 @@
import React from 'react';
import styled from 'styled-components';
import { remSize } from '../../theme';
export default styled.div`
z-index: 0;
margin-top: ${remSize(16)};
`;

View file

@ -30,14 +30,10 @@ import IconButton from '../../../components/mobile/IconButton';
import Header from '../../../components/mobile/Header'; import Header from '../../../components/mobile/Header';
import Screen from '../../../components/mobile/MobileScreen'; import Screen from '../../../components/mobile/MobileScreen';
import Footer from '../../../components/mobile/Footer'; import Footer from '../../../components/mobile/Footer';
import IDEWrapper from '../../../components/mobile/IDEWrapper';
const textColor = prop('primaryTextColor'); const textColor = prop('primaryTextColor');
const Content = styled.div`
z-index: 0;
margin-top: ${remSize(16)};
`;
const Icon = styled.a` const Icon = styled.a`
> svg { > svg {
fill: ${textColor}; fill: ${textColor};
@ -86,7 +82,7 @@ const IDEViewMobile = (props) => {
</div> </div>
</Header> </Header>
<Content> <IDEWrapper>
<Editor <Editor
lintWarning={preferences.lintWarning} lintWarning={preferences.lintWarning}
linewrap={preferences.linewrap} linewrap={preferences.linewrap}
@ -121,7 +117,7 @@ const IDEViewMobile = (props) => {
runtimeErrorWarningVisible={ide.runtimeErrorWarningVisible} runtimeErrorWarningVisible={ide.runtimeErrorWarningVisible}
provideController={setTmController} provideController={setTmController}
/> />
</Content> </IDEWrapper>
<Footer><h2>Bottom Bar</h2></Footer> <Footer><h2>Bottom Bar</h2></Footer>
</Screen> </Screen>
); );

View file

@ -3,7 +3,15 @@ import { Link } from 'react-router';
import styled from 'styled-components'; import styled from 'styled-components';
import Header from '../../components/mobile/Header'; import Header from '../../components/mobile/Header';
import Screen from '../../components/mobile/MobileScreen'; import Screen from '../../components/mobile/MobileScreen';
import { ExitIcon } from '../../common/Icons'; import { ExitIcon } from '../../common/Icons';
import { remSize } from '../../theme';
const Content = styled.div`
z-index: 0;
margin-top: ${remSize(48)};
`;
const IconLinkWrapper = styled(Link)` const IconLinkWrapper = styled(Link)`
width: 2rem; width: 2rem;
@ -11,6 +19,7 @@ const IconLinkWrapper = styled(Link)`
margin-left: none; margin-left: none;
`; `;
const MobileSketchView = (props) => { const MobileSketchView = (props) => {
const [overlay, setOverlay] = useState(null); const [overlay, setOverlay] = useState(null);
return ( return (
@ -33,6 +42,35 @@ const MobileSketchView = (props) => {
</IconButton> </IconButton>
</div> */} </div> */}
</Header> </Header>
<Content>
<h1>Hello</h1>
</Content>
</Screen>); </Screen>);
}; };
export default MobileSketchView; export default MobileSketchView;
// <PreviewFrame
// htmlFile={this.props.htmlFile}
// jsFiles={this.props.jsFiles}
// cssFiles={this.props.cssFiles}
// files={this.props.files}
// head={
// <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
// }
// fullView
// isPlaying
// isAccessibleOutputPlaying={false}
// textOutput={false}
// gridOutput={false}
// soundOutput={false}
// dispatchConsoleEvent={this.ident}
// endSketchRefresh={this.ident}
// previewIsRefreshing={false}
// setBlobUrl={this.ident}
// stopSketch={this.ident}
// expandConsole={this.ident}
// clearConsole={this.ident}
// />