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

Various minor UI updates including the settings modal 

Settings modal update includies, improved spacing, element sizing. Working with this part of the platform felt a little brittle. It might be the fact it's a modal.

The frontend component section had a different layout that the block section in the backend and workflow section - updated to follow suit.

Dataform button updated and improved.

Settings button color updated

Additonal data blocks added which are pretty popular (not essential but took me mew a seconds to add and will save me a decent bit in the future)
pull/435/head
Joe 6 years ago
parent
28c42016cc
commit
70050332e6
27 changed files with 172 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/builder/src/budibase.css
  2. 5
      packages/builder/src/components/common/Block.svelte
  3. 11
      packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
  4. 23
      packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
  5. 4
      packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
  6. 2
      packages/builder/src/components/settings/Link.svelte
  7. 4
      packages/builder/src/components/settings/Modal.svelte
  8. 5
      packages/builder/src/components/settings/tabs/APIKeys.svelte
  9. 18
      packages/builder/src/components/settings/tabs/DangerZone.svelte
  10. 38
      packages/builder/src/components/settings/tabs/General.svelte
  11. 31
      packages/builder/src/components/settings/tabs/Users.svelte
  12. 12
      packages/builder/src/components/start/AppCard.svelte
  13. 2
      packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
  14. 11
      packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
  15. 3
      packages/builder/src/components/userInterface/Colorpicker/components/Input.svelte
  16. 7
      packages/builder/src/components/userInterface/ComponentSelectionList.svelte
  17. 2
      packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
  18. 11
      packages/builder/src/components/userInterface/ItemTab/Item.svelte
  19. 19
      packages/builder/src/components/userInterface/ItemTab/Tab.svelte
  20. 2
      packages/builder/src/components/userInterface/temporaryPanelStructure.js
  21. 2
      packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
  22. 32
      packages/builder/src/constants/backend/index.js
  23. 7
      packages/standard-components/public/global.css
  24. 12
      packages/standard-components/src/DataForm.svelte
  25. 7
      packages/standard-components/src/DataFormWide.svelte
  26. 6
      packages/standard-components/src/Heading.svelte
  27. 7
      packages/standard-components/src/Navigation.svelte

2
packages/builder/src/budibase.css
View File

@ -63,7 +63,7 @@
.budibase__nav-item.selected { .budibase__nav-item.selected {
color: var(--ink); color: var(--ink);
background: var(--blue-light); background: var(--grey-2);
} }
.budibase__nav-item:hover { .budibase__nav-item:hover {

5
packages/builder/src/components/common/Block.svelte
View File

@ -28,12 +28,15 @@
} }
i { i {
font-size: 30px; font-size: 24px;
color: var(--grey-7);
} }
span { span {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
margin-top: 8px;
line-height: 1.25;
} }
div:hover { div:hover {

11
packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
View File

@ -3,7 +3,7 @@
import { store, backendUiStore } from "builderStore" import { store, backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import { compose, map, get, flatten } from "lodash/fp" import { compose, map, get, flatten } from "lodash/fp"
import { Button } from "@budibase/bbui" import { Input, TextArea, Button } from "@budibase/bbui"
import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte" import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
import Select from "components/common/Select.svelte" import Select from "components/common/Select.svelte"
import RecordFieldControl from "./RecordFieldControl.svelte" import RecordFieldControl from "./RecordFieldControl.svelte"
@ -70,7 +70,7 @@
<div class="actions"> <div class="actions">
<header> <header>
<i class="ri-file-user-fill" /> <i class="ri-file-user-fill" />
<h4 class="budibase__title--4">Create / Edit Record</h4> <h4>Create / Edit Record</h4>
</header> </header>
<ErrorsBox {errors} /> <ErrorsBox {errors} />
<form on:submit|preventDefault class="uk-form-stacked"> <form on:submit|preventDefault class="uk-form-stacked">
@ -117,15 +117,16 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--blue-light); background: var(--blue-light);
color: var(--ink); color: var(--grey-7);
font-size: 20px; font-size: 20px;
border-radius: 3px; border-radius: 5px;
} }
h4 { h4 {
display: inline-block; display: inline-block;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: 600;
font-family: sans-serif;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
} }

23
packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
View File

@ -52,17 +52,28 @@
} }
span { span {
cursor: pointer;
display: grid;
justify-content: center;
align-content: center;
padding: 0px 16px;
height: 36px;
text-align: center; text-align: center;
padding: 10px; background: #ffffff;
font-weight: 500; color: var(--grey-7);
border-radius: 3px; border-radius: 5px;
color: var(--ink-lighter); font-family: inter;
font-size: 14px; font-size: 14px;
background: var(--grey-1); font-weight: 400;
transition: all 0.3s;
text-rendering: optimizeLegibility;
border: none !important;
transition: 0.2s;
outline: none;
} }
span:hover { span:hover {
background: var(--blue-light); color: var(--ink);
cursor: pointer; cursor: pointer;
} }

4
packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
View File

@ -31,11 +31,11 @@
} }
.selected { .selected {
background-color: var(--blue-light); background-color: var(--grey-2);
} }
div:hover { div:hover {
background-color: var(--blue-light); background-color: var(--grey-1);
cursor: pointer; cursor: pointer;
} }

2
packages/builder/src/components/settings/Link.svelte
View File

@ -34,7 +34,7 @@
} }
.topnavitemright { .topnavitemright {
cursor: pointer; cursor: pointer;
color: var(--ink-light); color: var(--grey-7);
margin: 0px 20px 0px 0px; margin: 0px 20px 0px 0px;
padding-top: 4px; padding-top: 4px;
font-weight: 500; font-weight: 500;

4
packages/builder/src/components/settings/Modal.svelte
View File

@ -55,6 +55,7 @@
<style> <style>
.container { .container {
position: relative; position: relative;
height: 36rem;
} }
.close-button { .close-button {
@ -88,9 +89,10 @@
width: 20px; width: 20px;
padding: 10px; padding: 10px;
background-color: var(--blue-light); background-color: var(--blue-light);
color: var(--grey-7);
} }
.body { .body {
padding: 40px 40px 80px 40px; padding: 40px 40px 40px 40px;
display: grid; display: grid;
grid-gap: 20px; grid-gap: 20px;
} }

5
packages/builder/src/components/settings/tabs/APIKeys.svelte
View File

@ -2,7 +2,6 @@
import { Input, Button } from "@budibase/bbui" import { Input, Button } from "@budibase/bbui"
import { store } from "builderStore" import { store } from "builderStore"
import api from "builderStore/api" import api from "builderStore/api"
import Title from "../TabTitle.svelte"
let keys = { budibase: "", sendGrid: "" } let keys = { budibase: "", sendGrid: "" }
@ -22,7 +21,6 @@
fetchKeys() fetchKeys()
</script> </script>
<Title>API Keys</Title>
<div class="container"> <div class="container">
<div class="background"> <div class="background">
<Input <Input
@ -49,7 +47,6 @@
} }
.background { .background {
border-radius: 5px; border-radius: 5px;
background-color: var(--light-grey); padding: 12px 0px;
padding: 12px 12px 18px 12px;
} }
</style> </style>

18
packages/builder/src/components/settings/tabs/DangerZone.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import { params, goto } from "@sveltech/routify" import { params, goto } from "@sveltech/routify"
import { Input, TextArea, Button } from "@budibase/bbui" import { Input, TextArea, Button } from "@budibase/bbui"
import Title from "../TabTitle.svelte"
import { del } from "builderStore/api" import { del } from "builderStore/api"
let value = "" let value = ""
@ -23,20 +22,21 @@
} }
</script> </script>
<Title>Danger Zone</Title>
<div class="background"> <div class="background">
<p>
Type DELETE into the textbox, then click the following button to delete your
web app:
</p>
<Input <Input
on:change={e => (value = e.target.value)} on:change={e => (value = e.target.value)}
on:input={e => (value = e.target.value)} on:input={e => (value = e.target.value)}
thin thin
disabled={loading} disabled={loading}
placeholder="" placeholder="" />
label="Type DELETE into the textbox, then click the following button to
delete your web app:" />
<Button <Button
disabled={value !== 'DELETE' || loading} disabled={value !== 'DELETE' || loading}
primary red
wide wide
on:click={deleteApp}> on:click={deleteApp}>
Delete Entire Web App Delete Entire Web App
@ -48,8 +48,10 @@
display: grid; display: grid;
grid-gap: 16px; grid-gap: 16px;
border-radius: 5px; border-radius: 5px;
background-color: var(--light-grey); padding: 12px 0px;
padding: 12px 12px 18px 12px; }
p {
margin: 0;
} }
.background :global(button) { .background :global(button) {
max-width: 100%; max-width: 100%;

38
packages/builder/src/components/settings/tabs/General.svelte
View File

@ -2,7 +2,6 @@
import { Input, TextArea, Button } from "@budibase/bbui" import { Input, TextArea, Button } from "@budibase/bbui"
import { store } from "builderStore" import { store } from "builderStore"
import api from "builderStore/api" import api from "builderStore/api"
import Title from "../TabTitle.svelte"
async function updateApplication(data) { async function updateApplication(data) {
const response = await api.put(`/api/${$store.appId}`, data) const response = await api.put(`/api/${$store.appId}`, data)
@ -17,34 +16,25 @@
} }
</script> </script>
<Title>General</Title>
<div class="container"> <div class="container">
<div class="background"> <Input
<Input on:save={e => updateApplication({ name: e.detail })}
on:save={e => updateApplication({ name: e.detail })} thin
thin edit
edit value={$store.name}
value={$store.name} label="Name" />
label="Name" /> <TextArea
</div> on:save={e => updateApplication({ description: e.detail })}
<div class="background"> thin
<TextArea edit
on:save={e => updateApplication({ description: e.detail })} value={$store.description}
thin label="Description" />
edit
value={$store.description}
label="Name" />
</div>
</div> </div>
<style> <style>
.container { .container {
display: grid; display: grid;
grid-gap: 16px; grid-gap: 32px;
} margin-top: 32px;
.background {
border-radius: 5px;
background-color: var(--grey-1);
padding: 12px 12px 18px 12px;
} }
</style> </style>

31
packages/builder/src/components/settings/tabs/Users.svelte
View File

@ -1,6 +1,5 @@
<script> <script>
import { Input, Select, Button } from "@budibase/bbui" import { Input, Select, Button } from "@budibase/bbui"
import Title from "../TabTitle.svelte"
import UserRow from "../UserRow.svelte" import UserRow from "../UserRow.svelte"
import { store, backendUiStore } from "builderStore" import { store, backendUiStore } from "builderStore"
@ -52,9 +51,8 @@
let fetchUsersPromise = fetchUsers() let fetchUsersPromise = fetchUsers()
</script> </script>
<Title>Users</Title>
<div class="container"> <div class="container">
<div class="background create"> <div class="background">
<div class="title">Create new user</div> <div class="title">Create new user</div>
<div class="inputs"> <div class="inputs">
<Input thin bind:value={username} name="Name" placeholder="Username" /> <Input thin bind:value={username} name="Name" placeholder="Username" />
@ -69,10 +67,10 @@
</Select> </Select>
</div> </div>
<div class="create-button"> <div class="create-button">
<Button on:click={createUser} small blue>Create</Button> <Button on:click={createUser} small primary>Create</Button>
</div> </div>
</div> </div>
<div class="background"> <div class="background-users">
<div class="title">Current Users</div> <div class="title">Current Users</div>
{#await fetchUsersPromise} {#await fetchUsersPromise}
Loading state! Loading state!
@ -96,23 +94,27 @@
<style> <style>
.container { .container {
display: grid; display: grid;
grid-gap: 14px; grid-gap: 32px;
margin-top: 32px;
} }
.background { .background {
position: relative; position: relative;
display: grid; display: grid;
grid-gap: 12px; grid-gap: 12px;
border-radius: 5px; border-radius: 5px;
background-color: var(--grey-1);
padding: 12px 12px 18px 12px;
} }
.background.create {
background-color: var(--blue-light); .background-users {
position: relative;
display: grid;
grid-gap: 12px;
border-radius: 5px;
} }
.create-button { .create-button {
position: absolute; position: absolute;
top: 12px; top: 0px;
right: 12px; right: 0px;
} }
.create-button :global(button) { .create-button :global(button) {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
@ -125,6 +127,7 @@
} }
.inputs { .inputs {
display: grid; display: grid;
margin-top: 12px;
grid-gap: 18px; grid-gap: 18px;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
@ -133,13 +136,15 @@
border-radius: var(--rounded-small); border-radius: var(--rounded-small);
} }
.inputs :global(select) { .inputs :global(select) {
padding: 9px 12px; padding: 10px 12px;
border-radius: var(--rounded-small); border-radius: var(--rounded-small);
background-color: var(--grey-2);
} }
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
display: grid; display: grid;
grid-gap: 8px; grid-gap: 8px;
margin-top: 0;
} }
</style> </style>

12
packages/builder/src/components/start/AppCard.svelte
View File

@ -10,18 +10,19 @@
<h3 class="app-title">{name}</h3> <h3 class="app-title">{name}</h3>
<p class="app-desc">{description}</p> <p class="app-desc">{description}</p>
<div class="card-footer"> <div class="card-footer">
<a href={`/_builder/${_id}`} class="app-button">Open Web App</a> <a href={`/_builder/${_id}`} class="app-button">Open {name}</a>
</div> </div>
</div> </div>
<style> <style>
.apps-card { .apps-card {
background-color: var(--white); background-color: var(--white);
padding: 20px 20px 30px 20px; padding: 20px 20px 20px 20px;
max-width: 400px; max-width: 400px;
max-height: 150px; max-height: 150px;
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--grey-4); border: 1px solid var(--grey-4);
font-family: Inter;
} }
.app-button:hover { .app-button:hover {
@ -34,12 +35,15 @@
font-weight: 600; font-weight: 600;
color: var(--ink); color: var(--ink);
text-transform: capitalize; text-transform: capitalize;
font-family: Inter;
} }
.app-desc { .app-desc {
color: var(--grey-7); color: var(--grey-7);
font-family: Inter; display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
} }
.card-footer { .card-footer {

2
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View File

@ -72,7 +72,7 @@
}, },
_code: "", _code: "",
className: "", className: "",
text: "Screenslot", text: "Screen Slot",
type: "h1", type: "h1",
_instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
_instanceName: "Heading", _instanceName: "Heading",

11
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View File

@ -5,7 +5,7 @@ export default `<html>
<style> <style>
body, html { body, html {
height: 100%!important; height: 100%!important;
font-family: Roboto !important; font-family: Inter !important;
} }
*, *:before, *:after { *, *:before, *:after {
box-sizing: border-box; box-sizing: border-box;
@ -26,13 +26,16 @@ export default `<html>
} }
.container-screenslot-placeholder { .container-screenslot-placeholder {
display: flex;
align-items: center;
justify-content: center;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
border-style: dashed !important; border-style: dashed !important;
border-width: 1px; border-width: 1px;
color: #806fde; color: #000000;
background: #e9e6ff44; background: #fafafa;
height: 100%; height: 94%;
} }
.container-screenslot-placeholder span { .container-screenslot-placeholder span {

3
packages/builder/src/components/userInterface/Colorpicker/components/Input.svelte
View File

@ -15,7 +15,7 @@
input { input {
width: 175px; width: 175px;
font-size: 13px; font-size: 14px;
background: #f1f3f4; background: #f1f3f4;
border-radius: 8px; border-radius: 8px;
height: 20px; height: 20px;
@ -24,5 +24,6 @@
text-align: center; text-align: center;
border: 1px solid #dadada; border: 1px solid #dadada;
font-weight: 550; font-weight: 550;
font-family: sans-serif;
} }
</style> </style>

7
packages/builder/src/components/userInterface/ComponentSelectionList.svelte
View File

@ -61,8 +61,9 @@
<style> <style>
.panel { .panel {
padding: 20px 0px; margin-top: 20px;
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: 1fr 1fr;
grid-gap: 20px;
} }
</style> </style>

2
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View File

@ -73,7 +73,7 @@
grid-template-columns: 1fr auto auto auto; grid-template-columns: 1fr auto auto auto;
padding: 0px 5px 0px 15px; padding: 0px 5px 0px 15px;
margin: auto 0px; margin: auto 0px;
border-radius: 3px; border-radius: 5px;
height: 36px; height: 36px;
align-items: center; align-items: center;
} }

11
packages/builder/src/components/userInterface/ItemTab/Item.svelte
View File

@ -21,21 +21,17 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
margin-bottom: 8px; padding: 12px 16px 16px 16px;
padding: 8px 0px 16px 0px;
width: 110px;
height: 80px; height: 80px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 8px;
background-color: var(--grey-1); background-color: var(--grey-1);
border-radius: 3px; border-radius: 5px;
} }
.item-item:hover { .item-item:hover {
background: var(--grey-2); background: var(--grey-2);
border-radius: 3px; transition: all 0.3s;
transition: all 0.2s;
} }
.item-icon { .item-icon {
@ -51,6 +47,7 @@
.item-name { .item-name {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
text-align: center;
} }
i { i {

19
packages/builder/src/components/userInterface/ItemTab/Tab.svelte
View File

@ -23,21 +23,26 @@
{#if !list.isCategory} {#if !list.isCategory}
<button class="back-button" on:click={() => (list = category)}>Back</button> <button class="back-button" on:click={() => (list = category)}>Back</button>
{/if} {/if}
{#each list.children as item} {#each list.children as item}
<Item {item} on:click={() => handleClick(item)} /> <Item {item} on:click={() => handleClick(item)} />
{/each} {/each}
<style> <style>
.back-button { .back-button {
font-size: 16px; grid-column: 1 / span 2;
width: 100%; font-size: 14px;
text-align: center; text-align: center;
height: 40px; height: 36px;
border-radius: 3px; border-radius: 5px;
border: solid 1px #e8e8ef; border: solid 1px var(--grey-3);
background: white; background: white;
margin-bottom: 20px;
cursor: pointer; cursor: pointer;
font-weight: 500;
font-family: Inter;
transition: all 0.3ms;
}
.back-button:hover {
background: var(--grey-1);
} }
</style> </style>

2
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -472,7 +472,7 @@ export default {
children: [ children: [
{ {
_component: "##builtin/screenslot", _component: "##builtin/screenslot",
name: "Screenslot", name: "Screen Slot",
description: description:
"This component is a placeholder for the rendering of a screen within a page.", "This component is a placeholder for the rendering of a screen within a page.",
icon: "ri-crop-2-fill", icon: "ri-crop-2-fill",

2
packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
View File

@ -91,7 +91,7 @@
} }
.workflow-item.selected { .workflow-item.selected {
background: var(--blue-light); background: var(--grey-2);
} }
.new-workflow-button { .new-workflow-button {

32
packages/builder/src/constants/backend/index.js
View File

@ -87,8 +87,38 @@ export const BLOCKS = {
presence: false, presence: false,
}, },
}, },
COMPANY: {
name: "Company",
icon: "ri-text",
type: "string",
constraints: {
type: "string",
length: {},
presence: false,
},
},
EMAIL: {
name: "Email",
icon: "ri-text",
type: "string",
constraints: {
type: "string",
length: {},
presence: false,
},
},
PHONE_NUMBER: { PHONE_NUMBER: {
name: "Phone Number", name: "Phone No.",
icon: "ri-number-1",
type: "number",
constraints: {
type: "number",
presence: false,
numericality: {},
},
},
VALUE: {
name: "Value",
icon: "ri-number-1", icon: "ri-number-1",
type: "number", type: "number",
constraints: { constraints: {

7
packages/standard-components/public/global.css
View File

@ -12,6 +12,13 @@ body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
} }
h4 {
color: #000000;
font-size: 24px;
box-sizing: border-box;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
a { a {
color: rgb(0,100,200); color: rgb(0,100,200);
text-decoration: none; text-decoration: none;

12
packages/standard-components/src/DataForm.svelte
View File

@ -166,9 +166,7 @@
<button on:click={save} class:saved> <button on:click={save} class:saved>
{#if saved} {#if saved}
<div in:fade> <div in:fade>
<span class:saved style="margin-right: 5px">🎉</span> <span class:saved>Success</span>
Success
<span class:saved style="margin-left: 5px">🎉</span>
</div> </div>
{:else} {:else}
<div>{buttonText || 'Submit Form'}</div> <div>{buttonText || 'Submit Form'}</div>
@ -187,14 +185,13 @@
.form-content { .form-content {
margin-bottom: 20px; margin-bottom: 20px;
width: 100%;
} }
.input { .input {
width: 600px;
height: 40px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
padding: 6px 12px 6px 12px; padding: 1rem;
font-size: 16px; font-size: 16px;
} }
@ -244,7 +241,8 @@
} }
button.saved { button.saved {
background-color: green; background-color: #84c991;
border: none;
} }
button:hover { button:hover {

7
packages/standard-components/src/DataFormWide.svelte
View File

@ -166,9 +166,7 @@
<button on:click={save} class:saved> <button on:click={save} class:saved>
{#if saved} {#if saved}
<div in:fade> <div in:fade>
<span class:saved style="margin-right: 5px">🎉</span> <span class:saved>Success</span>
Success
<span class:saved style="margin-left: 5px">🎉</span>
</div> </div>
{:else} {:else}
<div>{buttonText || 'Submit Form'}</div> <div>{buttonText || 'Submit Form'}</div>
@ -235,7 +233,8 @@
} }
button.saved { button.saved {
background-color: green; background-color: #84c991;
border: none;
} }
button:hover { button:hover {

6
packages/standard-components/src/Heading.svelte
View File

@ -8,7 +8,11 @@
let containerElement let containerElement
$: containerElement && !text && _bb.props.children && _bb.props.children.length && _bb.attachChildren(containerElement) $: containerElement &&
!text &&
_bb.props.children &&
_bb.props.children.length &&
_bb.attachChildren(containerElement)
</script> </script>
{#if type === 'h1'} {#if type === 'h1'}

7
packages/standard-components/src/Navigation.svelte
View File

@ -37,7 +37,7 @@
<nav use:cssVars={cssVariables}> <nav use:cssVars={cssVariables}>
<a href="/"> <a href="/">
<img class="logo" alt="logo" src={logoUrl} height="30" /> <img class="logo" alt="logo" src={logoUrl} height="48" />
<span>{title}</span> <span>{title}</span>
</a> </a>
<div class="menu-items" bind:this={itemContainer} /> <div class="menu-items" bind:this={itemContainer} />
@ -51,7 +51,7 @@
display: flex; display: flex;
font-weight: bold; font-weight: bold;
justify-content: space-between; justify-content: space-between;
padding: 20px 0 20px 40px; padding: 20px 0px;
} }
nav > a { nav > a {
@ -63,8 +63,7 @@
} }
nav a img { nav a img {
border-radius: 15px; margin-right: 16px;
margin-right: 15px;
} }
.menu-items { .menu-items {
display: flex; display: flex;

Write Preview
Loading…
Cancel
Save