Fine tune grid spacing

This commit is contained in:
dannyrb 2020-05-14 22:55:17 -04:00 committed by James A. Petts
parent 00347d3ecb
commit 6044190ab1
3 changed files with 107 additions and 108 deletions

View File

@ -57,23 +57,23 @@ function ViewerLayout({
moreTools={primaryToolBarLayout.moreTools}
/>
<div
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
className="flex flex-row flex-no-wrap items-stretch overflow-hidden w-full"
style={{ height: 'calc(100vh - 57px' }}
>
{/* LEFT SIDEPANELS */}
<SidePanel
side="left"
defaultComponentOpen={leftPanelComponents[0].name}
childComponents={leftPanelComponents}
/>
<div className="flex flex-col flex-1 h-full pb-2">
{/* TOOLBAR + GRID */}
<div className="flex flex-col flex-1 h-full">
<div className="flex flex-2 w-100 border-b border-transparent h-12">
<Toolbar type="secondary" tools={secondaryToolBarLayout.tools} />
</div>
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
<ViewportGrid />
{/*<ViewportGrid
rows={1}
cols={2}
{/*
viewportContents={[
<Viewport
viewportIndex={0}

View File

@ -35,7 +35,7 @@ function ViewportPane({ children, className, isActive, onDrop }) {
className={classnames(
'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
{
'border-2 border-primary-light -m-px': isActive,
'border-2 border-primary-light m-0': isActive,
'border border-secondary-light': !isActive,
},
className

View File

@ -53,12 +53,12 @@ import { tabs } from './studyBrowserMockData';
};
return (
<DragAndDropProvider>
<div>
<Header />
<div
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
className="flex flex-row flex-no-wrap items-stretch overflow-hidden w-full"
style={{ height: 'calc(100vh - 57px' }}
>
{/* LEFT SIDEPANELS */}
<SidePanel
side="left"
defaultComponentOpen='studies'
@ -73,12 +73,12 @@ import { tabs } from './studyBrowserMockData';
}}
/>
{/* TOOLBAR + GRID */}
<div className="flex flex-col flex-1 h-full pb-2">
<div className="flex flex-col flex-1 h-full">
<div className="flex flex-2 w-100 border-b border-transparent h-12">
<ViewportToolbar />
</div>
{/* VIEWPORT GRID CONTAINER */}
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
<ViewportGrid numRows={1} numCols={2}>
{[0, 1].map(viewportIndex => (
<ViewportPane key={viewportIndex} className="m-1" isActive={false} onDrop={() => {}}>
@ -160,7 +160,6 @@ import { tabs } from './studyBrowserMockData';
}}
/>
</div>
</div>
</DragAndDropProvider>
);
}}