diff options
| -rw-r--r-- | css/contacts.scss | 4 | ||||
| -rw-r--r-- | src/views/Contacts.vue | 44 |
2 files changed, 44 insertions, 4 deletions
diff --git a/css/contacts.scss b/css/contacts.scss index 72ed427d..d71474a3 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -26,10 +26,6 @@ $grid-input-padding: 7px; $grid-input-margin: 3px; $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2; -#app-content-wrapper { - display: flex; -} - // components @import 'SettingsSection'; @import 'Settings/SettingsAddressbook'; diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue index 0023f192..a345f780 100644 --- a/src/views/Contacts.vue +++ b/src/views/Contacts.vue @@ -23,6 +23,12 @@ <template> <Content app-name="contacts"> + <!-- go back to list when in details mode --> + <a v-if="selectedContact && isMobile" + class="app-details-toggle icon-confirm" + href="#" + @click.stop.prevent="showList" /> + <!-- new-contact-button + navigation + settings --> <AppNavigation> <!-- new-contact-button --> @@ -689,6 +695,20 @@ export default { }, /** + * Show the list and deselect contact + */ + showList() { + // Reset the selected contact + this.$router.push({ + name: 'contact', + params: { + selectedGroup: this.selectedGroup, + selectedContact: undefined, + }, + }) + }, + + /** * Done importing, the user closed the import status screen */ closeImport() { @@ -834,4 +854,28 @@ export default { #app-content-wrapper { display: flex; } + +.app-details-toggle { + position: absolute; + width: 44px; + height: 44px; + padding: 14px; + cursor: pointer; + opacity: .6; + font-size: 16px; + line-height: 17px; + transform: rotate(180deg); + background-color: var(--color-main-background); + z-index: 2000; + &:active, + &:hover, + &:focus { + opacity: 1; + } + + // Hide app-navigation toggle if shown + &::v-deep + .app-navigation .app-navigation-toggle { + display: none; + } +} </style> |