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: better attachments in uploading (grid layout)

---
 src/components/gallery/gallery.vue | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

(limited to 'src/components/gallery/gallery.vue')

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 {
-- 
cgit v1.2.3-70-g09d2