Update layouts in nav tree to new full width style

This commit is contained in:
Andrew Kingston 2022-03-21 15:40:07 +00:00
parent 0ffd080b0f
commit 014d318437
2 changed files with 25 additions and 4 deletions

View File

@ -65,3 +65,10 @@
<Input thin type="text" label="Name" bind:value={name} /> <Input thin type="text" label="Name" bind:value={name} />
</ModalContent> </ModalContent>
</Modal> </Modal>
<style>
.icon {
display: grid;
place-items: center;
}
</style>

View File

@ -148,15 +148,21 @@
</BBUILayout> </BBUILayout>
<div class="nav-items-container" bind:this={scrollRef}> <div class="nav-items-container" bind:this={scrollRef}>
<ComponentNavigationTree /> <ComponentNavigationTree />
<div class="overlay" />
</div> </div>
</div> </div>
</Tab> </Tab>
<Tab title="Layouts"> <Tab title="Layouts">
<div class="tab-content-padding"> <div class="tab-content-padding">
<div
class="nav-items-container nav-items-container--layouts"
bind:this={scrollRef}
>
<div class="layouts-container">
{#each $store.layouts as layout, idx (layout._id)} {#each $store.layouts as layout, idx (layout._id)}
<Layout {layout} border={idx > 0} /> <Layout {layout} border={idx > 0} />
{/each} {/each}
</div>
</div>
<Modal bind:this={newLayoutModal}> <Modal bind:this={newLayoutModal}>
<NewLayoutModal /> <NewLayoutModal />
</Modal> </Modal>
@ -212,4 +218,12 @@
height: 0; height: 0;
position: relative; position: relative;
} }
.nav-items-container--layouts {
border-top: none;
margin-top: calc(-1 * var(--spectrum-global-dimension-static-size-150));
}
.layouts-container {
min-width: max-content;
}
</style> </style>