commit: 44b741e270fcd949d25340d34cabbe4361ac5a03
parent 8bab8658e8efd5b8b9f8de9311432c814fa2ef9c
Author: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 17:30:56 +0300
better attachments in uploading (grid layout)
Diffstat:
3 files changed, 47 insertions(+), 46 deletions(-)
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
@@ -13,7 +13,7 @@ const Gallery = {
'editable',
'removeAttachment',
'editAttachment',
- 'maxPerRow'
+ 'grid'
],
data () {
return {
@@ -27,34 +27,35 @@ const Gallery = {
if (!this.attachments) {
return []
}
- console.log(this.limit)
const attachments = this.limit > 0
? this.attachments.slice(0, this.limit)
: this.attachments
if (this.size === 'hide') {
return attachments.map(item => ({ minimal: true, items: [item] }))
}
- const rows = attachments.reduce((acc, attachment, i) => {
- if (attachment.mimetype.includes('audio')) {
- return [...acc, { audio: true, items: [attachment] }, { items: [] }]
- }
- if (!(
- attachment.mimetype.includes('image') ||
- attachment.mimetype.includes('video') ||
- attachment.mimetype.includes('flash')
- )) {
- return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
- }
- const maxPerRow = this.maxPerRow || 3
- const attachmentsRemaining = this.attachments.length - i + 1
- const currentRow = acc[acc.length - 1].items
- currentRow.push(attachment)
- if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
- return [...acc, { items: [] }]
- } else {
- return acc
- }
- }, [{ items: [] }]).filter(_ => _.items.length > 0)
+ const rows = this.grid
+ ? [{ grid: true, items: attachments }]
+ : attachments.reduce((acc, attachment, i) => {
+ if (attachment.mimetype.includes('audio')) {
+ return [...acc, { audio: true, items: [attachment] }, { items: [] }]
+ }
+ if (!(
+ attachment.mimetype.includes('image') ||
+ attachment.mimetype.includes('video') ||
+ attachment.mimetype.includes('flash')
+ )) {
+ return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
+ }
+ const maxPerRow = 3
+ const attachmentsRemaining = this.attachments.length - i + 1
+ const currentRow = acc[acc.length - 1].items
+ currentRow.push(attachment)
+ if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
+ return [...acc, { items: [] }]
+ } else {
+ return acc
+ }
+ }, [{ items: [] }]).filter(_ => _.items.length > 0)
return rows
},
attachmentsDimensionalScore () {
@@ -87,7 +88,7 @@ const Gallery = {
rowStyle (row) {
if (row.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))}%` }
}
},
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
@@ -10,9 +10,12 @@
:key="index"
class="gallery-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
v-for="attachment in row.items"
class="gallery-item"
@@ -136,10 +139,9 @@
}
.gallery-row {
-
+ &.-grid,
&.-minimal {
height: auto;
-
.gallery-row-inner {
position: relative;
}
@@ -156,6 +158,21 @@
flex-direction: row;
flex-wrap: nowrap;
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 {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -290,7 +290,7 @@
<gallery
v-if="newStatus.files && newStatus.files.length > 0"
class="attachments"
- :maxPerRow="1"
+ :grid="true"
:nsfw="false"
:attachments="newStatus.files"
:descriptions="newStatus.mediaDescriptions"
@@ -318,23 +318,6 @@
<style lang="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 {
position: relative;