better attachments in uploading (grid layout)

This commit is contained in:
Henry Jameson 2021-06-18 17:30:56 +03:00
parent 8bab8658e8
commit 44b741e270
3 changed files with 47 additions and 46 deletions

View file

@ -13,7 +13,7 @@ const Gallery = {
'editable', 'editable',
'removeAttachment', 'removeAttachment',
'editAttachment', 'editAttachment',
'maxPerRow' 'grid'
], ],
data () { data () {
return { return {
@ -27,34 +27,35 @@ const Gallery = {
if (!this.attachments) { if (!this.attachments) {
return [] return []
} }
console.log(this.limit)
const attachments = this.limit > 0 const attachments = this.limit > 0
? this.attachments.slice(0, this.limit) ? this.attachments.slice(0, this.limit)
: this.attachments : this.attachments
if (this.size === 'hide') { if (this.size === 'hide') {
return attachments.map(item => ({ minimal: true, items: [item] })) return attachments.map(item => ({ minimal: true, items: [item] }))
} }
const rows = attachments.reduce((acc, attachment, i) => { const rows = this.grid
if (attachment.mimetype.includes('audio')) { ? [{ grid: true, items: attachments }]
return [...acc, { audio: true, items: [attachment] }, { items: [] }] : attachments.reduce((acc, attachment, i) => {
} if (attachment.mimetype.includes('audio')) {
if (!( return [...acc, { audio: true, items: [attachment] }, { items: [] }]
attachment.mimetype.includes('image') || }
attachment.mimetype.includes('video') || if (!(
attachment.mimetype.includes('flash') attachment.mimetype.includes('image') ||
)) { attachment.mimetype.includes('video') ||
return [...acc, { minimal: true, items: [attachment] }, { items: [] }] attachment.mimetype.includes('flash')
} )) {
const maxPerRow = this.maxPerRow || 3 return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
const attachmentsRemaining = this.attachments.length - i + 1 }
const currentRow = acc[acc.length - 1].items const maxPerRow = 3
currentRow.push(attachment) const attachmentsRemaining = this.attachments.length - i + 1
if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) { const currentRow = acc[acc.length - 1].items
return [...acc, { items: [] }] currentRow.push(attachment)
} else { if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
return acc return [...acc, { items: [] }]
} } else {
}, [{ items: [] }]).filter(_ => _.items.length > 0) return acc
}
}, [{ items: [] }]).filter(_ => _.items.length > 0)
return rows return rows
}, },
attachmentsDimensionalScore () { attachmentsDimensionalScore () {
@ -87,7 +88,7 @@ const Gallery = {
rowStyle (row) { rowStyle (row) {
if (row.audio) { if (row.audio) {
return { 'padding-bottom': '25%' } // fixed reduced height for audio return { 'padding-bottom': '25%' } // fixed reduced height for audio
} else if (!row.minimal) { } else if (!row.minimal && !row.grid) {
return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` } return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
} }
}, },

View file

@ -10,9 +10,12 @@
:key="index" :key="index"
class="gallery-row" class="gallery-row"
:style="rowStyle(row)" :style="rowStyle(row)"
:class="{ '-audio': row.audio, '-minimal': row.minimal }" :class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
> >
<div class="gallery-row-inner"> <div
class="gallery-row-inner"
:class="{ '-grid': grid }"
>
<attachment <attachment
v-for="attachment in row.items" v-for="attachment in row.items"
class="gallery-item" class="gallery-item"
@ -136,10 +139,9 @@
} }
.gallery-row { .gallery-row {
&.-grid,
&.-minimal { &.-minimal {
height: auto; height: auto;
.gallery-row-inner { .gallery-row-inner {
position: relative; position: relative;
} }
@ -156,6 +158,21 @@
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-content: stretch; align-content: stretch;
&.-grid {
width: 100%;
height: auto;
position: relative;
display: grid;
grid-column-gap: 0.5em;
grid-row-gap: 0.5em;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
.gallery-item {
margin: 0;
height: 200px;
}
}
} }
.gallery-item { .gallery-item {

View file

@ -290,7 +290,7 @@
<gallery <gallery
v-if="newStatus.files && newStatus.files.length > 0" v-if="newStatus.files && newStatus.files.length > 0"
class="attachments" class="attachments"
:maxPerRow="1" :grid="true"
:nsfw="false" :nsfw="false"
:attachments="newStatus.files" :attachments="newStatus.files"
:descriptions="newStatus.mediaDescriptions" :descriptions="newStatus.mediaDescriptions"
@ -318,23 +318,6 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.tribute-container {
ul {
padding: 0px;
li {
display: flex;
align-items: center;
}
}
img {
padding: 3px;
width: 16px;
height: 16px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
}
.post-status-form { .post-status-form {
position: relative; position: relative;