🐛 fix basic layout issues

This commit is contained in:
ghalestrilo 2020-06-15 17:59:11 -03:00
parent f40cd4f376
commit fb831f5f62
1 changed files with 48 additions and 40 deletions

View File

@ -31,7 +31,9 @@ const Header = styled.div`
width: 100%;
background-color: ${background};
color: ${textColor};
padding: ${remSize(12)};
padding-left: ${remSize(32)};
z-index: 1;
`;
const Footer = styled.div`
@ -44,9 +46,10 @@ const Footer = styled.div`
`;
const Content = styled.div`
z-index: 0;
margin-top: ${remSize(16)};
`;
const f = x => x;
const Screen = ({ children }) => (
<div className="fullscreen-preview">
@ -59,20 +62,25 @@ Screen.propTypes = {
const IDEViewMobile = (props) => {
// const
// const {
// preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning
// } = props;
const {
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning
} = props;
const [tmController, setTmController] = useState(null);
return (
<Screen>
<Header><h1>Mobile View</h1></Header>
<Header>
{/* <h1>Mobile View</h1> */}
<h2>{project.name}</h2>
<h3>{selectedFile.name}</h3>
</Header>
{/* <div>
{ [preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning]
.map(pr => <h5>{pr.toString()}</h5>) }
</div> */}
<Content>
<Editor
lintWarning={props.preferences.lintWarning}
linewrap={props.preferences.linewrap}
@ -107,7 +115,7 @@ const IDEViewMobile = (props) => {
runtimeErrorWarningVisible={props.ide.runtimeErrorWarningVisible}
provideController={setTmController}
/>
</Content>
<Footer><h1>Bottom Bar</h1></Footer>
</Screen>
);