populate gallery row height without getting width

src/components/gallery/gallery.js

@@ -2,22 +2,12 @@ import Attachment from '../attachment/attachment.vue'
 import { chunk, last, dropRight } from 'lodash'
 
 const Gallery = {
-  data: () => ({
-    width: 500
-  }),
   props: [
     'attachments',
     'nsfw',
     'setMedia'
   ],
   components: { Attachment },
-  mounted () {
-    this.resize()
-    window.addEventListener('resize', this.resize)
-  },
-  destroyed () {
-    window.removeEventListener('resize', this.resize)
-  },
   computed: {
     rows () {
       if (!this.attachments) {
@@ -33,22 +23,12 @@ const Gallery = {
       }
       return rows
     },
-    rowHeight () {
-      return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
+    rowStyle () {
+      return itemsPerRow => ({ 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` })
     },
     useContainFit () {
       return this.$store.state.config.useContainFit
     }
-  },
-  methods: {
-    resize () {
-      // Quick optimization to make resizing not always trigger state change,
-      // only update attachment size in 10px steps
-      const width = Math.floor(this.$el.getBoundingClientRect().width / 10) * 10
-      if (this.width !== width) {
-        this.width = width
-      }
-    }
   }
 }
 

src/components/gallery/gallery.vue

@@ -7,9 +7,10 @@
       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 }"
     >
+      <div class="gallery-row-inner">
         <attachment
           v-for="attachment in row"
           :key="attachment.id"
@@ -20,6 +21,7 @@
         />
       </div>
     </div>
+  </div>
 </template>
 
 <script src='./gallery.js'></script>
@@ -28,14 +30,23 @@
 @import '../../_variables.scss';
 
 .gallery-row {
-  height: 200px;
+  position: relative;
+  height: 0;
   width: 100%;
+  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;
-  flex-grow: 1;
-  margin-top: 0.5em;
+  }
 
   // FIXME: specificity problem with this and .attachments.attachment
   // we shouldn't have the need for .image here