Improve responsiveness, handle scrolling and tidy up CSS in automations page
This commit is contained in:
Andrew Kingston
parent
1c2d90fe3d
commit
e3fdd1ee46
|
|
@ -61,7 +61,7 @@
|
|||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
bottom: var(--spacing-xl);
|
||||
right: 30px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
justify-content: center;
|
||||
}
|
||||
footer > button:first-child {
|
||||
margin-right: 20px;
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
|
||||
.play-button.highlighted {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@
|
|||
|
||||
<style>
|
||||
svg {
|
||||
margin: 8px 0;
|
||||
margin: var(--spacing-m) 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 290 B After Width: | Height: | Size: 303 B |
|
|
@ -37,7 +37,7 @@
|
|||
<style>
|
||||
section {
|
||||
position: absolute;
|
||||
padding: 20px 40px;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -46,22 +46,18 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #adaec4;
|
||||
}
|
||||
|
||||
i:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: var(--spacing-xl) 0 0 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.live {
|
||||
color: var(--primary);
|
||||
i {
|
||||
color: var(--grey-6);
|
||||
}
|
||||
i.live {
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -70,51 +66,23 @@
|
|||
|
||||
.automation-item {
|
||||
display: flex;
|
||||
border-radius: 5px;
|
||||
padding-left: 12px;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: var(--border-radius-m);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.automation-item i {
|
||||
font-size: 24px;
|
||||
margin-right: 10px;
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
|
||||
.automation-item:hover {
|
||||
cursor: pointer;
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.automation-item.selected {
|
||||
background: var(--grey-2);
|
||||
}
|
||||
|
||||
.new-automation-button {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--grey-4);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 2ms;
|
||||
}
|
||||
|
||||
.new-automation-button:hover {
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,67 +22,74 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<i class="ri-stackshare-line" />
|
||||
Create Automation
|
||||
</header>
|
||||
<div>
|
||||
<Input bind:value={name} label="Name" />
|
||||
<div class="container">
|
||||
<header>
|
||||
<i class="ri-stackshare-line" />
|
||||
Create Automation
|
||||
</header>
|
||||
<div class="content">
|
||||
<Input bind:value={name} label="Name" />
|
||||
</div>
|
||||
<footer>
|
||||
<a href="https://docs.budibase.com">
|
||||
<i class="ri-information-line" />
|
||||
<span>Learn about automations</span>
|
||||
</a>
|
||||
<ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
|
||||
<ActionButton disabled={!valid} on:click={createAutomation}>
|
||||
Save
|
||||
</ActionButton>
|
||||
</footer>
|
||||
</div>
|
||||
<footer>
|
||||
<a href="https://docs.budibase.com">
|
||||
<i class="ri-information-line" />
|
||||
Learn about automations
|
||||
</a>
|
||||
<ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
|
||||
<ActionButton disabled={!valid} on:click={createAutomation}>Save</ActionButton>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 24px;
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--ink);
|
||||
font-weight: bold;
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header i {
|
||||
margin-right: 10px;
|
||||
margin-right: var(--spacing-m);
|
||||
font-size: 20px;
|
||||
background: var(--blue-light);
|
||||
color: var(--grey-4);
|
||||
padding: 8px;
|
||||
background: var(--purple);
|
||||
color: var(--white);
|
||||
padding: var(--spacing-s);
|
||||
border-radius: var(--border-radius-m);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div {
|
||||
padding: 0 30px 30px 30px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
.content {
|
||||
padding: var(--spacing-xl) 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: 5px;
|
||||
grid-gap: var(--spacing-m);
|
||||
grid-auto-columns: 3fr 1fr 1fr;
|
||||
padding: 20px;
|
||||
background: var(--grey-1);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--primary);
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer a span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
footer i {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
margin-right: var(--spacing-m);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
class="hoverable"
|
||||
class:selected={selectedTab === 'ADD'}
|
||||
on:click={() => (selectedTab = 'ADD')}>
|
||||
Add step
|
||||
Steps
|
||||
</span>
|
||||
{/if}
|
||||
</header>
|
||||
|
|
@ -37,11 +37,11 @@
|
|||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.automation-header {
|
||||
margin-right: 20px;
|
||||
margin-right: var(--spacing-xl);
|
||||
}
|
||||
|
||||
span:not(.selected) {
|
||||
|
|
|
|||
|
|
@ -33,26 +33,15 @@
|
|||
display: grid;
|
||||
grid-template-columns: 20px auto;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
margin-top: var(--spacing-s);
|
||||
padding: var(--spacing-m);
|
||||
border-radius: var(--border-radius-m);
|
||||
}
|
||||
|
||||
.automation-block:hover {
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
|
||||
.automation-text {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: var(--blue-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.automation-block:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
@ -60,14 +49,16 @@
|
|||
font-size: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
.automation-text {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.automation-text h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
.automation-text p {
|
||||
font-size: 12px;
|
||||
color: var(--grey-7);
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,9 @@
|
|||
}
|
||||
|
||||
function deleteAutomationBlock() {
|
||||
automationStore.actions.deleteAutomationBlock($automationStore.selectedBlock)
|
||||
automationStore.actions.deleteAutomationBlock(
|
||||
$automationStore.selectedBlock
|
||||
)
|
||||
}
|
||||
|
||||
async function testAutomation() {
|
||||
|
|
@ -56,10 +58,24 @@
|
|||
Setup
|
||||
</span>
|
||||
</header>
|
||||
{#if $automationStore.selectedBlock}
|
||||
<AutomationBlockSetup bind:block={$automationStore.selectedBlock} />
|
||||
<div class="buttons">
|
||||
<Button green wide data-cy="save-automation-setup" on:click={saveAutomation}>
|
||||
<div class="content">
|
||||
{#if $automationStore.selectedBlock}
|
||||
<AutomationBlockSetup bind:block={$automationStore.selectedBlock} />
|
||||
{:else if $automationStore.selectedAutomation}
|
||||
<div class="block-label">
|
||||
Automation
|
||||
<b>{automation.name}</b>
|
||||
</div>
|
||||
<Button secondary wide on:click={testAutomation}>Test Automation</Button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="buttons">
|
||||
{#if $automationStore.selectedBlock}
|
||||
<Button
|
||||
green
|
||||
wide
|
||||
data-cy="save-automation-setup"
|
||||
on:click={saveAutomation}>
|
||||
Save Automation
|
||||
</Button>
|
||||
<Button
|
||||
|
|
@ -67,30 +83,20 @@
|
|||
red
|
||||
wide
|
||||
on:click={deleteAutomationBlock}>
|
||||
Delete Block
|
||||
Delete Step
|
||||
</Button>
|
||||
</div>
|
||||
{:else if $automationStore.selectedAutomation}
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<div class="block-label">
|
||||
Automation
|
||||
<b>{automation.name}</b>
|
||||
</div>
|
||||
</div>
|
||||
<Button secondary wide on:click={testAutomation}>Test Automation</Button>
|
||||
<div class="buttons">
|
||||
<Button
|
||||
green
|
||||
wide
|
||||
data-cy="save-automation-setup"
|
||||
on:click={saveAutomation}>
|
||||
Save Automation
|
||||
</Button>
|
||||
<Button red wide on:click={deleteAutomation}>Delete Automation</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else if $automationStore.selectedAutomation}
|
||||
<Button
|
||||
green
|
||||
wide
|
||||
data-cy="save-automation-setup"
|
||||
on:click={saveAutomation}>
|
||||
Save Automation
|
||||
</Button>
|
||||
<Button red wide on:click={deleteAutomation}>Delete Automation</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<style>
|
||||
|
|
@ -98,29 +104,24 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-family: inter;
|
||||
font-family: inter, sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
header > span {
|
||||
color: var(--grey-5);
|
||||
margin-right: var(--spacing-xl);
|
||||
cursor: pointer;
|
||||
}
|
||||
.selected {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
|
@ -129,31 +130,15 @@
|
|||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--grey-7);
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
header > span {
|
||||
color: var(--grey-5);
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--ink);
|
||||
.content {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
display: grid;
|
||||
width: 260px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.access-level label {
|
||||
font-weight: normal;
|
||||
color: var(--ink);
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,19 @@
|
|||
<!-- routify:options index=3 -->
|
||||
<script>
|
||||
import { automationStore } from "builderStore"
|
||||
import { AutomationPanel, SetupPanel } from "components/automation"
|
||||
</script>
|
||||
|
||||
<!-- routify:options index=3 -->
|
||||
<div class="root">
|
||||
<div class="nav">
|
||||
<div class="inner">
|
||||
<AutomationPanel />
|
||||
</div>
|
||||
<AutomationPanel />
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
{#if $automationStore.selectedAutomation}
|
||||
<div class="nav">
|
||||
<div class="inner">
|
||||
<SetupPanel />
|
||||
</div>
|
||||
<SetupPanel />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -25,28 +21,19 @@
|
|||
<style>
|
||||
.content {
|
||||
position: relative;
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
height: calc(100% - 60px);
|
||||
display: grid;
|
||||
grid-template-columns: 300px minmax(0, 1fr) 300px;
|
||||
grid-template-columns: 300px minmax(510px, 1fr) 300px;
|
||||
background: var(--grey-1);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.nav {
|
||||
overflow: auto;
|
||||
width: 300px;
|
||||
overflow-y: auto;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.inner {
|
||||
padding: 20px;
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue