CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 05:20:32 +12:00
Code Issues Projects Releases Wiki Activity

Update core layout to allow full width pages and match designs

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