CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-29 03:20:34 +12:00
Code Issues Projects Releases Wiki Activity

Make navigation respect width setting

Browse source
This commit is contained in:
Andrew Kingston 2021-06-17 13:17:24 +01:00
parent a668b55d52
commit 8904eaf48b
3 changed files with 20 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/server/src/constants/layouts.js
View file

@ -34,13 +34,11 @@ const EMPTY_LAYOUT = {
_styles: { _styles: {
active: {}, active: {},
hover: {}, hover: {},
normal: { normal: {},
"background-image": "#f5f5f5",
},
selected: {}, selected: {},
}, },
navigation: "Top", navigation: "Top",
contentWidth: "Large", width: "Large",
links: [ links: [
{ {
text: "Home", text: "Home",
@ -84,13 +82,11 @@ const BASE_LAYOUTS = [
_styles: { _styles: {
active: {}, active: {},
hover: {}, hover: {},
normal: { normal: {},
background: "#f5f5f5",
},
selected: {}, selected: {},
}, },
navigation: "Top", navigation: "Top",
contentWidth: "Large", width: "Large",
links: [ links: [
{ {
text: "Home", text: "Home",
@ -132,13 +128,11 @@ const BASE_LAYOUTS = [
_styles: { _styles: {
active: {}, active: {},
hover: {}, hover: {},
normal: { normal: {},
background: "#f5f5f5",
},
selected: {}, selected: {},
}, },
navigation: "Top", navigation: "Top",
contentWidth: "Large", width: "Large",
links: [ links: [
{ {
text: "Home", text: "Home",

4
packages/standard-components/manifest.json
View file

@ -45,8 +45,8 @@
}, },
{ {
"type": "select", "type": "select",
"label": "Content Width", "label": "Width",
"key": "contentWidth", "key": "width",
"options": ["Small", "Medium", "Large"], "options": ["Small", "Medium", "Large"],
"defaultValue": "Large" "defaultValue": "Large"
}, },

25
packages/standard-components/src/Layout.svelte
View file

@ -12,7 +12,7 @@
export let navigation = "Top" export let navigation = "Top"
export let sticky = false export let sticky = false
export let links export let links
export let contentWidth = "Large" export let width = "Large"
const navigationClasses = { const navigationClasses = {
Top: "top", Top: "top",
@ -27,7 +27,7 @@
$: validLinks = links?.filter(link => link.text && link.url) || [] $: validLinks = links?.filter(link => link.text && link.url) || []
$: typeClass = navigationClasses[navigation] || "none" $: typeClass = navigationClasses[navigation] || "none"
$: widthClass = widthClasses[contentWidth] || "l" $: widthClass = widthClasses[width] || "l"
let mobileOpen = false let mobileOpen = false
const isInternal = url => { const isInternal = url => {
@ -46,7 +46,7 @@
<div class="layout layout--{typeClass}" use:styleable={$component.styles}> <div class="layout layout--{typeClass}" use:styleable={$component.styles}>
{#if typeClass !== "none"} {#if typeClass !== "none"}
<div class="nav-wrapper" class:sticky> <div class="nav-wrapper" class:sticky>
<div class="nav nav--{typeClass}"> <div class="nav nav--{typeClass} size--{widthClass}">
<div class="nav-header"> <div class="nav-header">
{#if validLinks?.length} {#if validLinks?.length}
<div class="burger"> <div class="burger">
@ -104,7 +104,7 @@
</div> </div>
{/if} {/if}
<div class="main-wrapper"> <div class="main-wrapper">
<div class="main main--{widthClass}"> <div class="main size--{widthClass}">
<slot /> <slot />
</div> </div>
</div> </div>
@ -142,8 +142,8 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
padding: var(--spacing-xl) 32px; padding: var(--spacing-xl) 32px;
width: 1400px;
max-width: 100%; max-width: 100%;
gap: var(--spacing-xl);
} }
.nav-header { .nav-header {
flex: 0 0 auto; flex: 0 0 auto;
@ -168,13 +168,13 @@
position: relative; position: relative;
padding: 32px; padding: 32px;
} }
.main--s { .size--s {
width: 800px; width: 800px;
} }
.main--m { .size--m {
width: 1100px; width: 1100px;
} }
.main--l { .size--l {
width: 1400px; width: 1400px;
} }
@ -201,7 +201,8 @@
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: var(--spacing-l); gap: var(--spacing-xl);
margin-top: var(--spacing-xl);
} }
.link { .link {
color: var(--spectrum-alias-text-color); color: var(--spectrum-alias-text-color);
@ -233,12 +234,8 @@
overflow: auto; overflow: auto;
} }
.nav--top {
gap: var(--spacing-xl);
}
.nav--left { .nav--left {
width: 250px; width: 250px;
gap: var(--spacing-xl);
padding: var(--spacing-xl); padding: var(--spacing-xl);
} }
@ -246,6 +243,7 @@
height: 36px; height: 36px;
} }
.nav--left .links { .nav--left .links {
margin-top: 0;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
@ -291,6 +289,7 @@
/* Transform links into drawer */ /* Transform links into drawer */
.links { .links {
margin-top: 0;
position: fixed; position: fixed;
top: 0; top: 0;
left: -250px; left: -250px;