add media description into media modal

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

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
},

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,24 +91,36 @@
}
}
@keyframes media-fadein {
.media-modal-view {
@keyframes media-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
.modal-image {
/* 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 {
.modal-view-button-arrow {
position: absolute;
display: block;
top: 50%;
@ -143,5 +162,6 @@
right: 6px;
}
}
}
}
</style>