Quick form adjustment

This commit is contained in:
Bubka 2020-02-04 22:42:18 +01:00
parent d097810508
commit 521649828a
3 changed files with 32 additions and 47 deletions

View File

@ -54,7 +54,7 @@
<!-- No account --> <!-- No account -->
<div class="container has-text-centered" v-show="showQuickForm"> <div class="container has-text-centered" v-show="showQuickForm">
<div class="columns is-mobile" :class="{ 'is-invisible' : this.accounts.length > 0}"> <div class="columns is-mobile" :class="{ 'is-invisible' : this.accounts.length > 0}">
<div class="column catchphrase"> <div class="column quickform-header">
{{ $t('twofaccounts.no_account_here') }}<br> {{ $t('twofaccounts.no_account_here') }}<br>
{{ $t('twofaccounts.add_first_account') }} {{ $t('twofaccounts.add_first_account') }}
</div> </div>
@ -72,7 +72,7 @@
</form> </form>
</div> </div>
<div class="columns is-mobile"> <div class="columns is-mobile">
<div class="column fullform-link"> <div class="column quickform-footer">
<router-link :to="{ name: 'create' }" class="is-link">{{ $t('twofaccounts.use_full_form') }}</router-link> <router-link :to="{ name: 'create' }" class="is-link">{{ $t('twofaccounts.use_full_form') }}</router-link>
</div> </div>
</div> </div>

View File

@ -1,14 +1,18 @@
<template> <template>
<form @submit.prevent="createAccount" @keydown="form.onKeydown($event)" v-if="isQuickForm"> <form @submit.prevent="createAccount" @keydown="form.onKeydown($event)" v-if="isQuickForm">
<div class="modal modal-otp is-active"> <div class="container preview has-text-centered">
<div class="modal-background"></div> <div class="columns is-mobile">
<div class="modal-content has-text-centered"> <div class="column">
<twofaccount-show <twofaccount-show
:service="form.service" :service="form.service"
:account="form.account" :account="form.account"
:uri="form.uri" :uri="form.uri"
:type="form.type"> :type="form.type">
</twofaccount-show> </twofaccount-show>
</div>
</div>
<div class="columns is-mobile">
<div class="column quickform-footer">
<div class="field is-grouped is-grouped-centered"> <div class="field is-grouped is-grouped-centered">
<div class="control"> <div class="control">
<v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.save') }}</v-button> <v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.save') }}</v-button>
@ -19,6 +23,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</form> </form>
<form-wrapper :title="$t('twofaccounts.forms.new_account')" v-else> <form-wrapper :title="$t('twofaccounts.forms.new_account')" v-else>
<form @submit.prevent="createAccount" @keydown="form.onKeydown($event)"> <form @submit.prevent="createAccount" @keydown="form.onKeydown($event)">

View File

@ -162,32 +162,7 @@
} }
.no-icon { .no-icon {
border: 1px solid hsl(0, 0%, 7%); border: 1px dashed hsl(0, 0%, 7%);
overflow: hidden;
}
.no-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom: 1px solid hsl(0, 0%, 7%);
transform: skewY(-45deg);
transform-origin: left bottom;
}
.no-icon::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid hsl(0, 0%, 7%);
transform: skewY(45deg);
transform-origin: left top;
} }
.dots { .dots {
@ -307,12 +282,17 @@ footer .field.is-grouped {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.catchphrase { .quickform-header {
padding: 3rem 0.75rem; height: 20vh;
padding-top: 2rem;
} }
.fullform-link { .quickform-footer {
padding: 2rem 0.75rem; padding-top: 3rem;
}
.preview {
margin-top: 20vh;
} }
.no-account { .no-account {