removes Spacer component and last few instances of use

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-28 15:54:35 +02:00
parent c0f19c0b93
commit 111eb47a9a
6 changed files with 9 additions and 108 deletions

View File

@ -1,49 +0,0 @@
<script>
export let extraSmall = false
export let small = false
export let medium = false
export let large = false
export let extraLarge = false
</script>
<spacer
class:extraSmall
class:small
class:medium
class:large
class:extraLarge />
<style>
spacer {
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.extraSmall {
height: var(--spacing-xs);
width: var(--spacing-xs);
}
.small {
height: var(--spacing-s);
width: var(--spacing-s);
}
.medium {
height: var(--spacing-m);
width: var(--spacing-m);
}
.large {
height: var(--spacing-l);
width: var(--spacing-l);
}
.extraLarge {
height: var(--spacing-xl);
width: var(--spacing-xl);
}
</style>

View File

@ -1,51 +0,0 @@
<script>
import { View } from "svench";
import Spacer from "./Spacer.svelte";
</script>
<style>
.block {
background: black;
height: 100px;
width: 100px;
border-radius: var(--border-radius-s);
}
.horizontal {
display: flex;
}
</style>
<View name="extraSmall">
<div class="block"></div>
<Spacer extraSmall />
<div class="block"></div>
</View>
<View name="Small">
<div class="block"></div>
<Spacer small />
<div class="block"></div>
</View>
<View name="Medium">
<div class="block"></div>
<Spacer medium />
<div class="block"></div>
</View>
<View name="Large">
<div class="horizontal">
<div class="block"></div>
<Spacer large />
<div class="block"></div>
</div>
</View>
<View name="extraLarge">
<div class="horizontal">
<div class="block"></div>
<Spacer extraLarge />
<div class="block"></div>
</div>
</View>

View File

@ -1,6 +1,6 @@
<script> <script>
import CodeMirror from "./codemirror" import CodeMirror from "./codemirror"
import { Label, Spacer } from "@budibase/bbui" import { Label } from "@budibase/bbui"
import { onMount, createEventDispatcher } from "svelte" import { onMount, createEventDispatcher } from "svelte"
import { themeStore } from "builderStore" import { themeStore } from "builderStore"
@ -166,7 +166,6 @@
{#if label} {#if label}
<Label small>{label}</Label> <Label small>{label}</Label>
<Spacer medium />
{/if} {/if}
<div style={`--code-mirror-height: ${editorHeight}px`}> <div style={`--code-mirror-height: ${editorHeight}px`}>
<textarea tabindex="0" bind:this={refs.editor} readonly {value} /> <textarea tabindex="0" bind:this={refs.editor} readonly {value} />
@ -177,6 +176,10 @@
visibility: hidden; visibility: hidden;
} }
div {
margin-top: var(--spacing-s);
}
div :global(.CodeMirror) { div :global(.CodeMirror) {
height: var(--code-mirror-height) !important; height: var(--code-mirror-height) !important;
border-radius: var(--border-radius-s); border-radius: var(--border-radius-s);

View File

@ -27,7 +27,6 @@
<div class="apps-card"> <div class="apps-card">
<Heading s>{name}</Heading> <Heading s>{name}</Heading>
<Spacer medium />
<div class="card-footer" data-cy={`app-${name}`}> <div class="card-footer" data-cy={`app-${name}`}>
<ActionButton on:click={() => $goto(`/builder/${_id}`)}> <ActionButton on:click={() => $goto(`/builder/${_id}`)}>
Open Open
@ -58,6 +57,7 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: var(--spacing-m);
} }
i { i {

View File

@ -25,7 +25,6 @@
{#each templates as template} {#each templates as template}
<div class="templates-card"> <div class="templates-card">
<Heading black small>{template.name}</Heading> <Heading black small>{template.name}</Heading>
<Spacer small />
<Body medium grey>{template.category}</Body> <Body medium grey>{template.category}</Body>
<Body lh small black>{template.description}</Body> <Body lh small black>{template.description}</Body>
<div><img src={template.image} width="100%" /></div> <div><img src={template.image} width="100%" /></div>

View File

@ -3,7 +3,7 @@
import AppList from "components/start/AppList.svelte" import AppList from "components/start/AppList.svelte"
import { get } from "builderStore/api" import { get } from "builderStore/api"
import CreateAppModal from "components/start/CreateAppModal.svelte" import CreateAppModal from "components/start/CreateAppModal.svelte"
import { Button, Heading, Modal, Spacer, ButtonGroup } from "@budibase/bbui" import { Button, Heading, Modal, ButtonGroup } from "@budibase/bbui"
import TemplateList from "components/start/TemplateList.svelte" import TemplateList from "components/start/TemplateList.svelte"
import analytics from "analytics" import analytics from "analytics"
import Banner from "/assets/orange-landscape.png" import Banner from "/assets/orange-landscape.png"
@ -58,11 +58,10 @@
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<Heading m h1>Welcome to the Budibase Beta</Heading> <Heading m h1>Welcome to the Budibase Beta</Heading>
<div class="button-group"> <ButtonGroup>
<Button secondary on:click={initiateAppImport}>Import Web App</Button> <Button secondary on:click={initiateAppImport}>Import Web App</Button>
<Spacer medium />
<Button cta on:click={modal.show}>Create New Web App</Button> <Button cta on:click={modal.show}>Create New Web App</Button>
</div> </ButtonGroup>
</div> </div>
<div class="banner"> <div class="banner">