MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

scrolling backend nav

This commit is contained in:
Michael Shanks 2019-09-28 06:04:23 +01:00
parent 3cfe71cbbb
commit 48d2f2e88e
1 changed files with 27 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/builder/src/nav/BackendNav.svelte
View File

@ -45,7 +45,7 @@ store.subscribe(db => {
</script> </script>
<div class="root">
<div class="items-root"> <div class="items-root">
<div class="hierarchy"> <div class="hierarchy">
<div class="components-list-container"> <div class="components-list-container">
@ -56,6 +56,7 @@ store.subscribe(db => {
</div> </div>
</div> </div>
<div class="hierarchy-items-container">
{#each $store.hierarchy.children as record} {#each $store.hierarchy.children as record}
<HierarchyRow node={record} <HierarchyRow node={record}
type="record" /> type="record" />
@ -65,33 +66,24 @@ store.subscribe(db => {
<HierarchyRow node={index} <HierarchyRow node={index}
type="index" /> type="index" />
{/each} {/each}
</div>
</div> </div>
<NavItem name="actions" label="Actions & Triggers"/> <NavItem name="actions" label="Actions & Triggers"/>
<NavItem name="access levels" label="User Levels"/> <NavItem name="access levels" label="User Levels"/>
<div class="space-filler"></div>
</div>
</div> </div>
<style> <style>
.root {
height: 100%;
background-color: var(--secondary5);
}
.items-root { .items-root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 100%; max-height: 100%;
height: 1rem; height: 100%;
} background-color: var(--secondary5);
.nav-items-container {
padding: 2rem 1rem 0rem 1rem;
} }
.nav-group-header { .nav-group-header {
@ -109,7 +101,7 @@ store.subscribe(db => {
margin-right: 5px; margin-right: 5px;
} }
.nav-group-header>span:nth-child(2) { .nav-group-header>div:nth-child(2) {
margin-left:5px; margin-left:5px;
vertical-align: bottom; vertical-align: bottom;
grid-column-start: title; grid-column-start: title;
@ -127,21 +119,21 @@ store.subscribe(db => {
color: var(--primary75); color: var(--primary75);
} }
.hierarchy-title-row {
padding: 2rem 1rem 0rem 1rem;
font-size: 1rem;
font-weight: bold;
}
.hierarchy-title { .hierarchy-title {
flex: auto 1 1; flex: auto 1 1;
} }
.hierarchy {
display:flex;
flex-direction: column;
flex: 1 0 auto;
height: 100px;
}
.space-filler { .hierarchy-items-container {
flex: 1 1 auto; flex: 1 1 auto;
overflow-y:auto;
} }