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

Add placeholder to background image, fix default styles and add size styles

Browse source
This commit is contained in:
Andrew Kingston 2021-06-25 15:36:51 +01:00
parent 28e337858a
commit 0361f2248b
2 changed files with 23 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -742,6 +742,7 @@
"name": "Background Image", "name": "Background Image",
"description": "A background image", "description": "A background image",
"icon": "Images", "icon": "Images",
"styles": ["size"],
"illegalChildren": ["section"], "illegalChildren": ["section"],
"settings": [ "settings": [
{ {

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

@ -1,5 +1,6 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte"
const { styleable } = getContext("sdk") const { styleable } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
@ -18,13 +19,24 @@
} }
</script> </script>
<div class="outer" use:styleable={$component.styles}> {#if url}
<div class="inner" {style} /> <div class="outer" use:styleable={$component.styles}>
</div> <div class="inner" {style} />
</div>
{:else}
<div
class="placeholder"
use:styleable={{ ...$component.styles, empty: true }}
>
<Placeholder />
</div>
{/if}
<style> <style>
.outer { .outer {
position: relative; position: relative;
width: 100%;
height: 400px;
} }
.inner { .inner {
@ -35,4 +47,11 @@
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
} }
.placeholder {
display: grid;
place-items: center;
height: 75px;
width: 150px;
}
</style> </style>