Page MenuHomePhorge
Files F85648468

No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 84f0f94618..c8bb5fb766 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,127 +1,127 @@
<template>
<div class="modal-view" v-if="showing" @click.prevent="hide">
<div
draggable="true"
class="modal-image"
v-on:dragstart="handleDragStart"
v-on:touchstart="handleDragStart"
v-on:dragend="handleDragEnd"
v-on:touchend="handleDragEnd"
v-on:drag="handleDragMove"
v-on:touchmove="handleDragMove"
>
<img v-if="type === 'image'" :src="currentMedia.url"/>
<VideoAttachment
v-if="type === 'video'"
:attachment="currentMedia"
:controls="true"
@click.stop.native="">
</VideoAttachment>
</div>
<button
: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
: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" />
</button>
</div>
</template>
<script src="./media_modal.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.modal-view {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
- display: flex;
- justify-content: center;
- align-items: center;
+ padding: 40px;
background-color: rgba(0, 0, 0, 0.5);
-
}
.modal-image {
- max-width: 90%;
- max-height: 90%;
- box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
- cursor: pointer;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
img, video {
max-width: 100%;
max-height: 100%;
+ cursor: pointer;
+ box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
}
img {
pointer-events: none;
}
}
.modal-view-button-arrow {
position: absolute;
display: block;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
border: 0;
padding: 0;
background: none;
appearance: none;
overflow: visible;
cursor: pointer;
outline: none;
box-shadow: none;
&:hover {
box-shadow: none;
}
.arrow-icon {
position: absolute;
top: 35px;
height: 30px;
width: 32px;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);
}
&--prev {
left: 0;
.arrow-icon {
left: 6px;
}
}
&--next {
right: 0;
.arrow-icon {
right: 6px;
}
}
}
.hidden-drag-ghost {
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
}
</style>

File Metadata

Mime Type
text/x-diff
Expires
Fri, Aug 28, 12:33 PM (10 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1736403
Default Alt Text
(2 KB)

Event Timeline