Merge template and index page styles with new BBUI
This commit is contained in:
Andrew Kingston
parent
68a03eceb4
commit
701786dc25
6 changed files with 94 additions and 80 deletions
|
|
@ -19,7 +19,7 @@
|
|||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Heading medium black>Your Apps</Heading>
|
||||
<Heading lh medium black>Your Apps</Heading>
|
||||
{#await promise}
|
||||
<div class="spinner-container">
|
||||
<Spinner size="30" />
|
||||
|
|
@ -48,8 +48,4 @@
|
|||
grid-gap: var(--layout-m);
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.root {
|
||||
margin: 20px 80px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -216,38 +216,43 @@
|
|||
step={i + 1} />
|
||||
{/each}
|
||||
</div>
|
||||
<div class="step">
|
||||
<Form bind:values={$createAppStore.values}>
|
||||
{#each steps as step, i (i)}
|
||||
<div class:hidden={$createAppStore.currentStep !== i}>
|
||||
<svelte:component
|
||||
this={step.component}
|
||||
{template}
|
||||
{validationErrors}
|
||||
options={step.options}
|
||||
name={step.name} />
|
||||
</div>
|
||||
{/each}
|
||||
</Form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
{#if $createAppStore.currentStep > 0}
|
||||
<Button medium secondary on:click={back}>Back</Button>
|
||||
{/if}
|
||||
{#if $createAppStore.currentStep < steps.length - 1}
|
||||
<Button medium blue on:click={next} disabled={!currentStepIsValid}>
|
||||
Next
|
||||
</Button>
|
||||
{/if}
|
||||
{#if $createAppStore.currentStep === steps.length - 1}
|
||||
<Button
|
||||
medium
|
||||
blue
|
||||
on:click={signUp}
|
||||
disabled={!fullFormIsValid || submitting}>
|
||||
{submitting ? 'Loading...' : 'Submit'}
|
||||
</Button>
|
||||
{/if}
|
||||
<div class="body">
|
||||
<div class="heading">
|
||||
<h3 class="header">Get Started with Budibase</h3>
|
||||
</div>
|
||||
<div class="step">
|
||||
<Form bind:values={$createAppStore.values}>
|
||||
{#each steps as step, i (i)}
|
||||
<div class:hidden={$createAppStore.currentStep !== i}>
|
||||
<svelte:component
|
||||
this={step.component}
|
||||
{template}
|
||||
{validationErrors}
|
||||
options={step.options}
|
||||
name={step.name} />
|
||||
</div>
|
||||
{/each}
|
||||
</Form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
{#if $createAppStore.currentStep > 0}
|
||||
<Button medium secondary on:click={back}>Back</Button>
|
||||
{/if}
|
||||
{#if $createAppStore.currentStep < steps.length - 1}
|
||||
<Button medium blue on:click={next} disabled={!currentStepIsValid}>
|
||||
Next
|
||||
</Button>
|
||||
{/if}
|
||||
{#if $createAppStore.currentStep === steps.length - 1}
|
||||
<Button
|
||||
medium
|
||||
blue
|
||||
on:click={signUp}
|
||||
disabled={!fullFormIsValid || submitting}>
|
||||
{submitting ? 'Loading...' : 'Submit'}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
|
||||
{#if submitting}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,22 @@
|
|||
<script>
|
||||
import { Input, Heading, Body } from "@budibase/bbui"
|
||||
import { Label, Heading, Input } from "@budibase/bbui"
|
||||
export let validationErrors
|
||||
export let template
|
||||
|
||||
let blurred = { appName: false }
|
||||
</script>
|
||||
|
||||
{#if template}
|
||||
<Heading small black>Selected Template</Heading>
|
||||
<Body>{template.name}</Body>
|
||||
{/if}
|
||||
<h2>Create your web app</h2>
|
||||
<div class="container">
|
||||
{#if template}
|
||||
<div class="template">
|
||||
<Label extraSmall grey>Selected Template</Label>
|
||||
<Heading small>{template.name}</Heading>
|
||||
</div>
|
||||
{/if}
|
||||
<Input
|
||||
on:input={() => (blurred.appName = true)}
|
||||
label="Web app name"
|
||||
label="Web App Name"
|
||||
name="applicationName"
|
||||
placeholder="Enter name of your web application"
|
||||
type="name"
|
||||
|
|
@ -24,6 +26,11 @@
|
|||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
grid-gap: 40px;
|
||||
grid-gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.template :global(label) {
|
||||
/* Fix layout due to LH 0 on heading */
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
placeholder="Password"
|
||||
type="pasword"
|
||||
error={blurred.password && validationErrors.password} />
|
||||
<Select secondary name="accessLevelId">
|
||||
<Select label="Access Level" secondary name="accessLevelId">
|
||||
<option value="ADMIN">Admin</option>
|
||||
<option value="POWER_USER">Power User</option>
|
||||
</Select>
|
||||
|
|
@ -30,6 +30,6 @@
|
|||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
grid-gap: 40px;
|
||||
grid-gap: var(--spacing-xl);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { Button, Heading, Body } from "@budibase/bbui"
|
||||
import { Button, Heading, Body, Spacer } from "@budibase/bbui"
|
||||
import AppCard from "./AppCard.svelte"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import api from "builderStore/api"
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Heading medium black>Start With a Template</Heading>
|
||||
<Heading lh medium black>Start With a Template</Heading>
|
||||
{#await templatesPromise}
|
||||
<div class="spinner-container">
|
||||
<Spinner size="30" />
|
||||
|
|
@ -24,11 +24,12 @@
|
|||
<div class="templates">
|
||||
{#each templates as template}
|
||||
<div class="templates-card">
|
||||
<Heading black medium>{template.name}</Heading>
|
||||
<Heading black small>{template.name}</Heading>
|
||||
<Spacer small />
|
||||
<Body medium grey>{template.category}</Body>
|
||||
<Body small black>{template.description}</Body>
|
||||
<Body lh small black>{template.description}</Body>
|
||||
<div>
|
||||
<img src={template.image} width="300" />
|
||||
<img src={template.image} width="100%" />
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<Button secondary on:click={() => onSelect(template)}>
|
||||
|
|
@ -68,8 +69,4 @@
|
|||
color: var(--ink);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.root {
|
||||
margin: 20px 80px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import AppList from "components/start/AppList.svelte"
|
||||
import { onMount } from "svelte"
|
||||
import ActionButton from "components/common/ActionButton.svelte"
|
||||
import { get } from "builderStore/api"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||
import { Button, Heading } from "@budibase/bbui"
|
||||
|
|
@ -13,6 +14,7 @@
|
|||
|
||||
let promise = getApps()
|
||||
let hasKey
|
||||
let template
|
||||
let modalVisible = false
|
||||
|
||||
async function getApps() {
|
||||
|
|
@ -44,41 +46,49 @@
|
|||
}
|
||||
}
|
||||
|
||||
function selectTemplate(newTemplate) {
|
||||
template = newTemplate
|
||||
modalVisible = true
|
||||
}
|
||||
|
||||
checkIfKeysAndApps()
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
<Heading medium black>Welcome to the Budibase Beta</Heading>
|
||||
<Button primary purple on:click={() => (modalVisible = true)}>
|
||||
Create New Web App
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="banner">
|
||||
<img src="/_builder/assets/orange-landscape.png" alt="rocket" />
|
||||
<div class="banner-content">
|
||||
Every accomplishment starts with a decision to try.
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<Heading medium black>Welcome to the Budibase Beta</Heading>
|
||||
<Button primary purple on:click={() => (modalVisible = true)}>
|
||||
Create New Web App
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TemplateList onSelect={() => (modalVisible = true)} />
|
||||
<AppList />
|
||||
{#if modalVisible}
|
||||
<CreateAppModal bind:visible={modalVisible} {hasKey} {template} />
|
||||
{/if}
|
||||
<div class="banner">
|
||||
<img src="/_builder/assets/orange-landscape.png" alt="rocket" />
|
||||
<div class="banner-content">
|
||||
Every accomplishment starts with a decision to try.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TemplateList onSelect={selectTemplate} />
|
||||
|
||||
<AppList />
|
||||
|
||||
{#if modalVisible}
|
||||
<CreateAppModal bind:visible={modalVisible} {hasKey} {template} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
gap: var(--spacing-xl);
|
||||
margin: 40px 80px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 40px 80px 0px 80px;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
font-size: var(--font-size-3xl);
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.banner {
|
||||
|
|
@ -88,7 +98,6 @@
|
|||
position: relative;
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin: 20px 80px 40px 80px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue