initial spacing improvements and border adjustments

additional spacing added border added to main nav font-size adjustments
6 years ago · a8e7741fb2
5 changed files with 32 additions and 19 deletions
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -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;
--- a/packages/builder/src/pages/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/_layout.svelte
@ -36,6 +36,7 @@
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--spacing-l);
+    border-right: 1px solid var(--grey-2);
  }

  .content {
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@ -80,6 +80,7 @@
    align-items: stretch;
    gap: var(--spacing-l);
    position: relative;
+    border-right: 1px solid var(--grey-2);
  }

  i {
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@ -36,7 +36,7 @@
 <style>
  section {
    overflow: scroll;
-    width: 800px;
+    width: 640px;
    margin: 0 auto;
  }
  ::-webkit-scrollbar {
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -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 {