Add core page layout for onboarding to frontend-core
This commit is contained in:
parent
355fb6fda2
commit
37244d3dff
4 changed files with 118 additions and 0 deletions
53
packages/frontend-core/src/components/SplitPage.svelte
Normal file
53
packages/frontend-core/src/components/SplitPage.svelte
Normal file
|
@ -0,0 +1,53 @@
|
|||
<div class="split-page">
|
||||
<div class="left">
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<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 {
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--spectrum-global-color-gray-300) 0%,
|
||||
var(--background) 100%
|
||||
);
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
.split-page {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.left {
|
||||
padding: 20px;
|
||||
}
|
||||
.right {
|
||||
display: none;
|
||||
}
|
||||
.content {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
62
packages/frontend-core/src/components/TestimonialPage.svelte
Normal file
62
packages/frontend-core/src/components/TestimonialPage.svelte
Normal file
|
@ -0,0 +1,62 @@
|
|||
<script>
|
||||
import SplitPage from "./SplitPage.svelte"
|
||||
import { Layout, Body } from "@budibase/bbui"
|
||||
</script>
|
||||
|
||||
<SplitPage>
|
||||
<slot />
|
||||
<div class="wrapper" slot="right">
|
||||
<div class="testimonial">
|
||||
<Layout noPadding gap="S">
|
||||
<div class="text">
|
||||
"Here is an example of how Budibase changed my life for the better and
|
||||
now all I do is eat, sleep, build apps, repeat."
|
||||
</div>
|
||||
<div class="user">
|
||||
<img
|
||||
src="https://icon-library.com/images/male-user-icon/male-user-icon-24.jpg"
|
||||
/>
|
||||
<div class="author">
|
||||
<div class="name">No-code Enthusiast</div>
|
||||
<div class="company">Bedroom TLD</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
</div>
|
||||
</SplitPage>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.testimonial {
|
||||
width: 280px;
|
||||
padding: 40px;
|
||||
}
|
||||
.text {
|
||||
font-size: var(--font-size-l);
|
||||
font-style: italic;
|
||||
}
|
||||
img {
|
||||
width: 40px;
|
||||
}
|
||||
.user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
.name {
|
||||
font-weight: bold;
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
font-size: var(--font-size-l);
|
||||
}
|
||||
.company {
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
}
|
||||
</style>
|
2
packages/frontend-core/src/components/index.js
Normal file
2
packages/frontend-core/src/components/index.js
Normal file
|
@ -0,0 +1,2 @@
|
|||
export { default as SplitPage } from "./SplitPage.svelte"
|
||||
export { default as TestimonialPage } from "./TestimonialPage.svelte"
|
|
@ -3,3 +3,4 @@ export { fetchData } from "./fetch/fetchData"
|
|||
export * as Constants from "./constants"
|
||||
export * from "./stores"
|
||||
export * from "./utils"
|
||||
export * from "./components"
|
||||
|
|
Loading…
Reference in a new issue