Add ellipsis everywhere

This commit is contained in:
Bubka 2020-01-29 22:37:20 +01:00
parent eb28b59d76
commit 372239b673
3 changed files with 7 additions and 4 deletions

View File

@ -3,8 +3,8 @@
<figure class="image is-64x64" style="display: inline-block" v-if="icon"> <figure class="image is-64x64" style="display: inline-block" v-if="icon">
<img :src="'storage/icons/' + icon"> <img :src="'storage/icons/' + icon">
</figure> </figure>
<p class="is-size-4 has-text-grey-light">{{ service }}</p> <p class="is-size-4 has-text-grey-light has-ellipsis">{{ service }}</p>
<p class="is-size-6 has-text-grey">{{ account }}</p> <p class="is-size-6 has-text-grey has-ellipsis">{{ account }}</p>
<p id="otp" class="is-size-1 has-text-white" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => otp.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ otp }}</p> <p id="otp" class="is-size-1 has-text-white" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => otp.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ otp }}</p>
<ul class="dots" v-if="type === 'totp'"> <ul class="dots" v-if="type === 'totp'">
<li v-for="n in 30"></li> <li v-for="n in 30"></li>

View File

@ -18,10 +18,10 @@
<!-- accounts --> <!-- accounts -->
<div class="columns is-multiline is-centered is-gapless"> <div class="columns is-multiline is-centered is-gapless">
<div class="column is-narrow" v-for="account in filteredAccounts"> <div class="column is-narrow" v-for="account in filteredAccounts">
<div class="tfa has-text-white is-size-3" @click.stop="showAccount(account.id)"> <div class="tfa has-text-white is-size-3 has-ellipsis" @click.stop="showAccount(account.id)">
<img :src="'/storage/icons/' + account.icon" v-if="account.icon"> <img :src="'/storage/icons/' + account.icon" v-if="account.icon">
{{ account.service }} {{ account.service }}
<span class="is-family-primary is-size-6 has-text-grey">{{ account.account }}</span> <span class="is-family-primary is-size-6 has-text-grey ">{{ account.account }}</span>
</div> </div>
<span v-if="editMode"> <span v-if="editMode">
<router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark"> <router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark">

View File

@ -64,6 +64,9 @@
.tfa span { .tfa span {
display: block; display: block;
}
.has-ellipsis {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;