From 44b741e270fcd949d25340d34cabbe4361ac5a03 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 17:30:56 +0300
Subject: [PATCH] better attachments in uploading (grid layout)

---
 src/components/gallery/gallery.js             | 49 ++++++++++---------
 src/components/gallery/gallery.vue            | 25 ++++++++--
 .../post_status_form/post_status_form.vue     | 19 +------
 3 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 741f1de2..15436d61 100644
--- 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
index 65175366..424a15f1 100644
--- 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
index 5078ad5f..5ff191cf 100644
--- 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;