diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/gallery/gallery.js | 24 | ||||
| -rw-r--r-- | src/components/gallery/gallery.vue | 39 |
2 files changed, 27 insertions, 36 deletions
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 7f33a81b..3610f53d 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -2,22 +2,12 @@ import Attachment from '../attachment/attachment.vue' import { chunk, last, dropRight } from 'lodash' const Gallery = { - data: () => ({ - width: 500 - }), props: [ 'attachments', 'nsfw', 'setMedia' ], components: { Attachment }, - mounted () { - this.resize() - window.addEventListener('resize', this.resize) - }, - destroyed () { - window.removeEventListener('resize', this.resize) - }, computed: { rows () { if (!this.attachments) { @@ -33,22 +23,12 @@ const Gallery = { } return rows }, - rowHeight () { - return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` }) + rowStyle () { + return itemsPerRow => ({ 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }) }, useContainFit () { return this.$store.state.config.useContainFit } - }, - methods: { - resize () { - // Quick optimization to make resizing not always trigger state change, - // only update attachment size in 10px steps - const width = Math.floor(this.$el.getBoundingClientRect().width / 10) * 10 - if (this.width !== width) { - this.width = width - } - } } } diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 6169d294..3877987a 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -7,17 +7,19 @@ v-for="(row, index) in rows" :key="index" class="gallery-row" - :style="rowHeight(row.length)" + :style="rowStyle(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }" > - <attachment - v-for="attachment in row" - :key="attachment.id" - :set-media="setMedia" - :nsfw="nsfw" - :attachment="attachment" - :allow-play="false" - /> + <div class="gallery-row-inner"> + <attachment + v-for="attachment in row" + :key="attachment.id" + :set-media="setMedia" + :nsfw="nsfw" + :attachment="attachment" + :allow-play="false" + /> + </div> </div> </div> </template> @@ -28,15 +30,24 @@ @import '../../_variables.scss'; .gallery-row { - height: 200px; + position: relative; + height: 0; width: 100%; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-content: stretch; flex-grow: 1; margin-top: 0.5em; + .gallery-row-inner { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-content: stretch; + } + // FIXME: specificity problem with this and .attachments.attachment // we shouldn't have the need for .image here .attachment.image { |