1
0
Fork 0
mirror of synced 2024-09-19 18:59:06 +12:00
budibase/packages/frontend-core/src/components/SplitPage.svelte
Gerard Burns dd343a5946 New App Onboarding (#9489)
* New App Onboarding

* Lint

* Move app creation onboarding into its own route

* Fix quiet action button variant

* Fix alt attribute background image flashing

* Update routing logic and redirects to show app creation onboarding

* Navigate to data rather than design upon initial app creation to allow tour to function properly

* Tidy up popover logic and remove tip functionality

* Fix binding popovers

* Lint

* Silence spammy warnings from the builder

* Exclude SVG files from rollup plugin image to fix spectrum icons

* Fix help menu icon colours not working in light themes

* Tweak help menu styles

---------

Co-authored-by: Andrew Kingston <andrew@kingston.dev>
2023-01-31 19:34:32 +00:00

61 lines
1 KiB
Svelte

<script>
import BG from "../../assets/bg.png"
</script>
<div class="split-page">
<div class="left">
<div class="content">
<slot />
</div>
</div>
<div class="right spectrum spectrum--darkest">
<!-- No alt attribute to avoid flash -->
<img src={BG} alt=" " />
<slot name="right" />
</div>
</div>
<style>
.split-page {
height: 100%;
display: grid;
grid-template-columns: max(50%, 380px) 1fr;
justify-content: stretch;
overflow: hidden;
}
.left {
background: var(--background);
display: grid;
place-items: center;
padding: 40px;
overflow-y: auto;
}
.right {
overflow: hidden;
position: relative;
}
.right img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.content {
width: 100%;
max-width: 400px;
min-height: 480px;
}
@media (max-width: 740px) {
.split-page {
grid-template-columns: 1fr;
}
.left {
padding: 20px;
}
.right {
display: none;
}
}
</style>