CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-30 09:07:25 +13:00
Code Issues Projects Releases Wiki Activity

Move scrolling to layout level and provide opinionated defaults

Browse source
This commit is contained in:
Andrew Kingston 2021-06-14 18:24:02 +01:00
parent f802cf7217
commit ad28ea4855
3 changed files with 29 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/src/components/ClientApp.svelte
View file

@ -95,8 +95,6 @@
#app-root { #app-root {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow-y: auto;
overflow-x: hidden;
position: relative; position: relative;
} }
</style> </style>

1
packages/client/src/components/Router.svelte
View file

@ -41,6 +41,5 @@
<style> <style>
div { div {
position: relative; position: relative;
overflow-x: auto;
} }
</style> </style>

48
packages/standard-components/src/layout/Layout.svelte
View file

@ -10,6 +10,7 @@
export let logoUrl = "https://i.imgur.com/Xhdt1YP.png" export let logoUrl = "https://i.imgur.com/Xhdt1YP.png"
export let hideLogo = false export let hideLogo = false
export let navigation = "Top" export let navigation = "Top"
export let sticky = true
export let links = [ export let links = [
{ text: "Some Text", url: "/" }, { text: "Some Text", url: "/" },
@ -28,7 +29,7 @@
<div class="layout layout--{type}" use:styleable={$component.styles}> <div class="layout layout--{type}" use:styleable={$component.styles}>
{#if type !== "none"} {#if type !== "none"}
<div class="nav-wrapper"> <div class="nav-wrapper" class:sticky>
<div class="nav nav--{type}"> <div class="nav nav--{type}">
<div class="burger"> <div class="burger">
<ActionButton <ActionButton
@ -85,18 +86,29 @@
<style> <style>
/* Main components */ /* Main components */
.layout { .layout {
display: grid; display: flex;
position: relative; flex-direction: column;
grid-template-columns: 1fr; justify-content: flex-start;
min-height: 100%; align-items: stretch;
height: 100%;
overflow: auto;
} }
.nav-wrapper { .nav-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: stretch; align-items: stretch;
background: white; background: white;
z-index: 1;
} }
.layout--top .nav-wrapper.sticky {
position: sticky;
top: 0;
left: 0;
box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
}
.nav { .nav {
flex: 1 1 auto; flex: 1 1 auto;
display: grid; display: grid;
@ -109,6 +121,7 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: stretch; align-items: stretch;
flex: 1 1 auto;
} }
.main { .main {
flex: 1 1 auto; flex: 1 1 auto;
@ -117,6 +130,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
max-width: 1400px; max-width: 1400px;
position: relative;
} }
/* Nav components */ /* Nav components */
@ -170,14 +184,13 @@
/* Desktop nav overrides */ /* Desktop nav overrides */
@media (min-width: 600px) { @media (min-width: 600px) {
.layout--top {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.layout--left { .layout--left {
grid-template-columns: auto 1fr; flex-direction: row;
grid-template-rows: 1fr; overflow: hidden;
}
.layout--left .main-wrapper {
height: 100%; height: 100%;
overflow: auto;
} }
.nav--top { .nav--top {
@ -215,18 +228,15 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
} }
.layout--left .main-wrapper {
height: 100%;
overflow: auto;
}
} }
/* Mobile nav overrides */ /* Mobile nav overrides */
@media (max-width: 600px) { @media (max-width: 600px) {
/* Always use top layout on mobile */ .nav-wrapper {
.layout { position: sticky;
grid-template-columns: 1fr; top: 0;
grid-template-rows: auto 1fr; left: 0;
box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
} }
/* Show close button in drawer */ /* Show close button in drawer */