Merge pull request #5795 from Budibase/feature/automation-test-sidebar
Add automation test sidebar
This commit is contained in:
Peter Clement
GitHub
commit
32d0df129c
|
|
@ -105,9 +105,7 @@ const automationActions = store => ({
|
|||
},
|
||||
select: automation => {
|
||||
store.update(state => {
|
||||
let testResults = state.selectedAutomation?.testResults
|
||||
state.selectedAutomation = new Automation(cloneDeep(automation))
|
||||
state.selectedAutomation.testResults = testResults
|
||||
state.selectedBlock = null
|
||||
return state
|
||||
})
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
} from "@budibase/bbui"
|
||||
|
||||
export let automation
|
||||
|
||||
let testDataModal
|
||||
let blocks
|
||||
let confirmDeleteDialog
|
||||
|
|
@ -41,66 +40,70 @@
|
|||
</script>
|
||||
|
||||
<div class="canvas">
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<div class="subtitle">
|
||||
<Heading size="S">{automation.name}</Heading>
|
||||
<div style="display:flex; align-items: center;">
|
||||
<div class="iconPadding">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
on:click={confirmDeleteDialog.show}
|
||||
hoverable
|
||||
size="M"
|
||||
name="DeleteOutline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left; padding-left: var(--spacing-xl);">
|
||||
<Heading size="S">{automation.name}</Heading>
|
||||
</div>
|
||||
<div style="float: right; padding-right: var(--spacing-xl);" class="title">
|
||||
<div class="subtitle">
|
||||
<div style="display:flex; align-items: center;">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
on:click={confirmDeleteDialog.show}
|
||||
hoverable
|
||||
size="M"
|
||||
name="DeleteOutline"
|
||||
/>
|
||||
</div>
|
||||
<ActionButton
|
||||
on:click={() => {
|
||||
testDataModal.show()
|
||||
}}
|
||||
icon="MultipleCheck"
|
||||
size="M">Run test</ActionButton
|
||||
>
|
||||
<div style="padding-left: var(--spacing-m);">
|
||||
<ActionButton
|
||||
disabled={!$automationStore.selectedAutomation?.testResults}
|
||||
on:click={() => {
|
||||
testDataModal.show()
|
||||
$automationStore.selectedAutomation.automation.showTestPanel = true
|
||||
}}
|
||||
icon="MultipleCheck"
|
||||
size="M">Run test</ActionButton
|
||||
size="M">Test Details</ActionButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#each blocks as block, idx (block.id)}
|
||||
<div
|
||||
class="block"
|
||||
animate:flip={{ duration: 500 }}
|
||||
in:fly|local={{ x: 500, duration: 1500 }}
|
||||
>
|
||||
{#if block.stepId !== "LOOP"}
|
||||
<FlowItem {testDataModal} {block} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDeleteDialog}
|
||||
okText="Delete Automation"
|
||||
onOk={deleteAutomation}
|
||||
title="Confirm Deletion"
|
||||
>
|
||||
Are you sure you wish to delete the automation
|
||||
<i>{automation.name}?</i>
|
||||
This action cannot be undone.
|
||||
</ConfirmDialog>
|
||||
|
||||
<Modal bind:this={testDataModal} width="30%">
|
||||
<TestDataModal />
|
||||
</Modal>
|
||||
</div>
|
||||
<div class="content">
|
||||
{#each blocks as block, idx (block.id)}
|
||||
<div
|
||||
class="block"
|
||||
animate:flip={{ duration: 500 }}
|
||||
in:fly|local={{ x: 500, duration: 500 }}
|
||||
out:fly|local={{ x: 500, duration: 500 }}
|
||||
>
|
||||
{#if block.stepId !== "LOOP"}
|
||||
<FlowItem {testDataModal} {block} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDeleteDialog}
|
||||
okText="Delete Automation"
|
||||
onOk={deleteAutomation}
|
||||
title="Confirm Deletion"
|
||||
>
|
||||
Are you sure you wish to delete the automation
|
||||
<i>{automation.name}?</i>
|
||||
This action cannot be undone.
|
||||
</ConfirmDialog>
|
||||
|
||||
<Modal bind:this={testDataModal} width="30%">
|
||||
<TestDataModal />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.canvas {
|
||||
margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
|
||||
overflow-y: auto;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
/* Fix for firefox not respecting bottom padding in scrolling containers */
|
||||
.canvas > *:last-child {
|
||||
padding-bottom: 40px;
|
||||
|
|
@ -128,10 +131,6 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.iconPadding {
|
||||
padding-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
padding-right: var(--spacing-m);
|
||||
|
|
|
|||
|
|
@ -1,30 +1,27 @@
|
|||
<script>
|
||||
import FlowItemHeader from "./FlowItemHeader.svelte"
|
||||
|
||||
import { automationStore } from "builderStore"
|
||||
import {
|
||||
Icon,
|
||||
Divider,
|
||||
Layout,
|
||||
Body,
|
||||
Detail,
|
||||
Modal,
|
||||
Button,
|
||||
StatusLight,
|
||||
Select,
|
||||
ActionButton,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
|
||||
import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
|
||||
import ResultsModal from "./ResultsModal.svelte"
|
||||
import ActionModal from "./ActionModal.svelte"
|
||||
import { externalActions } from "./ExternalActions"
|
||||
|
||||
export let block
|
||||
export let testDataModal
|
||||
let selected
|
||||
let webhookModal
|
||||
let actionModal
|
||||
let resultsModal
|
||||
let blockComplete
|
||||
let showLooping = false
|
||||
|
||||
|
|
@ -32,9 +29,6 @@
|
|||
$: showBindingPicker =
|
||||
block.stepId === "CREATE_ROW" || block.stepId === "UPDATE_ROW"
|
||||
|
||||
$: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
|
||||
step => (block.id ? step.id === block.id : step.stepId === block.stepId)
|
||||
)
|
||||
$: isTrigger = block.type === "TRIGGER"
|
||||
|
||||
$: selected = $automationStore.selectedBlock?.id === block.id
|
||||
|
|
@ -182,63 +176,7 @@
|
|||
{/if}
|
||||
{/if}
|
||||
|
||||
<div class="blockSection">
|
||||
<div
|
||||
on:click={() => {
|
||||
blockComplete = !blockComplete
|
||||
}}
|
||||
class="splitHeader"
|
||||
>
|
||||
<div class="center-items">
|
||||
{#if externalActions[block.stepId]}
|
||||
<img
|
||||
alt={externalActions[block.stepId].name}
|
||||
width="28px"
|
||||
height="28px"
|
||||
src={externalActions[block.stepId].icon}
|
||||
/>
|
||||
{:else}
|
||||
<svg
|
||||
width="28px"
|
||||
height="28px"
|
||||
class="spectrum-Icon"
|
||||
style="color:grey;"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{block.icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
<div class="iconAlign">
|
||||
{#if isTrigger}
|
||||
<Body size="XS">When this happens:</Body>
|
||||
{:else}
|
||||
<Body size="XS">Do this:</Body>
|
||||
{/if}
|
||||
|
||||
<Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blockTitle">
|
||||
{#if testResult && testResult[0]}
|
||||
<div style="float: right;" on:click={() => resultsModal.show()}>
|
||||
<StatusLight
|
||||
positive={isTrigger || testResult[0].outputs?.success}
|
||||
negative={!testResult[0].outputs?.success}
|
||||
><Body size="XS">View response</Body></StatusLight
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
style="margin-left: 10px;"
|
||||
on:click={() => {
|
||||
onSelect(block)
|
||||
}}
|
||||
>
|
||||
<Icon name={blockComplete ? "ChevronDown" : "ChevronUp"} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FlowItemHeader bind:blockComplete {block} {testDataModal} />
|
||||
{#if !blockComplete}
|
||||
<Divider noMargin />
|
||||
<div class="blockSection">
|
||||
|
|
@ -283,10 +221,6 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<Modal bind:this={resultsModal} width="30%">
|
||||
<ResultsModal {isTrigger} {testResult} />
|
||||
</Modal>
|
||||
|
||||
<Modal bind:this={actionModal} width="30%">
|
||||
<ActionModal {blockIdx} bind:blockComplete />
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
<script>
|
||||
import { automationStore } from "builderStore"
|
||||
import { Icon, Body, Detail, StatusLight } from "@budibase/bbui"
|
||||
import { externalActions } from "./ExternalActions"
|
||||
|
||||
export let block
|
||||
export let blockComplete
|
||||
export let showTestStatus = false
|
||||
export let showParameters = {}
|
||||
|
||||
$: testResult =
|
||||
$automationStore.selectedAutomation?.testResults?.steps.filter(step =>
|
||||
block.id ? step.id === block.id : step.stepId === block.stepId
|
||||
)
|
||||
$: isTrigger = block.type === "TRIGGER"
|
||||
|
||||
async function onSelect(block) {
|
||||
await automationStore.update(state => {
|
||||
state.selectedBlock = block
|
||||
return state
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="blockSection">
|
||||
<div
|
||||
on:click={() => {
|
||||
blockComplete = !blockComplete
|
||||
showParameters[block.id] = blockComplete
|
||||
}}
|
||||
class="splitHeader"
|
||||
>
|
||||
<div class="center-items">
|
||||
{#if externalActions[block.stepId]}
|
||||
<img
|
||||
alt={externalActions[block.stepId].name}
|
||||
width="28px"
|
||||
height="28px"
|
||||
src={externalActions[block.stepId].icon}
|
||||
/>
|
||||
{:else}
|
||||
<svg
|
||||
width="28px"
|
||||
height="28px"
|
||||
class="spectrum-Icon"
|
||||
style="color:grey;"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{block.icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
<div class="iconAlign">
|
||||
{#if isTrigger}
|
||||
<Body size="XS">When this happens:</Body>
|
||||
{:else}
|
||||
<Body size="XS">Do this:</Body>
|
||||
{/if}
|
||||
|
||||
<Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blockTitle">
|
||||
{#if showTestStatus && testResult && testResult[0]}
|
||||
<div style="float: right;">
|
||||
<StatusLight
|
||||
positive={isTrigger || testResult[0].outputs?.success}
|
||||
negative={!testResult[0].outputs?.success}
|
||||
><Body size="XS"
|
||||
>{testResult[0].outputs?.success || isTrigger
|
||||
? "Success"
|
||||
: "Error"}</Body
|
||||
></StatusLight
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
style="margin-left: 10px; margin-bottom: var(--spacing-xs);"
|
||||
on:click={() => {
|
||||
onSelect(block)
|
||||
}}
|
||||
>
|
||||
<Icon name={blockComplete ? "ChevronUp" : "ChevronDown"} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.center-items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.splitHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.iconAlign {
|
||||
padding: 0 0 0 var(--spacing-m);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.blockSection {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.blockTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
<script>
|
||||
import { ModalContent, Icon, Detail, TextArea, Label } from "@budibase/bbui"
|
||||
|
||||
export let testResult
|
||||
export let isTrigger
|
||||
let inputToggled
|
||||
let outputToggled
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
showCloseIcon={false}
|
||||
showConfirmButton={false}
|
||||
cancelText="Close"
|
||||
>
|
||||
<div slot="header" class="result-modal-header">
|
||||
<span>Test Results</span>
|
||||
<div>
|
||||
{#if isTrigger || testResult[0].outputs.success}
|
||||
<div class="iconSuccess">
|
||||
<Icon size="S" name="CheckmarkCircle" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="iconFailure">
|
||||
<Icon size="S" name="CloseCircle" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
{#if testResult[0].outputs.iterations}
|
||||
<div style="display: flex;">
|
||||
<Icon name="Reuse" />
|
||||
<div style="margin-left: 10px;">
|
||||
<Label>
|
||||
This loop ran {testResult[0].outputs.iterations} times.</Label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</span>
|
||||
<div
|
||||
on:click={() => {
|
||||
inputToggled = !inputToggled
|
||||
}}
|
||||
class="toggle splitHeader"
|
||||
>
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span style="padding-left: var(--spacing-s);">
|
||||
<Detail size="S">Input</Detail>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{#if inputToggled}
|
||||
<Icon size="M" name="ChevronDown" />
|
||||
{:else}
|
||||
<Icon size="M" name="ChevronRight" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if inputToggled}
|
||||
<div class="text-area-container">
|
||||
<TextArea
|
||||
disabled
|
||||
value={JSON.stringify(testResult[0].inputs, null, 2)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
on:click={() => {
|
||||
outputToggled = !outputToggled
|
||||
}}
|
||||
class="toggle splitHeader"
|
||||
>
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span style="padding-left: var(--spacing-s);">
|
||||
<Detail size="S">Output</Detail>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{#if outputToggled}
|
||||
<Icon size="M" name="ChevronDown" />
|
||||
{:else}
|
||||
<Icon size="M" name="ChevronRight" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if outputToggled}
|
||||
<div class="text-area-container">
|
||||
<TextArea
|
||||
disabled
|
||||
value={JSON.stringify(testResult[0].outputs, null, 2)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
.result-modal-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.iconSuccess {
|
||||
color: var(--spectrum-global-color-green-600);
|
||||
}
|
||||
|
||||
.iconFailure {
|
||||
color: var(--spectrum-global-color-red-600);
|
||||
}
|
||||
|
||||
.splitHeader {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-area-container :global(textarea) {
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -51,6 +51,7 @@
|
|||
$automationStore.selectedAutomation?.automation,
|
||||
testData
|
||||
)
|
||||
$automationStore.selectedAutomation.automation.showTestPanel = true
|
||||
} catch (error) {
|
||||
notifications.error("Error testing notification")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,146 @@
|
|||
<script>
|
||||
import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
|
||||
import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
|
||||
import { automationStore } from "builderStore"
|
||||
|
||||
export let automation
|
||||
|
||||
let showParameters
|
||||
let blocks
|
||||
|
||||
$: {
|
||||
blocks = []
|
||||
if (automation) {
|
||||
if (automation.definition.trigger) {
|
||||
blocks.push(automation.definition.trigger)
|
||||
}
|
||||
blocks = blocks
|
||||
.concat(automation.definition.steps || [])
|
||||
.filter(x => x.stepId !== "LOOP")
|
||||
}
|
||||
}
|
||||
|
||||
$: testResults =
|
||||
$automationStore.selectedAutomation?.testResults?.steps.filter(
|
||||
x => x.stepId !== "LOOP" || []
|
||||
)
|
||||
</script>
|
||||
|
||||
<div class="title">
|
||||
<div class="title-text">
|
||||
<Icon name="MultipleCheck" />
|
||||
<div style="padding-left: var(--spacing-l)">Test Details</div>
|
||||
</div>
|
||||
<div style="padding-right: var(--spacing-xl)">
|
||||
<Icon
|
||||
on:click={async () => {
|
||||
$automationStore.selectedAutomation.automation.showTestPanel = false
|
||||
}}
|
||||
hoverable
|
||||
name="Close"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div class="container">
|
||||
{#each blocks as block, idx}
|
||||
<div class="block">
|
||||
{#if block.stepId !== "LOOP"}
|
||||
<FlowItemHeader showTestStatus={true} bind:showParameters {block} />
|
||||
{#if showParameters && showParameters[block.id]}
|
||||
<Divider noMargin />
|
||||
{#if testResults?.[idx]?.outputs.iterations}
|
||||
<div style="display: flex; padding: 10px 10px 0px 12px;">
|
||||
<Icon name="Reuse" />
|
||||
<div style="margin-left: 10px;">
|
||||
<Label>
|
||||
This loop ran {testResults?.[idx]?.outputs.iterations} times.</Label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="tabs">
|
||||
<Tabs quiet noPadding selected="Input">
|
||||
<Tab title="Input">
|
||||
<div style="padding: 10px 10px 10px 10px;">
|
||||
<TextArea
|
||||
minHeight="80px"
|
||||
disabled
|
||||
value={JSON.stringify(testResults?.[idx]?.inputs, null, 2)}
|
||||
/>
|
||||
</div></Tab
|
||||
>
|
||||
<Tab title="Output">
|
||||
<div style="padding: 10px 10px 10px 10px;">
|
||||
<TextArea
|
||||
minHeight="100px"
|
||||
disabled
|
||||
value={JSON.stringify(testResults?.[idx]?.outputs, null, 2)}
|
||||
/>
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{#if blocks.length - 1 !== idx}
|
||||
<div class="separator" />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 0px 30px 0px 30px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
padding-left: var(--spacing-xl);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title :global(h1) {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
font-size: 16px;
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
border-left: 1px dashed var(--grey-4);
|
||||
color: var(--grey-4);
|
||||
/* center horizontally */
|
||||
text-align: center;
|
||||
margin-left: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,12 @@
|
|||
import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
|
||||
import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
|
||||
import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
|
||||
$: automation = $automationStore.automations[0]
|
||||
import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
|
||||
|
||||
$: automation =
|
||||
$automationStore.selectedAutomation?.automation ||
|
||||
$automationStore.automations[0]
|
||||
|
||||
let modal
|
||||
let webhookModal
|
||||
</script>
|
||||
|
|
@ -39,6 +44,12 @@
|
|||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if automation?.showTestPanel}
|
||||
<div class="setup">
|
||||
<TestPanel {automation} />
|
||||
</div>
|
||||
{/if}
|
||||
<Modal bind:this={modal}>
|
||||
<CreateAutomationModal {webhookModal} />
|
||||
</Modal>
|
||||
|
|
@ -52,7 +63,9 @@
|
|||
flex: 1 1 auto;
|
||||
height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 260px minmax(510px, 1fr);
|
||||
grid-auto-flow: column dense;
|
||||
grid-template-columns: 260px minmax(510px, 1fr) fit-content(500px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
|
@ -64,17 +77,18 @@
|
|||
border-right: var(--border-light);
|
||||
background-color: var(--background);
|
||||
padding-bottom: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
padding: var(--spacing-l) 40px;
|
||||
padding-top: var(--spacing-l);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-l);
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
}
|
||||
.centered {
|
||||
top: 0;
|
||||
|
|
@ -92,4 +106,17 @@
|
|||
.main {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.setup {
|
||||
padding-top: var(--spectrum-global-dimension-size-200);
|
||||
border-left: var(--border-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-l);
|
||||
background-color: var(--background);
|
||||
grid-column: 3;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue