Skip to content

Commit

Permalink
Improve button margin on setup screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@aschempp
aschempp committed Oct 18, 2023
1 parent 28757ab commit bd9231b
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 31 deletions.
8 changes: 4 additions & 4 deletions src/components/setup/BackendUser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<p class="setup__description">{{ $t('ui.setup.backend-user.description') }}</p>
</header>

<main class="setup__form setup__form--center" v-if="hasUser === null">
<main class="setup__form" v-if="hasUser === null">
<div class="setup__fields">
<p class="setup__warning">{{ $t('ui.setup.backend-user.error') }}</p>
<console
Expand All @@ -24,11 +24,11 @@
<transition name="animate-flip" type="transition" mode="out-in" v-else>

<main class="setup__form setup__form--center" v-if="hasUser" v-bind:key="'confirmation'">
<div class="setup__fields setup__fields--center">
<div class="setup__fields">
<svg class="setup__check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z" /></svg>
<p class="setup__fielddesc">{{ $t('ui.setup.backend-user.success') }}</p>
</div>
<div class="setup__fields setup__fields--center">
<div class="setup__actions setup__actions--center">
<button type="button" class="widget-button widget-button--inline widget-button--primary" @click="$emit('continue')">{{ $t('ui.setup.continue') }}</button>
</div>
</main>
Expand Down Expand Up @@ -60,7 +60,7 @@
v-model="password"
/>
</div>
<div class="setup__fields">
<div class="setup__actions setup__actions--center">
<loading-button submit color="primary" :loading="processing" :disabled="!valid">{{ $t('ui.setup.backend-user.create') }}</loading-button>
</div>
</form>
Expand Down
10 changes: 5 additions & 5 deletions src/components/setup/CreateProject.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@

</header>

<main class="setup__form setup__form--center">
<main class="setup__form">

<div class="setup__fields" v-if="theme.files">
<h2 class="setup__fieldtitle">{{ $t('ui.setup.create-project.themeTitle') }}</h2>
Expand Down Expand Up @@ -81,7 +81,7 @@
<p class="setup__fielddesc setup__fielddesc--warning">{{ $t('ui.setup.create-project.themeWarning') }}</p>
</div>

<div class="setup__fields">
<div class="setup__actions">
<loading-button color="primary" icon="run" :loading="processing" @click="installTheme">{{ $t('ui.setup.create-project.install') }}</loading-button>
<button class="widget-button" @click="cancelTheme" :disabled="processing">{{ $t('ui.setup.create-project.cancel') }}</button>
</div>
Expand Down Expand Up @@ -120,14 +120,14 @@
</i18n>
</header>

<main class="setup__form setup__form--center" v-if="!!contaoVersion">
<main class="setup__form" v-if="!!contaoVersion">
<div class="setup__fields setup__fields--center">
<svg class="setup__check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z"/>
</svg>
<p class="setup__fielddesc">{{ $t('ui.setup.create-project.installed', { version: contaoVersion }) }}</p>
</div>
<div class="setup__fields setup__fields--center">
<div class="setup__actions setup__actions--center">
<button class="widget-button widget-button--inline" @click="launch">{{ $t('ui.setup.manager') }}</button>
<button class="widget-button widget-button--inline widget-button--primary" @click="$emit('continue')">{{ $t('ui.setup.continue') }}</button>
</div>
Expand Down Expand Up @@ -164,7 +164,7 @@
</template>
</div>

<div class="setup__fields setup__fields--center">
<div class="setup__fields">
<template v-if="version === 'theme'">
<loading-button color="primary" icon="upload" :loading="processing" @click="openFileSelector">{{ $t('ui.setup.create-project.themeUpload') }}</loading-button>
<div class="setup__or"><span>{{ $t('ui.setup.create-project.theme.or') }}</span></div>
Expand Down
10 changes: 5 additions & 5 deletions src/components/setup/DatabaseConnection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@
<text-field name="server" :label="$t('ui.setup.database-connection.server')" :disabled="processing" required v-model="server"/>
<text-field name="database" :label="$t('ui.setup.database-connection.database')" :disabled="processing" required v-model="database"/>
</div>
<div class="setup__fields">
<div class="setup__actions">
<loading-button submit color="primary" icon="save" :loading="processing" :disabled="!valid">{{ $t('ui.setup.database-connection.save') }}</loading-button>
<button type="button" class="widget-button" :disabled="processing" @click="load" v-if="currentState === 'edit'">{{ $t('ui.setup.cancel') }}</button>
</div>
</form>
</main>

<main class="setup__form setup__form--center" v-else v-bind:key="'confirmation'">
<main class="setup__form" v-else v-bind:key="'confirmation'">
<div class="setup__fields">
<h2 class="setup__fieldtitle">{{ $t('ui.setup.database-connection.formTitle') }}</h2>
<i18n tag="p" path="ui.setup.database-connection.connected" class="setup__fielddesc" v-if="url">
Expand All @@ -59,7 +59,7 @@
<p class="setup__fielddesc setup__warning" v-if="status && status.total > 0">{{ $tc(`ui.setup.database-connection.${currentState}`, status.total) }}</p>
<p class="setup__fielddesc" v-else>{{ $t('ui.setup.database-connection.noChanges') }}</p>
</div>
<div class="setup__fields">
<div class="setup__actions setup__actions--center">
<template v-if="status && status.total > 0">
<button type="button" class="widget-button widget-button--inline" @click="$emit('continue')" v-if="!hasDatabaseError">{{ $t('ui.setup.database-connection.skip') }}</button>
<button type="button" class="widget-button widget-button--inline widget-button--primary" @click="checkMigrations">{{ $t('ui.setup.database-connection.check') }}</button>
Expand All @@ -74,7 +74,7 @@
<svg class="setup__check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z" /></svg>
<p class="setup__fielddesc">{{ $t('ui.setup.database-connection.restored') }}</p>
</div>
<div class="setup__fields">
<div class="setup__actions setup__actions--center">
<button type="button" class="widget-button widget-button--primary" @click="$store.commit('contao/backup/setRestore', false)">{{ $t('ui.setup.continue') }}</button>
</div>
</div>
Expand All @@ -92,7 +92,7 @@
-->
</div>

