diff options
| author | Jessica <jessica@Absolventas-MacBook-Pro.local> | 2018-09-26 17:08:26 +0200 |
|---|---|---|
| committer | Jessica <jessica@Absolventas-MacBook-Pro.local> | 2018-09-26 17:08:26 +0200 |
| commit | 101db489c68d73cc5ec053314b989ab65b57b19b (patch) | |
| tree | b319a55a97210962bb9f1b935c47fe4360fa5a72 | |
| parent | 2b480ded886ccf6dafb713d0dad1a32a5142cc26 (diff) | |
updated styling for preview screen, removed minimise screen icon
| -rw-r--r-- | css/contact-details-avatar.scss | 15 | ||||
| -rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 4 |
2 files changed, 9 insertions, 10 deletions
diff --git a/css/contact-details-avatar.scss b/css/contact-details-avatar.scss index 7b157187..1d010758 100644 --- a/css/contact-details-avatar.scss +++ b/css/contact-details-avatar.scss @@ -33,6 +33,9 @@ &__background { opacity: .2; z-index: 0; + left: 0; + top: 50px; + margin-left: 300px; } img { z-index: 10; @@ -56,11 +59,6 @@ width: 100%; height: 100%; } - &__background { - left: 0; - top: 50px; - margin-left: 300px; - } &__options { top: 0; background-color: rgba(0, 0, 0, 0.2); @@ -98,7 +96,6 @@ width: 25%; height: 40px; position: relative; - opacity: 1; } .contact-header-avatar__options { height: 40px; @@ -112,15 +109,17 @@ // 300px padding on left to compensate for app-navigation having 1000 z-index padding-left: 300px; flex-wrap: wrap; - justify-content: space-between; + justify-content: space-around; background-color: rgba(0, 0, 0, 0.2); } .contact-header-avatar__options > [class^='icon-'] { width: 25%; display: block; + cursor: pointer; + opacity: 0.5; } .contact-header-avatar__options > [class^='icon-']:hover { - opacity: 0.5; + opacity: 0.8; } } diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue index bf7e242a..6f36d0a6 100644 --- a/src/components/ContactDetails/ContactDetailsAvatar.vue +++ b/src/components/ContactDetails/ContactDetailsAvatar.vue @@ -23,7 +23,7 @@ import rfcProps from '../../models/rfcProps'; <template> <div :class="{'maximised':maximizeAvatar }" class="contact-header-avatar"> - <div class="contact-header-avatar__background" /> + <div class="contact-header-avatar__background" @click="toggleSize" /> <img v-if="contact.photo" :src="contact.photo" class="contact-header-avatar__picture" @click="toggleSize"> @@ -32,7 +32,7 @@ import rfcProps from '../../models/rfcProps'; accept="image/*" @change="processFile"> <label v-tooltip.auto="t('contacts', 'Upload a new picture')" for="contact-avatar-upload" class="icon-upload-white" /> <div v-if="maximizeAvatar" class="icon-delete-white" @click="removePhoto" /> - <div v-if="maximizeAvatar" class="icon-fullscreen-white" @click="toggleSize" /> + <!-- <div v-if="maximizeAvatar" class="icon-fullscreen-white" @click="toggleSize" /> --> <div v-if="maximizeAvatar" class="icon-download-white" @click="downloadPhoto" /> </div> </div> |