fix spacing and layouts for small screens

This commit is contained in:
p0lycarpio
2023-09-04 11:20:48 +02:00
parent e538c5cbd8
commit e2665bcebf
13 changed files with 36 additions and 46 deletions

View File

@@ -43,9 +43,9 @@
</v-card>
</section>
<BaseCardSectionTitle class="mt-10" title="Active Tokens"> </BaseCardSectionTitle>
<section class="d-flex flex-column align-center justify-center">
<div v-for="(token, index) in $auth.user.tokens" :key="index" class="d-flex my-2">
<v-card outlined width="500px">
<section class="d-flex flex-column">
<div v-for="(token, index) in $auth.user.tokens" :key="index">
<v-card outlined class="mb-2">
<v-list-item>
<v-list-item-content>
<v-list-item-title>

View File

@@ -108,6 +108,7 @@
:label="$t('profile.show-advanced-description')"
@change="updateUser"
></v-checkbox>
<a class="mt-5 d-flex flex-column justify-center text-center" to="/group"> {{ $t('profile.looking-for-privacy-settings') }} </a>
<div class="d-flex flex-wrap justify-center mt-5">
<v-btn outlined class="rounded-xl my-1 mx-1" to="/user/profile" nuxt exact>
<v-icon left>
@@ -115,7 +116,6 @@
</v-icon>
{{ $t('profile.back-to-profile') }}
</v-btn>
<v-btn outlined class="rounded-xl my-1 mx-1" to="/group"> {{ $t('profile.looking-for-privacy-settings') }} </v-btn>
</div>
</section>
</v-container>

View File

@@ -1,15 +1,15 @@
<template>
<v-container v-if="user">
<section class="d-flex flex-column align-center">
<UserAvatar size="84" :user-id="$auth.user.id" />
<section class="d-flex flex-column align-center mt-4">
<UserAvatar size="96" :user-id="$auth.user.id" />
<h2 class="headline">{{ $t('profile.welcome-user', [user.fullName]) }}</h2>
<p class="subtitle-1 mb-0">
<p class="subtitle-1 mb-0 text-center">
{{ $t('profile.description') }}
<a href="https://hay-kot.github.io/mealie/" target="_blank"> {{ $t('general.learn-more') }} </a>
</p>
<v-card v-if="$auth.user.canInvite" flat color="background" width="100%" max-width="600px">
<v-card-actions class="d-flex justify-center">
<v-card-actions class="d-flex justify-center my-4">
<v-btn outlined rounded @click="getSignupLink()">
<v-icon left>
{{ $globals.icons.createAlt }}