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 -->
<div class="container has-text-centered" v-show="showQuickForm">
<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.add_first_account') }}
</div>
@ -72,7 +72,7 @@
</form>
</div>
<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>
</div>
</div>

View File

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

View File

@ -162,32 +162,7 @@
}
.no-icon {
border: 1px solid 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;
border: 1px dashed hsl(0, 0%, 7%);
}
.dots {
@ -307,12 +282,17 @@ footer .field.is-grouped {
margin-bottom: 0.5rem;
}
.catchphrase {
padding: 3rem 0.75rem;
.quickform-header {
height: 20vh;
padding-top: 2rem;
}
.fullform-link {
padding: 2rem 0.75rem;
.quickform-footer {
padding-top: 3rem;
}
.preview {
margin-top: 20vh;
}
.no-account {