Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-12 09:36:27 +00:00
Code Issues Releases Activity

app: fix layout

Browse Source 
The explorer was getting pushed off of the screen when typing long lines
in the editor.
This commit is contained in:
David Lechner
2022-03-14 12:39:42 -05:00
parent c75f3720f5
commit 6c55588d7a
1 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/App.tsx
+24 -24
View File
@@ -149,25 +149,25 @@ const App: React.VoidFunctionComponent<AppProps> = ({ onEditorChanged }) => {
return (
<div className="pb-app h-100 w-100 p-absolute">
<Toolbar />
<SplitterLayout
customClassName={`pb-app-body ${
showDocs ? 'pb-show-docs' : 'pb-hide-docs'
}`}
onDragStart={(): void => setIsDragging(true)}
onDragEnd={(): void => setIsDragging(false)}
percentage={true}
secondaryInitialSize={Number(
localStorage.getItem('app-docs-split') || 30,
)}
onSecondaryPaneSizeChange={(value): void =>
localStorage.setItem('app-docs-split', String(value))
}
<div
className="pb-app-body"
style={{ display: 'grid', gridTemplateColumns: '250px auto' }}
>
<div className="h-100 w-100" style={{ display: 'flex' }}>
<div style={{ display: 'inline-block', width: 250 }}>
<Explorer />
</div>
<div style={{ display: 'inline-block' }}>
<Explorer />
{/* need a container for SplitterLayout since it uses position: absolute */}
<div>
<SplitterLayout
customClassName={showDocs ? 'pb-show-docs' : 'pb-hide-docs'}
onDragStart={(): void => setIsDragging(true)}
onDragEnd={(): void => setIsDragging(false)}
percentage={true}
secondaryInitialSize={Number(
localStorage.getItem('app-docs-split') || 30,
)}
onSecondaryPaneSizeChange={(value): void =>
localStorage.setItem('app-docs-split', String(value))
}
>
<SplitterLayout
vertical={true}
percentage={true}
@@ -193,13 +193,13 @@ const App: React.VoidFunctionComponent<AppProps> = ({ onEditorChanged }) => {
<Terminal />
</div>
</SplitterLayout>
</div>
<div className="h-100 w-100">
{isDragging && <div className="h-100 w-100 p-absolute" />}
<Docs />
</div>
</SplitterLayout>
</div>
<div className="h-100 w-100">
{isDragging && <div className="h-100 w-100 p-absolute" />}
<Docs />
</div>
</SplitterLayout>
</div>
<StatusBar />
</div>
);