extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-11-26 10:15:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix #13 : Long Service name push content out of viewport

Browse Source
This commit is contained in:
Bubka 2020-11-28 20:09:08 +01:00
parent 4307de3bea
commit 70478323d3
2 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
resources/js/views/Accounts.vue
View File

@ -69,14 +69,14 @@
<div :class="[$root.appSettings.displayMode === 'grid' ? 'tfa-grid' : 'tfa-list']" class="column is-narrow has-text-white" v-for="account in filteredAccounts" :key="account.id">
<div class="tfa-container">
<transition name="slideCheckbox">
<div class="tfa-checkbox" v-if="editMode">
<div class="tfa-cell tfa-checkbox" v-if="editMode">
<div class="field">
<input class="is-checkradio is-small is-white" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="selectedAccounts">
<label :for="'ckb_' + account.id"></label>
</div>
</div>
</transition>
<div class="tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)">
<div class="tfa-cell tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)">
<div class="tfa-text has-ellipsis">
<img :src="'/storage/icons/' + account.icon" v-if="account.icon && $root.appSettings.showAccountsIcons">
{{ account.service }}<font-awesome-icon class="has-text-danger is-size-5 ml-2" v-if="$root.appSettings.useEncryption && account.isConsistent === false" :icon="['fas', 'exclamation-circle']" />
@ -84,7 +84,7 @@
</div>
</div>
<transition name="fadeInOut">
<div class="tfa-edit has-text-grey" v-if="editMode">
<div class="tfa-cell tfa-edit has-text-grey" v-if="editMode">
<!-- <div class="tags has-addons"> -->
<router-link :to="{ name: 'editAccount', params: { twofaccountId: account.id }}" class="tag is-dark is-rounded mr-1">
{{ $t('commons.edit') }}
@ -96,7 +96,7 @@
</div>
</transition>
<transition name="fadeInOut">
<div class="tfa-dots has-text-grey" v-if="editMode">
<div class="tfa-cell tfa-dots has-text-grey" v-if="editMode">
<font-awesome-icon :icon="['fas', 'bars']" />
</div>
</transition>

24
resources/sass/app.scss vendored
View File

@ -115,7 +115,7 @@ a:hover {
border-radius: 6px;
text-align: center;
background-color: hsl(0, 0%, 10%); /*black-bis from Bulma*/
padding: 0.75rem 1.5rem;
padding: 0.75rem 3rem;
margin: 0.5rem;
}
@ -155,7 +155,7 @@ a:hover {
.tfa-grid .tfa-container {
flex-direction: column;
padding: 0 1.5rem;
// padding: 0 1.5rem;
}
.tfa-list .tfa-container {
@ -171,18 +171,24 @@ a:hover {
// padding: 0 1rem 0 0;
// }
.tfa-cell {
display: flex;
}
.tfa-grid .tfa-checkbox,
.tfa-grid .tfa-dots,
.tfa-grid .tfa-edit {
display: flex;
align-items: center;
padding: 0.5rem 0 0 0;
}
.tfa-grid .tfa-checkbox {
padding: 0;
}
.tfa-list .tfa-checkbox,
.tfa-list .tfa-dots,
.tfa-list .tfa-edit {
display: flex;
align-items: center;
padding: 0
}
@ -191,12 +197,16 @@ a:hover {
margin-left: 1.5rem;
}
.tfa-grid .tfa-content {
.tfa-content {
flex-grow: 1;
overflow: hidden;
}
// .tfa-grid .tfa-content {
// }
.tfa-list .tfa-content {
width: 100%;
padding-right: 1rem;
}
.tfa-dots {
@ -211,7 +221,7 @@ a:hover {
.tfa-text {
display: block;
max-width: 300px;
// max-width: 300px;
cursor: pointer;
}