local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: move forgot password link next to password label

Browse source 
In some languages, the texts on the "log in" and "register" buttons were so long they wrapped underneath each other. Moving the "forgot password" link next to the password label leaves these two buttons enough space to always stay next to each other.
This commit is contained in:
kolaente 2021-11-28 16:04:38 +01:00 committed by Dominik Pschenitschni
parent 063592ca3d
commit f7eb160509
No known key found for this signature in database
GPG key ID: B257AC0149F43A77
1 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/views/user/Login.vue
View file

@ -20,11 +20,21 @@
autocomplete="username" autocomplete="username"
v-focus v-focus
@keyup.enter="submit" @keyup.enter="submit"
tabindex="1"
/> />
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<div class="label-with-link">
<label class="label" for="password">{{ $t('user.auth.password') }}</label> <label class="label" for="password">{{ $t('user.auth.password') }}</label>
<router-link
:to="{ name: 'user.password-reset.request' }"
class="reset-password-link"
tabindex="6"
>
{{ $t('user.auth.forgotPassword') }}
</router-link>
</div>
<div class="control"> <div class="control">
<input <input
class="input" class="input"
@ -36,6 +46,7 @@
type="password" type="password"
autocomplete="current-password" autocomplete="current-password"
@keyup.enter="submit" @keyup.enter="submit"
tabindex="2"
/> />
</div> </div>
</div> </div>
@ -52,6 +63,7 @@
type="text" type="text"
v-focus v-focus
@keyup.enter="submit" @keyup.enter="submit"
tabindex="3"
/> />
</div> </div>
</div> </div>
@ -61,6 +73,7 @@
<x-button <x-button
@click="submit" @click="submit"
:loading="loading" :loading="loading"
tabindex="4"
> >
{{ $t('user.auth.login') }} {{ $t('user.auth.login') }}
</x-button> </x-button>
@ -68,15 +81,11 @@
:to="{ name: 'user.register' }" :to="{ name: 'user.register' }"
v-if="registrationEnabled" v-if="registrationEnabled"
type="secondary" type="secondary"
tabindex="5"
> >
{{ $t('user.auth.register') }} {{ $t('user.auth.register') }}
</x-button> </x-button>
</div> </div>
<div class="control">
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
{{ $t('user.auth.forgotPassword') }}
</router-link>
</div>
</div> </div>
</form> </form>
@ -227,6 +236,15 @@ export default {
.reset-password-link { .reset-password-link {
display: inline-block; display: inline-block;
padding-top: 5px; }
.label-with-link {
display: flex;
justify-content: space-between;
margin-bottom: .5rem;
.label {
margin-bottom: 0;
}
} }
</style> </style>