MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge template and index page styles with new BBUI

This commit is contained in:
Andrew Kingston 2020-10-05 12:20:59 +01:00
parent 68a03eceb4
commit 701786dc25
6 changed files with 94 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/builder/src/components/start/AppList.svelte
View File

@ -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>

5
packages/builder/src/components/start/CreateAppModal.svelte
View File

@ -216,6 +216,10 @@
step={i + 1} />
{/each}
</div>
<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)}
@ -249,6 +253,7 @@
</Button>
{/if}
</div>
</div>
<img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
{#if submitting}
<div in:fade class="spinner-container">

21
packages/builder/src/components/start/Steps/Info.svelte
View File

@ -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>

4
packages/builder/src/components/start/Steps/User.svelte
View File

@ -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>

15
packages/builder/src/components/start/TemplateList.svelte
View File

@ -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>

27
packages/builder/src/pages/index.svelte
View File

@ -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,9 +46,15 @@
}
}
function selectTemplate(newTemplate) {
template = newTemplate
modalVisible = true
}
checkIfKeysAndApps()
</script>
<div class="container">
<div class="header">
<Heading medium black>Welcome to the Budibase Beta</Heading>
<Button primary purple on:click={() => (modalVisible = true)}>
@ -61,24 +69,26 @@
</div>
</div>
<TemplateList onSelect={() => (modalVisible = true)} />
<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;
}