fix: add wrapper div for sizing
continuous-integration/drone/pr Build was killed Details

This commit is contained in:
kolaente 2021-10-25 21:57:49 +02:00
parent 7d0cab8fc9
commit 3f072663f0
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 74 additions and 68 deletions

View File

@ -1,20 +1,26 @@
.content h3 {
.icon,
.is-small {
font-size: 1rem;
}
.icon,
.is-small {
font-size: 1rem;
}
}
.table.has-actions {
border-top: 1px solid $grey-100;
border-radius: 4px;
overflow: hidden;
border-top: 1px solid $grey-100;
border-radius: 4px;
overflow: hidden;
td {
vertical-align: middle;
}
td {
vertical-align: middle;
}
td.actions {
text-align: right;
}
td.actions {
text-align: right;
}
}
.content-widescreen {
margin: 0 auto;
max-width: $widescreen;
}

View File

@ -1,57 +1,59 @@
<template>
<div class="user-settings">
<nav class="navigation">
<ul>
<li>
<router-link :to="{name: 'user.settings.general'}">
{{ $t('user.settings.general.title') }}
</router-link>
</li>
<li>
<router-link :to="{name: 'user.settings.password-update'}">
{{ $t('user.settings.newPasswordTitle') }}
</router-link>
</li>
<li>
<router-link :to="{name: 'user.settings.email-update'}">
{{ $t('user.settings.updateEmailTitle') }}
</router-link>
</li>
<li>
<router-link :to="{name: 'user.settings.avatar'}">
{{ $t('user.settings.avatar.title') }}
</router-link>
</li>
<li v-if="totpEnabled">
<router-link :to="{name: 'user.settings.totp'}">
{{ $t('user.settings.totp.title') }}
</router-link>
</li>
<li>
<router-link :to="{name: 'user.settings.data-export'}">
{{ $t('user.export.title') }}
</router-link>
</li>
<li v-if="migratorsEnabled">
<router-link :to="{name: 'migrate.start'}">
{{ $t('migrate.title') }}
</router-link>
</li>
<li v-if="caldavEnabled">
<router-link :to="{name: 'user.settings.caldav'}">
{{ $t('user.settings.caldav.title') }}
</router-link>
</li>
<li>
<router-link :to="{name: 'user.settings.deletion'}">
{{ $t('user.deletion.title') }}
</router-link>
</li>
</ul>
</nav>
<section class="view">
<router-view/>
</section>
<div class="content-widescreen">
<div class="user-settings">
<nav class="navigation">
<ul>
<li>
<router-link :to="{name: 'user.settings.general'}">
{{ $t('user.settings.general.title') }}
</router-link>
</li>
<li>
<router-link :to="{name: 'user.settings.password-update'}">
{{ $t('user.settings.newPasswordTitle') }}
</router-link>
</li>
<li>
<router-link :to="{name: 'user.settings.email-update'}">
{{ $t('user.settings.updateEmailTitle') }}
</router-link>
</li>
<li>
<router-link :to="{name: 'user.settings.avatar'}">
{{ $t('user.settings.avatar.title') }}
</router-link>
</li>
<li v-if="totpEnabled">
<router-link :to="{name: 'user.settings.totp'}">
{{ $t('user.settings.totp.title') }}
</router-link>
</li>
<li>
<router-link :to="{name: 'user.settings.data-export'}">
{{ $t('user.export.title') }}
</router-link>
</li>
<li v-if="migratorsEnabled">
<router-link :to="{name: 'migrate.start'}">
{{ $t('migrate.title') }}
</router-link>
</li>
<li v-if="caldavEnabled">
<router-link :to="{name: 'user.settings.caldav'}">
{{ $t('user.settings.caldav.title') }}
</router-link>
</li>
<li>
<router-link :to="{name: 'user.settings.deletion'}">
{{ $t('user.deletion.title') }}
</router-link>
</li>
</ul>
</nav>
<section class="view">
<router-view/>
</section>
</div>
</div>
</template>
@ -75,8 +77,6 @@ export default {
<style lang="scss" scoped>
.user-settings {
display: flex;
max-width: $widescreen;
margin: 0 auto;
.navigation {
width: 25%;