diff options
author | Jessica <jessica@Absolventas-MacBook-Pro.local> | 2018-09-28 16:45:22 +0200 |
---|---|---|
committer | Jessica <jessica@Absolventas-MacBook-Pro.local> | 2018-09-28 16:45:22 +0200 |
commit | 5394404bc80e9216bc1013a8fb4bfb4a2498a5ac (patch) | |
tree | 59826107b65d9a28233aa848759244f21df309c0 | |
parent | 531773f7ea78fda29825415725db8fcd8f9f09ec (diff) |
removed padding and changed img to div
-rw-r--r-- | css/contact-details-avatar.scss | 15 | ||||
-rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 7 |
2 files changed, 8 insertions, 14 deletions
diff --git a/css/contact-details-avatar.scss b/css/contact-details-avatar.scss index 1d010758..fe4adfab 100644 --- a/css/contact-details-avatar.scss +++ b/css/contact-details-avatar.scss @@ -35,10 +35,10 @@ z-index: 0; left: 0; top: 50px; - margin-left: 300px; } - img { + &__photo { z-index: 10; + background-size: cover; } label.icon-upload-white { opacity: .5; @@ -49,11 +49,11 @@ opacity: .7; } } - img + label.icon-upload-white { + &__photo + label.icon-upload-white { opacity: 0; } &__background, - img, + &__photo, label.icon-upload-white { position: absolute; width: 100%; @@ -75,15 +75,13 @@ top: 0; left: 0; border-radius: 0; - // 300px padding on left to compensate for app-navigation having 1000 z-index - padding: 20px 20px 20px 300px; margin: 0px; background-color: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; z-index: 200; padding-top: 65px; - img { + .contact-header-avatar__photo { width: auto; height: auto; border-radius: 0; @@ -106,8 +104,6 @@ display: flex; opacity: 1; padding: 0; - // 300px padding on left to compensate for app-navigation having 1000 z-index - padding-left: 300px; flex-wrap: wrap; justify-content: space-around; background-color: rgba(0, 0, 0, 0.2); @@ -130,7 +126,6 @@ width: 100%; height: 100%; overflow: hidden; - } diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue index 63cfb8ed..bc09b227 100644 --- a/src/components/ContactDetails/ContactDetailsAvatar.vue +++ b/src/components/ContactDetails/ContactDetailsAvatar.vue @@ -24,16 +24,15 @@ import rfcProps from '../../models/rfcProps'; <template> <div :class="{'maximised':maximizeAvatar }" class="contact-header-avatar"> <div class="contact-header-avatar__background" @click="toggleSize" /> - <img v-if="contact.photo" :src="contact.photo" - class="contact-header-avatar__picture" - @click="toggleSize"> + <div v-if="contact.photo" :style="{ 'backgroundImage': `url(${contact.photo})` }" + class="contact-header-avatar__photo" + @click="toggleSize" /> <div class="contact-header-avatar__options"> <input id="contact-avatar-upload" type="file" class="hidden" accept="image/*" @change="processFile"> <label v-tooltip.auto="t('contacts', 'Upload a new picture')" for="contact-avatar-upload" class="icon-upload-white" @click="processFile" /> <div v-if="maximizeAvatar" class="icon-delete-white" @click="removePhoto" /> - <!-- <div v-if="maximizeAvatar" class="icon-fullscreen-white" @click="toggleSize" /> --> <a v-if="maximizeAvatar" :href="contact.url + '?photo'" class="icon-download-white" /> </div> </div> |