CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 10:36:59 +13:00
Code Issues Projects Releases Wiki Activity

Update layouts to support legacy page widths while allowing new screens to determine their own width

Browse source
This commit is contained in:
Andrew Kingston 2022-05-10 14:37:00 +01:00
parent 9035660975
commit 8bf3595015
1 changed files with 10 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/client/src/components/app/Layout.svelte
View file

@ -23,18 +23,17 @@
export let navBackground export let navBackground
export let navTextColor export let navTextColor
export let navWidth export let navWidth
export let pageWidth
const NavigationClasses = { const NavigationClasses = {
Top: "top", Top: "top",
Left: "left", Left: "left",
None: "none", None: "none",
} }
const WidthClasses = { const WidthStyles = {
Max: "max", Max: "100%",
Large: "l", Large: "1400px",
Medium: "m", Medium: "1100px",
Small: "s", Small: "800px",
} }
// Set some layout context. This isn't used in bindings but can be used // Set some layout context. This isn't used in bindings but can be used
@ -49,8 +48,8 @@
$: validLinks = links?.filter(link => link.text && link.url) || [] $: validLinks = links?.filter(link => link.text && link.url) || []
$: typeClass = NavigationClasses[navigation] || NavigationClasses.None $: typeClass = NavigationClasses[navigation] || NavigationClasses.None
$: navWidthClass = WidthClasses[navWidth || width] || WidthClasses.Large $: navWidthStyle = WidthStyles[navWidth || width] || WidthStyles.Large
$: pageWidthClass = WidthClasses[pageWidth || width] || WidthClasses.Large $: pageWidthStyle = WidthStyles[width] || WidthStyles.Max
$: navStyle = getNavStyle( $: navStyle = getNavStyle(
navBackground, navBackground,
navTextColor, navTextColor,
@ -117,7 +116,7 @@
on:click={$builderStore.inBuilder ? builderStore.actions.clickNav : null} on:click={$builderStore.inBuilder ? builderStore.actions.clickNav : null}
style={navStyle} style={navStyle}
> >
<div class="nav nav--{typeClass} size--{navWidthClass}"> <div class="nav nav--{typeClass}" style={`width: ${navWidthStyle};`}>
<div class="nav-header"> <div class="nav-header">
{#if validLinks?.length} {#if validLinks?.length}
<div class="burger"> <div class="burger">
@ -184,7 +183,7 @@
</div> </div>
{/if} {/if}
<div class="main-wrapper"> <div class="main-wrapper">
<div class="main size--{pageWidthClass}"> <div class="main" style={`--pageWidth: ${pageWidthStyle};`}>
<slot /> <slot />
</div> </div>
</div> </div>
@ -275,22 +274,11 @@
max-width: 100%; max-width: 100%;
position: relative; position: relative;
padding: 32px; padding: 32px;
width: 100%;
} }
.layout--none .main { .layout--none .main {
padding: 0; padding: 0;
} }
.size--s {
width: 800px;
}
.size--m {
width: 1100px;
}
.size--l {
width: 1400px;
}
.size--max {
width: 100%;
}
/* Nav components */ /* Nav components */
.burger { .burger {