From 6c4d23714a42dd59843a8fb905150eed2d5db29d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 15:27:51 -0400
Subject: populate gallery row height without getting width

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

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

diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 6169d294..3877987a 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -7,17 +7,19 @@
       v-for="(row, index) in rows"
       :key="index"
       class="gallery-row"
-      :style="rowHeight(row.length)"
+      :style="rowStyle(row.length)"
       :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
     >
-      <attachment
-        v-for="attachment in row"
-        :key="attachment.id"
-        :set-media="setMedia"
-        :nsfw="nsfw"
-        :attachment="attachment"
-        :allow-play="false"
-      />
+      <div class="gallery-row-inner">
+        <attachment
+          v-for="attachment in row"
+          :key="attachment.id"
+          :set-media="setMedia"
+          :nsfw="nsfw"
+          :attachment="attachment"
+          :allow-play="false"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -28,15 +30,24 @@
 @import '../../_variables.scss';
 
 .gallery-row {
-  height: 200px;
+  position: relative;
+  height: 0;
   width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: stretch;
   flex-grow: 1;
   margin-top: 0.5em;
 
+  .gallery-row-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: stretch;
+  }
+
   // FIXME: specificity problem with this and .attachments.attachment
   // we shouldn't have the need for .image here
   .attachment.image {
-- 
cgit v1.2.3-70-g09d2