mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 51 deletions
Show stats 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>
<div :class="$style.grid">
<div :class="$style.gridContent">
<div :class="$style.notice" data-test-id="info-callout">
<AppsRequiringCredsNotice v-if="isReady" />
<n8n-loading v-else variant="p" />
</div>
<div :class="$style.notice" data-test-id="info-callout">
<AppsRequiringCredsNotice v-if="isReady" />
<n8n-loading v-else variant="p" />
</div>
<div>
<ol v-if="isReady" :class="$style.appCredentialsContainer">
<SetupTemplateFormStep
:class="$style.appCredential"
:key="credentials.key"
v-for="(credentials, index) in setupTemplateStore.credentialUsages"
:order="index + 1"
: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>
<ol v-if="isReady" :class="$style.appCredentialsContainer">
<SetupTemplateFormStep
:class="$style.appCredential"
:key="credentials.key"
v-for="(credentials, index) in setupTemplateStore.credentialUsages"
:order="index + 1"
:credentials="credentials"
/>
<div v-else>
<n8n-loading variant="button" />
</div>
</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>
<n8n-loading variant="button" />
</div>
</div>
</div>
@ -148,22 +146,11 @@ onMounted(async () => {
<style lang="scss" module>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
padding: 0 var(--spacing-l);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.gridContent {
grid-column: 3 / span 8;
@media (max-width: 800px) {
grid-column: 3 / span 8;
}
@media (max-width: 640px) {
grid-column: 2 / span 10;
}
max-width: 768px;
}
.notice {