CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-02 21:10:43 +12:00
Code Issues Projects Releases Wiki Activity

initial spacing improvements and border adjustments

Browse source 
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 f05a581532
commit b6c6b52dac
5 changed files with 32 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/builder/src/components/integration/QueryViewer.svelte
View file

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

1
packages/builder/src/pages/[application]/automate/_layout.svelte
View file

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

1
packages/builder/src/pages/[application]/data/_layout.svelte
View file

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

2
packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
View file

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

21
packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
View file

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