mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(editor): Tune credential template layout (no-changelog) (#7903)

Browse Source 
Add max width to the content and scale it based on that
This commit is contained in:
Tomi Turtiainen
2023-12-04 15:27:38 +02:00
committed by GitHub
parent 29e7a98f3e
commit 6448d4c8a5
1 changed files with 38 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
View File

@@ -101,44 +101,42 @@ onMounted(async () => {
<template #content> <template #content>
<div :class="$style.grid"> <div :class="$style.grid">
<div :class="$style.gridContent"> <div :class="$style.notice" data-test-id="info-callout">
<div :class="$style.notice" data-test-id="info-callout"> <AppsRequiringCredsNotice v-if="isReady" />
<AppsRequiringCredsNotice v-if="isReady" /> <n8n-loading v-else variant="p" />
<n8n-loading v-else variant="p" /> </div>
</div>
<div> <div>
<ol v-if="isReady" :class="$style.appCredentialsContainer"> <ol v-if="isReady" :class="$style.appCredentialsContainer">
<SetupTemplateFormStep <SetupTemplateFormStep
:class="$style.appCredential" :class="$style.appCredential"
:key="credentials.key" :key="credentials.key"
v-for="(credentials, index) in setupTemplateStore.credentialUsages" v-for="(credentials, index) in setupTemplateStore.credentialUsages"
:order="index + 1" :order="index + 1"
:credentials="credentials" :credentials="credentials"
/>
</ol>
<div v-else :class="$style.appCredentialsContainer">
<n8n-loading :class="$style.appCredential" variant="p" :rows="3" />
<n8n-loading :class="$style.appCredential" variant="p" :rows="3" />
</div>
</div>
<div :class="$style.actions">
<n8n-link :href="skipSetupUrl" :newWindow="false" @click="onSkipSetup($event)">{{
$locale.baseText('templateSetup.skip')
}}</n8n-link>
<n8n-button
v-if="isReady"
size="large"
:label="$locale.baseText('templateSetup.continue.button')"
:disabled="setupTemplateStore.isSaving"
@click="setupTemplateStore.createWorkflow($router)"
data-test-id="continue-button"
/> />
<div v-else> </ol>
<n8n-loading variant="button" /> <div v-else :class="$style.appCredentialsContainer">
</div> <n8n-loading :class="$style.appCredential" variant="p" :rows="3" />
<n8n-loading :class="$style.appCredential" variant="p" :rows="3" />
</div>
</div>
<div :class="$style.actions">
<n8n-link :href="skipSetupUrl" :newWindow="false" @click="onSkipSetup($event)">{{
$locale.baseText('templateSetup.skip')
}}</n8n-link>
<n8n-button
v-if="isReady"
size="large"
:label="$locale.baseText('templateSetup.continue.button')"
:disabled="setupTemplateStore.isSaving"
@click="setupTemplateStore.createWorkflow($router)"
data-test-id="continue-button"
/>
<div v-else>
<n8n-loading variant="button" />
</div> </div>
</div> </div>
</div> </div>
@@ -148,22 +146,11 @@ onMounted(async () => {
<style lang="scss" module> <style lang="scss" module>
.grid { .grid {
display: grid; margin: 0 auto;
grid-template-columns: repeat(12, 1fr); display: flex;
padding: 0 var(--spacing-l); flex-direction: column;
justify-content: center; justify-content: center;
} max-width: 768px;
.gridContent {
grid-column: 3 / span 8;
@media (max-width: 800px) {
grid-column: 3 / span 8;
}
@media (max-width: 640px) {
grid-column: 2 / span 10;
}
} }
.notice { .notice {