IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed login positioning glitch on first page visit

Browse Source
This commit is contained in:
Grzegorz Leoniec 2018-12-18 11:51:14 +01:00
parent a9f9cb18f2
commit 1173a28af6
No known key found for this signature in database
GPG Key ID: 3AA43686D4EB1377
1 changed files with 89 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
pages/login.vue
View File

@ -1,84 +1,92 @@
<template> <template>
<ds-container width="small"> <transition
<ds-space margin="small"> name="fade"
<blockquote> appear
<p>{{ $t('quotes.african.quote') }}</p> >
<b>- {{ $t('quotes.african.author') }}</b> <ds-container
</blockquote> v-if="ready"
</ds-space> width="small"
<ds-card class="login-card"> >
<ds-flex gutter="small"> <ds-space margin="small">
<ds-flex-item <blockquote>
:width="{ base: '100%', sm: '50%' }" <p>{{ $t('quotes.african.quote') }}</p>
center <b>- {{ $t('quotes.african.author') }}</b>
> </blockquote>
<locale-switch class="login-locale-switch" /> </ds-space>
<ds-space <ds-card class="login-card">
margin-top="small" <ds-flex gutter="small">
margin-bottom="xxx-small" <ds-flex-item
:width="{ base: '100%', sm: '50%' }"
center center
> >
<img <locale-switch class="login-locale-switch" />
class="login-image" <ds-space
src="/img/sign-up/humanconnection.svg" margin-top="small"
alt="Human Connection" margin-bottom="xxx-small"
center
> >
</ds-space> <img
</ds-flex-item> class="login-image"
<ds-flex-item src="/img/sign-up/humanconnection.svg"
:width="{ base: '100%', sm: '50%' }" alt="Human Connection"
center
>
<ds-space margin="small">
<ds-text size="small">
{{ $t('login.copy') }}
</ds-text>
</ds-space>
<form
:disabled="pending"
@submit.prevent="onSubmit"
>
<ds-input
v-model="form.email"
:disabled="pending"
:placeholder="$t('login.email')"
type="email"
name="email"
icon="envelope"
/>
<ds-input
v-model="form.password"
:disabled="pending"
:placeholder="$t('login.password')"
icon="lock"
icon-right="question-circle"
name="password"
type="password"
/>
<ds-button
:loading="pending"
primary
full-width
name="submit"
type="submit"
icon-right="sign-in"
>
{{ $t('login.login') }}
</ds-button>
<ds-space margin="x-small">
<a
href="https://human-connection.org"
title="zur Präsentationsseite"
target="_blank"
> >
{{ $t('login.moreInfo') }}
</a>
</ds-space> </ds-space>
</form> </ds-flex-item>
</ds-flex-item> <ds-flex-item
</ds-flex> :width="{ base: '100%', sm: '50%' }"
</ds-card> center
</ds-container> >
<ds-space margin="small">
<ds-text size="small">
{{ $t('login.copy') }}
</ds-text>
</ds-space>
<form
:disabled="pending"
@submit.prevent="onSubmit"
>
<ds-input
v-model="form.email"
:disabled="pending"
:placeholder="$t('login.email')"
type="email"
name="email"
icon="envelope"
/>
<ds-input
v-model="form.password"
:disabled="pending"
:placeholder="$t('login.password')"
icon="lock"
icon-right="question-circle"
name="password"
type="password"
/>
<ds-button
:loading="pending"
primary
full-width
name="submit"
type="submit"
icon="sign-in"
>
{{ $t('login.login') }}
</ds-button>
<ds-space margin="x-small">
<a
href="https://human-connection.org"
title="zur Präsentationsseite"
target="_blank"
>
{{ $t('login.moreInfo') }}
</a>
</ds-space>
</form>
</ds-flex-item>
</ds-flex>
</ds-card>
</ds-container>
</transition>
</template> </template>
<script> <script>
@ -93,6 +101,7 @@ export default {
layout: 'blank', layout: 'blank',
data() { data() {
return { return {
ready: false,
form: { form: {
email: '', email: '',
password: '' password: ''
@ -109,6 +118,11 @@ export default {
return this.$store.getters['auth/pending'] return this.$store.getters['auth/pending']
} }
}, },
mounted() {
setTimeout(() => {
this.ready = true
}, 500)
},
methods: { methods: {
async onSubmit() { async onSubmit() {
try { try {