commit: 34d265467a77d4e680e3c56c254df7dfb904fc18
parent f5823a96e970b6936185b7545c68d9401f8b3281
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 19:45:48 +0300
add media description into media modal
Diffstat:
2 files changed, 71 insertions(+), 48 deletions(-)
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
@@ -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
},
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
@@ -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;
+.media-modal-view {
+ @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;
-}
+ /* 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-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);
+ .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;
+ }
- .arrow-icon {
+ .modal-view-button-arrow {
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);
- }
+ 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);
- &--prev {
- left: 0;
.arrow-icon {
- left: 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);
}
- }
- &--next {
- right: 0;
- .arrow-icon {
- right: 6px;
+ &--prev {
+ left: 0;
+ .arrow-icon {
+ left: 6px;
+ }
+ }
+
+ &--next {
+ right: 0;
+ .arrow-icon {
+ right: 6px;
+ }
}
}
}