Makes masonry and recorsd masonry adjust their grids based on container size instead of screen.

src/theme-helper/view-mode-masonry.vue

@@ -21,7 +21,7 @@
             <!-- SKELETON LOADING -->
             <masonry
                     v-if="isLoading"
-                    :cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
+                    :cols="masonryCols"
                     :gutter="25"                    
                     class="tainacan-masonry-container">
                 <div 
@@ -35,7 +35,7 @@
             <masonry
                     role="list"
                     v-if="!isLoading && items.length > 0" 
-                    :cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
+                    :cols="masonryCols"
                     :gutter="25"
                     class="tainacan-masonry-container">
                 <a 
@@ -78,17 +78,36 @@ export default {
         items: Array,
         isLoading: false,
         itemsPerPage: Number,
-        itemColumnWidth: Number,
         isFiltersMenuCompressed: Boolean
     },
     watch: {
         isFiltersMenuCompressed() {
+            if (this.$refs.masonryWrapper != undefined && 
+                this.$refs.masonryWrapper.children[0] != undefined && 
+                this.$refs.masonryWrapper.children[0].children[0] != undefined && 
+                this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
+                this.containerWidthDiscount = jQuery(window).width() - this.$refs.masonryWrapper.clientWidth;
+            }
             this.$forceUpdate();
+        },
+        containerWidthDiscount() {
+            let obj = {};
+            obj['default'] = 7;
+            obj[1980 - this.containerWidthDiscount] = 6;
+            obj[1460 - this.containerWidthDiscount] = 5;
+            obj[1275 - this.containerWidthDiscount] = 4;
+            obj[1080 - this.containerWidthDiscount] = 3;
+            obj[828 - this.containerWidthDiscount] = 2;
+            obj[400] = 1;
+            this.masonryCols = obj;
         }
     },
     data () {
         return {
-            thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
+            thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
+            itemColumnWidth: Number,
+            containerWidthDiscount: Number,
+            masonryCols: {default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}
         }
     },
     methods: {
@@ -121,10 +140,17 @@ export default {
                 this.$refs.masonryWrapper.children[0].children[0] != undefined && 
                 this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined)
                     this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
+                
 
             return (imageHeight*this.itemColumnWidth)/imageWidth;
         },
         recalculateItemsHeight: _.debounce( function() {
+            if (this.$refs.masonryWrapper != undefined && 
+                this.$refs.masonryWrapper.children[0] != undefined && 
+                this.$refs.masonryWrapper.children[0].children[0] != undefined && 
+                this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
+                this.containerWidthDiscount = jQuery(window).width() - this.$refs.masonryWrapper.clientWidth;
+            }
             this.$forceUpdate();
         }, 500)
     },

src/theme-helper/view-mode-records.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="table-container">
-        <div class="table-wrapper">
+        <div
+                ref="masonryWrapper"
+                class="table-wrapper">
 
             <!-- Empty result placeholder -->
             <section
@@ -19,7 +21,7 @@
             <!-- SKELETON LOADING -->
             <masonry
                     v-if="isLoading"
-                    :cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
+                    :cols="masonryCols"
                     :gutter="30"                    
                     class="tainacan-records-container">
                 <div 
@@ -33,7 +35,7 @@
             <masonry 
                     role="list"
                     v-if="!isLoading && items.length > 0"
-                    :cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
+                    :cols="masonryCols"
                     :gutter="30"
                     class="tainacan-records-container">
                 <a 
@@ -103,7 +105,8 @@ export default {
         collectionId: Number,
         displayedMetadata: Array,
         items: Array,
-        isLoading: false
+        isLoading: false,
+        isFiltersMenuCompressed: Boolean
     },
     computed: {
         amountOfDisplayedMetadata() {
@@ -112,7 +115,30 @@ export default {
     },
     data () {
         return {
-            thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
+            thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
+            masonryCols: {default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}
+        }
+    },
+    watch: {
+        isFiltersMenuCompressed() {
+            if (this.$refs.masonryWrapper != undefined && 
+                this.$refs.masonryWrapper.children[0] != undefined && 
+                this.$refs.masonryWrapper.children[0].children[0] != undefined && 
+                this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
+                this.containerWidthDiscount = jQuery(window).width() - this.$refs.masonryWrapper.clientWidth;
+            }
+            this.$forceUpdate();
+        },
+        containerWidthDiscount() {
+            let obj = {};
+            obj['default'] = 4;
+            obj[1980 - this.containerWidthDiscount] = 3;
+            obj[1460 - this.containerWidthDiscount] = 2;
+            obj[1275 - this.containerWidthDiscount] = 2;
+            obj[1080 - this.containerWidthDiscount] = 1;
+            obj[828 - this.containerWidthDiscount] = 1;
+            obj[400] = 1;
+            this.masonryCols = obj;
         }
     },
     methods: {
@@ -138,6 +164,32 @@ export default {
             let itemWidth = 120;
             return (imageHeight*itemWidth)/imageWidth;
         },
+        recalculateContainerWidth: _.debounce( function() {
+            if (this.$refs.masonryWrapper != undefined && 
+                this.$refs.masonryWrapper.children[0] != undefined && 
+                this.$refs.masonryWrapper.children[0].children[0] != undefined && 
+                this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
+                this.containerWidthDiscount = jQuery(window).width() - this.$refs.masonryWrapper.clientWidth;
+            }
+            this.$forceUpdate();
+        }, 500)
+    },
+    mounted() {
+
+        if (this.$refs.masonryWrapper != undefined && 
+            this.$refs.masonryWrapper.children[0] != undefined && 
+            this.$refs.masonryWrapper.children[0].children[0] != undefined && 
+            this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
+                this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
+                this.recalculateContainerWidth();
+            } else
+                this.itemColumnWidth = 202;
+    },
+    created() {
+        window.addEventListener('resize', this.recalculateContainerWidth);  
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.recalculateContainerWidth);
     }
 }
 </script>