Try a new 2FAccounts html template for the grid view

This commit is contained in:
Bubka 2020-01-29 14:54:39 +01:00
parent cfaffca536
commit 775d71395a
2 changed files with 25 additions and 18 deletions

View File

@ -1,6 +1,7 @@
<template>
<div>
<div class="container" v-if="this.showAccounts">
<!-- search -->
<div class="columns is-gapless is-mobile is-centered">
<div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<div class="field">
@ -14,13 +15,14 @@
</div>
</div>
</div>
<div class="buttons are-large is-centered">
<span v-for="account in filteredAccounts" class="button is-black has-background-black-bis twofaccount" >
<span @click.stop="showAccount(account.id)">
<!-- accounts -->
<div class="columns is-multiline is-centered is-gapless">
<div class="column is-narrow" v-for="account in filteredAccounts">
<div class="tfa has-background-black-bis has-text-white is-size-3" @click.stop="showAccount(account.id)">
<img :src="'storage/icons/' + account.icon" v-if="account.icon">
{{ account.service }}
<span class="is-family-primary is-size-7 has-text-grey">{{ account.account }}</span>
</span>
<span class="is-family-primary is-size-6 has-text-grey">{{ account.account }}</span>
</div>
<span v-if="editMode">
<router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark">
<font-awesome-icon :icon="['fas', 'edit']" />
@ -29,9 +31,11 @@
<font-awesome-icon :icon="['fas', 'trash']" />
</a>
</span>
</span>
</div>
</div>
</div>
<!-- No account -->
<div class="container has-text-centered" v-show="this.showNoAccount">
<p class="no-account"></p>
<p class="subtitle is-5 has-text-grey">

View File

@ -9,7 +9,7 @@
@import '~bulma/bulma';
.main-section {
padding: 1.5rem 1.5rem 8rem 1.5rem;
padding: 1.5rem 1rem 8rem 1rem;
}
.form-column {
@ -25,31 +25,34 @@
padding-top: 1.5rem !important;
}
nav.level {
padding: 0 20px;
/*postion: fixed;*/
}
#otp {
cursor: pointer;
}
.twofaccount {
font-size: 1.7rem !important;
width: 250px;
.tfa {
display: block;
height: auto;
border-radius: 6px;
text-align: center;
padding: 0.75rem 2.5rem;
margin: 0.5rem;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.twofaccount img {
.tfa img {
height: 0.75em;
width: 0.75em;
margin-right: .1em;
}
.twofaccount span {
.tfa span {
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.dots {
@ -135,7 +138,7 @@ nav.level {
}
footer {
padding: 10px 0;
padding: 10px 0 20px 0;
bottom: 0;
left: 0;
right: 0;