initial spacing improvements and border adjustments

additional spacing added
border added to main nav
font-size adjustments
This commit is contained in:
Joe 2021-02-21 12:04:36 +00:00
parent 4a37839151
commit a8e7741fb2
5 changed files with 32 additions and 19 deletions

View File

@ -133,14 +133,15 @@
<section class="config">
<Heading medium lh>Query {integrationInfo?.friendlyName}</Heading>
<hr />
<Spacer extraLarge />
<Heading small lh>Config</Heading>
<Body small grey>Provide a name for your query and select its function.</Body>
<Spacer medium />
<Spacer large />
<div class="config-field">
<Label small>Query Name</Label>
<Input thin outline bind:value={query.name} />
</div>
<Spacer medium />
<Spacer extraLarge />
{#if queryConfig}
<div class="config-field">
<Label small>Function</Label>
@ -152,7 +153,10 @@
{/each}
</Select>
</div>
<Spacer extraLarge />
<hr />
<Spacer extraLarge />
<Spacer small />
<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
<hr />
{/if}
@ -160,20 +164,22 @@
{#if shouldShowQueryConfig}
<section>
<Spacer extraLarge />
<Spacer small />
<div class="config">
<Heading small lh>Fields</Heading>
<Body small grey>Fill in the fields specific to this query.</Body>
<Spacer medium />
<Spacer extraLarge />
<IntegrationQueryEditor
{datasource}
{query}
schema={queryConfig[query.queryVerb]}
bind:parameters />
<hr />
<Spacer extraLarge />
<Spacer extraLarge />
<div class="viewer-controls">
<Heading small lh>Query Results</Heading>
<Heading extraSmall lh>Query Results</Heading>
<div class="button-container">
<Button
secondary
@ -191,7 +197,7 @@
schema.
</Body>
<Spacer large />
<Spacer extraLarge />
<section class="viewer">
{#if data}
@ -242,6 +248,8 @@
</div>
</section>
{/if}
<Spacer extraLarge />
<Spacer extraLarge />
<style>
.config-field {
@ -263,7 +271,7 @@
hr {
margin-top: var(--layout-m);
margin-bottom: var(--layout-m);
border: 1px solid var(--grey-2);
}
.config {
@ -276,7 +284,7 @@
}
.preview {
width: 800px;
width: 640px;
height: 100%;
overflow-y: auto;
overflow-wrap: break-word;

View File

@ -36,6 +36,7 @@
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-l);
border-right: 1px solid var(--grey-2);
}
.content {

View File

@ -80,6 +80,7 @@
align-items: stretch;
gap: var(--spacing-l);
position: relative;
border-right: 1px solid var(--grey-2);
}
i {

View File

@ -36,7 +36,7 @@
<style>
section {
overflow: scroll;
width: 800px;
width: 640px;
margin: 0 auto;
}
::-webkit-scrollbar {

View File

@ -50,15 +50,17 @@
<div class="datasource-icon">
<svelte:component
this={ICONS[datasource.source]}
height="30"
width="30" />
height="20"
width="20" />
</div>
<h3 class="section-title">{datasource.name}</h3>
</header>
<Body small grey lh>{integration.description}</Body>
<Spacer extraLarge />
<hr />
<Spacer large />
<Spacer extraLarge />
<div class="container">
<div class="config-header">
@ -70,14 +72,14 @@
Connect your database to Budibase using the config below.
</Body>
<Spacer medium />
<Spacer extraLarge />
<IntegrationConfigForm
integration={datasource.config}
on:change={setUnsaved} />
<Spacer medium />
<Spacer extraLarge />
<hr />
<Spacer large />
<Spacer extraLarge />
<div class="query-header">
<Heading small>Queries</Heading>
<Button secondary on:click={() => $goto('../new')}>Add Query</Button>
@ -99,15 +101,16 @@
<style>
h3 {
margin: 0;
font-size: 18px;
}
section {
margin: 0 auto;
width: 800px;
width: 640px;
}
hr {
margin-bottom: var(--layout-m);
border: 1px solid var(--grey-2);
}
header {