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

Update core layout to allow full width pages and match designs

This commit is contained in:
Andrew Kingston 2021-05-06 10:18:25 +01:00
parent c7ea69a383
commit 1a33ad4892
1 changed files with 18 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/builder/src/pages/portal/_layout.svelte
View File

@ -23,7 +23,7 @@
onMount(getInfo) onMount(getInfo)
let menu = [ let menu = [
{ title: "Apps", href: "/portal/" }, { title: "Apps", href: "/portal/apps" },
{ title: "Drafts", href: "/portal/drafts" }, { title: "Drafts", href: "/portal/drafts" },
{ title: "Users", href: "/portal/users", heading: "Manage" }, { title: "Users", href: "/portal/users", heading: "Manage" },
{ title: "Groups", href: "/portal/groups" }, { title: "Groups", href: "/portal/groups" },
@ -36,15 +36,15 @@
</script> </script>
<div class="container"> <div class="container">
<Layout> <div class="nav">
<div class="nav"> <Layout paddingX="L" paddingY="L">
<div class="branding"> <div class="branding">
<div class="name"> <div class="name">
<img <img
src={$organisation?.logoUrl || "https://via.placeholder.com/50"} src={$organisation?.logoUrl || "https://i.imgur.com/ZKyklgF.png"}
alt="Logotype" alt="Logotype"
/> />
<span>{$organisation?.company}</span> <span>{$organisation?.company || "Budibase"}</span>
</div> </div>
<div class="onboarding"> <div class="onboarding">
<ProgressCircle size="S" value={onBoardingProgress} /> <ProgressCircle size="S" value={onBoardingProgress} />
@ -59,17 +59,17 @@
{/each} {/each}
</Navigation> </Navigation>
</div> </div>
</div> </Layout>
</Layout> </div>
<div class="main"> <div class="main">
<div class="toolbar"> <div class="toolbar">
<Search /> <Search placeholder="Global search" />
<div class="avatar"> <div class="avatar">
<Avatar size="M" name="John Doe" /> <Avatar size="M" name="John Doe" />
<Icon size="XL" name="ChevronDown" /> <Icon size="XL" name="ChevronDown" />
</div> </div>
</div> </div>
<div class="content"> <div>
<slot /> <slot />
</div> </div>
</div> </div>
@ -81,10 +81,13 @@
display: grid; display: grid;
grid-template-columns: 250px 1fr; grid-template-columns: 250px 1fr;
} }
.nav {
background: var(--background);
border-right: var(--border-light);
}
.main { .main {
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
border-left: 2px solid var(--spectrum-alias-background-color-primary);
} }
.branding { .branding {
display: grid; display: grid;
@ -92,7 +95,6 @@
grid-template-columns: auto auto; grid-template-columns: auto auto;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: var(--spacing-xl);
} }
.name { .name {
display: grid; display: grid;
@ -100,13 +102,6 @@
grid-gap: var(--spacing-m); grid-gap: var(--spacing-m);
align-items: center; align-items: center;
} }
.content {
display: grid;
padding: calc(var(--spacing-xl) * 2) var(--spacing-m) var(--spacing-m)
var(--spacing-m);
max-width: 80ch;
margin: 0 auto;
}
.avatar { .avatar {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
@ -118,18 +113,20 @@
filter: brightness(110%); filter: brightness(110%);
} }
.toolbar { .toolbar {
border-bottom: 2px solid var(--spectrum-alias-background-color-primary); background: var(--background);
border-bottom: var(--border-light);
display: grid; display: grid;
grid-template-columns: 250px auto; grid-template-columns: 250px auto;
justify-content: space-between; justify-content: space-between;
padding: var(--spacing-m) calc(var(--spacing-xl) * 2); padding: var(--spacing-m) calc(var(--spacing-xl) * 2);
} }
img { img {
width: 32px; width: 28px;
height: 32px; height: 28px;
} }
span { span {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: 500;
} }
</style> </style>