diff options
Diffstat (limited to 'src/components/media_modal/media_modal.vue')
| -rw-r--r-- | src/components/media_modal/media_modal.vue | 30 |
1 files changed, 23 insertions, 7 deletions
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index 7f666603..06ced5a1 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -1,25 +1,34 @@ <template> - <div class="modal-view media-modal-view" v-if="showing" @click.prevent="hide"> - <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img> - <VideoAttachment + <div + v-if="showing" + v-body-scroll-lock="showing" + class="modal-view media-modal-view" + @click.prevent="hide" + > + <img + v-if="type === 'image'" class="modal-image" + :src="currentMedia.url" + > + <VideoAttachment v-if="type === 'video'" + class="modal-image" :attachment="currentMedia" :controls="true" - @click.stop.native=""> - </VideoAttachment> + @click.stop.native="" + /> <button + v-if="canNavigate" :title="$t('media_modal.previous')" class="modal-view-button-arrow modal-view-button-arrow--prev" - v-if="canNavigate" @click.stop.prevent="goPrev" > <i class="icon-left-open arrow-icon" /> </button> <button + v-if="canNavigate" :title="$t('media_modal.next')" class="modal-view-button-arrow modal-view-button-arrow--next" - v-if="canNavigate" @click.stop.prevent="goNext" > <i class="icon-right-open arrow-icon" /> @@ -33,6 +42,12 @@ @import '../../_variables.scss'; .media-modal-view { + z-index: 1001; + + body:not(.scroll-locked) & { + display: none; + } + &:hover { .modal-view-button-arrow { opacity: 0.75; @@ -53,6 +68,7 @@ max-width: 90%; max-height: 90%; box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5); + image-orientation: from-image; // NOTE: only FF supports this } .modal-view-button-arrow { |