Page MenuHomePhorge
Files F85650155

No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 7f33a81b86..c713ce07bb 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -1,55 +1,57 @@
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) {
return []
}
const rows = chunk(this.attachments, 3)
if (last(rows).length === 1 && rows.length > 1) {
// if 1 attachment on last row -> add it to the previous row instead
const lastAttachment = last(rows)[0]
const allButLastRow = dropRight(rows)
last(allButLastRow).push(lastAttachment)
return allButLastRow
}
return rows
},
rowHeight () {
- return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
+ return itemsPerRow => ({
+ 'height': this.attachments.length === 1 ? '260px' : `${(this.width / (itemsPerRow + 0.6))}px`
+ })
},
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
}
}
}
}
export default Gallery
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 3f90caa99f..90888c21bf 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -1,63 +1,68 @@
<template>
<div ref="galleryContainer" style="width: 100%;">
- <div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
+ <div
+ v-for="(row, row_num) in rows"
+ :key="row_num"
+ :style="rowHeight(row.length)"
+ :class="{ 'gallery-row': true, 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
+ >
<attachment
v-for="attachment in row"
:setMedia="setMedia"
:nsfw="nsfw"
:attachment="attachment"
:allowPlay="false"
:key="attachment.id"
/>
</div>
</div>
</template>
<script src='./gallery.js'></script>
<style lang="scss">
@import '../../_variables.scss';
.gallery-row {
height: 200px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: stretch;
flex-grow: 1;
margin-top: 0.5em;
margin-bottom: 0.25em;
.attachments, .attachment {
margin: 0 0.5em 0 0;
flex-grow: 1;
height: 100%;
box-sizing: border-box;
// to make failed images a bit more noticeable on chromium
min-width: 2em;
}
.image-attachment {
width: 100%;
height: 100%;
}
.video-container {
height: 100%;
}
&.contain-fit {
img, video {
object-fit: contain;
}
}
&.cover-fit {
img, video {
object-fit: cover;
}
}
}
</style>

File Metadata

Mime Type
text/x-diff
Expires
Sat, Aug 29, 10:08 PM (1 d, 19 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1737516
Default Alt Text
(3 KB)

Event Timeline