<div class="setup__fields">
<div class="setup__actions">
<button type="button" class="widget-button widget-button--inline" @click="$store.commit('contao/backup/setRestore', false)">{{ $t('ui.setup.database-connection.skip') }}</button>
<button type="button" class="widget-button widget-button--inline widget-button--primary" :disabled="files.length > 1 && !selection" @click="restore">{{ $t('ui.setup.database-connection.restore') }}</button>
</div>
Expand Down
16 changes: 8 additions & 8 deletions src/components/setup/DocumentRoot.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@
<dd v-else>{{ projectDir }}<span>/{{ directory }}/web</span></dd>
</dl>
</div>
<div class="setup__fields setup__fields--center">
<div class="setup__actions setup__actions--center">
<loading-button inline :loading="processing" color="primary" icon="update" @click="reload">{{ $t('ui.setup.document-root.reload') }}</loading-button>
</div>
</main>

<main class="setup__form setup__form--center" v-else-if="conflicts.length" v-bind:key="'conflicts'">
<main class="setup__form" v-else-if="conflicts.length" v-bind:key="'conflicts'">
<div class="setup__fields">
<h2 class="setup__fieldtitle">{{ $t('ui.setup.document-root.conflictsTitle') }}</h2>
<p class="setup__fielddesc">{{ $t('ui.setup.document-root.conflictsDirectory', { count: conflicts.length }) }}</p>
Expand All @@ -45,7 +45,7 @@
</ul>
<checkbox name="ignoreConflicts" :label="$t('ui.setup.document-root.ignoreConflicts')" :disabled="processing" v-if="isPublic || isWeb" v-model="forceInstall"/>
</div>
<div class="setup__fields setup__fields--center">
<div class="setup__actions setup__actions--center">
<button class="widget-button widget-button--alert widget-button--run" v-if="forceInstall" @click="$emit('continue')">{{ $t('ui.server.contao.setup') }}</button>
<template v-else>
<loading-button inline icon="update" :loading="processing" @click="init(false)">{{ $t('ui.setup.document-root.check') }}</loading-button>
Expand All @@ -54,7 +54,7 @@
</div>
</main>

<main class="setup__form setup__form--center" v-else v-bind:key="'setup'">
<main class="setup__form" v-else v-bind:key="'setup'">
<img src="../../assets/images/button-update.svg" class="invisible" alt=""> <!-- prefetch the update icon for the confirmation page -->
<div class="setup__fields">
<h2 class="setup__fieldtitle">{{ $t('ui.setup.document-root.formTitle') }}</h2>
Expand All @@ -81,14 +81,15 @@
</dl>
<checkbox name="autoconfig" :label="$t('ui.setup.document-root.autoconfig')" :disabled="processing" v-model="autoconfig"/>
</div>
<div class="setup__fields setup__fields--center">
<div class="setup__actions setup__actions--center">
<loading-button color="primary" icon="run" :loading="processing" :disabled="!autoconfig || !!directoryError || (wantsFix && !directory && ((isPublic && usePublicDir) || (isWeb && !usePublicDir)))" @click="setupDocroot">{{ $t('ui.setup.document-root.finish') }}</loading-button>
<button type="button" class="widget-button" :disabled="processing" @click="init" v-if="wantsFix">{{ $t('ui.setup.cancel') }}</button>
</div>
</main>
</template>

<template v-else>
<main class="setup__form setup__form--center" v-bind:key="'confirmation'">
<main class="setup__form" v-bind:key="'confirmation'">
<div class="setup__fields setup__fields--center">
<svg class="setup__check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z" /></svg>
<p class="setup__fielddesc">{{ $t('ui.setup.document-root.success') }}</p>
Expand All @@ -99,12 +100,11 @@
<template #dir><code>{{ publicDir }}</code></template>
</i18n>
</div>
<div class="setup__fields setup__fields--center">
<div class="setup__actions setup__actions--center">
<button class="widget-button widget-button--inline widget-button--gear" @click="wantsFix = true" v-if="!contaoVersion">{{ $t('ui.setup.document-root.change') }}</button>
<button class="widget-button widget-button--inline widget-button--primary" @click="$emit('continue')">{{ $t('ui.setup.continue') }}</button>
</div>
</main>

</template>
</transition>

Expand Down
28 changes: 19 additions & 9 deletions src/components/views/Setup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,10 +396,6 @@ export default {
text-align: center;
}
.widget-button {
margin-bottom: 10px;
}
.button-group .widget-button {
margin-bottom: 1px;
}
Expand All @@ -421,6 +417,25 @@ export default {
}
}
&__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
&--center {
justify-content: center;
}
.widget-button,
.button-group {
flex-grow: 1;
&--inline {
flex-grow: 0;
}
}
}
@include screen(960) {
padding-top: 100px;
Expand Down Expand Up @@ -452,11 +467,6 @@ export default {
width: 250px !important;
}
}
.widget-button--inline {
margin-left: 5px;
margin-right: 5px;
}
}
}
}
Expand Down

0 comments on commit bd9231b

Please sign in to comment.