Complete new Edit/delete UI change

This commit is contained in:
Bubka 2020-02-02 22:57:43 +01:00
parent 92d8c36a6d
commit d0d87961e1
4 changed files with 13 additions and 7 deletions

View File

@ -33,7 +33,9 @@ export default {
"cancel": "Cancel", "cancel": "Cancel",
"update": "Update", "update": "Update",
"copy_to_clipboard": "Copy to clipboard", "copy_to_clipboard": "Copy to clipboard",
"profile": "Profile" "profile": "Profile",
"edit": "Edit",
"delete": "Delete"
}, },
"errors": { "errors": {
"resource_not_found": "Resource not found", "resource_not_found": "Resource not found",

View File

@ -10,7 +10,7 @@
<span class="icon is-small"> <span class="icon is-small">
<font-awesome-icon :icon="['fas', 'trash']" /> <font-awesome-icon :icon="['fas', 'trash']" />
</span> </span>
<span>delete</span> <span>{{ $t('commons.delete') }}</span>
</a> </a>
</div> </div>
<!-- search --> <!-- search -->
@ -42,8 +42,10 @@
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span> <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
</div> </div>
</div> </div>
<div class="tfa-dots has-text-grey" v-if="!editMode"> <div class="tfa-dots has-text-grey" v-if="editMode">
<font-awesome-icon :icon="['fas', 'ellipsis-h']" /> <router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark is-rounded">
{{ $t('commons.edit') }}
</router-link>
</div> </div>
</div> </div>
</div> </div>

View File

@ -17,5 +17,7 @@ return [
'update' => 'Update', 'update' => 'Update',
'copy_to_clipboard' => 'Copy to clipboard', 'copy_to_clipboard' => 'Copy to clipboard',
'profile' => 'Profile', 'profile' => 'Profile',
'edit' => 'Edit',
'delete' => 'Delete',
]; ];

View File

@ -106,16 +106,16 @@
.tfa-content { .tfa-content {
flex-grow: 1; flex-grow: 1;
order: 1; // order: 1;
overflow: hidden; overflow: hidden;
} }
.tfa-checkbox { .tfa-checkbox {
order: 2; // order: 2;
} }
.tfa-dots { .tfa-dots {
order: 3; // order: 3;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {