sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add media description into media modal

Browse source
This commit is contained in:
Henry Jameson 2021-08-15 19:45:48 +03:00
parent f5823a96e9
commit 34d265467a
2 changed files with 76 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/media_modal/media_modal.js
View file

@ -29,6 +29,9 @@ const MediaModal = {
media () {
return this.$store.state.mediaViewer.media
},
description () {
return this.currentMedia.description
},
currentIndex () {
return this.$store.state.mediaViewer.currentIndex
},

126
src/components/media_modal/media_modal.vue
View file

@ -61,6 +61,12 @@
icon="chevron-right"
/>
</button>
<span
v-if="description"
class="description"
>
{{ description }}
</span>
</Modal>
</template>
@ -69,6 +75,7 @@
<style lang="scss">
.modal-view.media-modal-view {
z-index: 1001;
flex-direction: column;
.modal-view-button-arrow {
opacity: 0.75;
@ -84,63 +91,76 @@
}
}
@keyframes media-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-image {
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
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
}
.modal-view-button-arrow {
position: absolute;
display: block;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
border: 0;
padding: 0;
opacity: 0;
box-shadow: none;
background: none;
appearance: none;
overflow: visible;
cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
.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;
.media-modal-view {
@keyframes media-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
&--next {
right: 0;
/* Hardcoded since background is also hardcoded */
.description {
color: white;
margin-top: 1em;
text-shadow: 0 0 10px black, 0 0 10px black;
max-width: 500px;
max-height: 9.5em;
overflow-y: auto;
padding: 0 2em;
}
.modal-image {
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
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
}
.modal-view-button-arrow {
position: absolute;
display: block;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
border: 0;
padding: 0;
opacity: 0;
box-shadow: none;
background: none;
appearance: none;
overflow: visible;
cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
.arrow-icon {
right: 6px;
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;
}
}
}
}