Browse Source

Adding a bit of padding to bottom of rest interface in case scrolling occurs.

master
mike12345567 5 years ago
parent
commit
4f3a116867
  1. 127
      packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte

127
packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte

@ -236,70 +236,72 @@
</Tabs> </Tabs>
</Layout> </Layout>
</div> </div>
<Layout paddingY="S" gap="S"> <div class="bottom">
<Divider size="S" /> <Layout paddingY="S" gap="S">
{#if !response} <Divider size="S" />
<Heading size="M">Response</Heading> {#if !response}
<div class="placeholder"> <Heading size="M">Response</Heading>
<div class="placeholder-internal"> <div class="placeholder">
<img alt="placeholder" src={Placeholder} /> <div class="placeholder-internal">
<Body size="XS" textAlign="center" <img alt="placeholder" src={Placeholder} />
>{"enter a url in the textbox above and click send to get a response".toUpperCase()}</Body <Body size="XS" textAlign="center"
> >{"enter a url in the textbox above and click send to get a response".toUpperCase()}</Body
</div> >
</div>
{:else}
<Tabs selected="JSON" quiet noPadding noHorizPadding>
<Tab title="JSON">
<div>
<JSONPreview height="300" data={response.rows[0]} />
</div> </div>
</Tab> </div>
<Tab title="Schema"> {:else}
<KeyValueBuilder <Tabs selected="JSON" quiet noPadding noHorizPadding>
bind:object={response.schema} <Tab title="JSON">
name="header" <div>
headings <JSONPreview height="300" data={response.rows[0]} />
options={SchemaTypeOptions} </div>
/> </Tab>
</Tab> <Tab title="Schema">
<Tab title="Raw"> <KeyValueBuilder
<TextArea disabled value={response.raw} height="300" /> bind:object={response.schema}
</Tab> name="header"
<Tab title="Preview"> headings
{#if response} options={SchemaTypeOptions}
<Table
schema={response?.schema}
data={response?.rows}
allowEditColumns={false}
allowEditRows={false}
allowSelectRows={false}
/> />
{/if} </Tab>
</Tab> <Tab title="Raw">
<div class="stats"> <TextArea disabled value={response.raw} height="300" />
<Label size="L"> </Tab>
Status: <span class={responseSuccess ? "green" : "red"} <Tab title="Preview">
>{response?.info.code}</span {#if response}
> <Table
</Label> schema={response?.schema}
<Label size="L"> data={response?.rows}
Time: <span class={responseSuccess ? "green" : "red"} allowEditColumns={false}
>{response?.info.time}</span allowEditRows={false}
> allowSelectRows={false}
</Label> />
<Label size="L"> {/if}
Size: <span class={responseSuccess ? "green" : "red"} </Tab>
>{response?.info.size}</span <div class="stats">
<Label size="L">
Status: <span class={responseSuccess ? "green" : "red"}
>{response?.info.code}</span
>
</Label>
<Label size="L">
Time: <span class={responseSuccess ? "green" : "red"}
>{response?.info.time}</span
>
</Label>
<Label size="L">
Size: <span class={responseSuccess ? "green" : "red"}
>{response?.info.size}</span
>
</Label>
<Button disabled={!responseSuccess} cta on:click={saveQuery}
>Save query</Button
> >
</Label> </div>
<Button disabled={!responseSuccess} cta on:click={saveQuery} </Tabs>
>Save query</Button {/if}
> </Layout>
</div> </div>
</Tabs>
{/if}
</Layout>
</div> </div>
{/if} {/if}
@ -322,6 +324,9 @@
.top { .top {
min-height: 50%; min-height: 50%;
} }
.bottom {
padding-bottom: 50px;
}
.stats { .stats {
display: flex; display: flex;
gap: var(--spacing-xl); gap: var(--spacing-xl);

Loading…
Cancel
Save