Cambio en layout de productos

resources/js/components/pedidos/ProductoCard.vue

@@ -24,7 +24,6 @@ export default {
 </script>
 
 <template>
-    <div class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
     <div class="box" style="height:100%">
         <div class="columns">
             <div class="column">
@@ -55,7 +54,6 @@ export default {
             </div>
         </footer>
     </div>
-    </div>
 </template>
 
 <style lang="scss" scoped>

resources/js/components/pedidos/ProductosContainer.vue

@@ -1,13 +1,15 @@
 <template>
     <div v-show="visible" class="column">
-        <div class="columns is-multiline is-mobile">
+        <div class="columns is-multiline is-mobile"
-            <producto-card
+             :class="{ 'align-last-left': isLastRowIncomplete }">
-                v-for="(producto,i) in this.productos"
+            <div v-for="(producto,i) in this.productos"
-                :key="i"
+                 class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
+                <producto-card :key="i"
                     :producto="producto">
                 </producto-card>
             </div>
         </div>
+    </div>
 </template>
 
 <script>
@@ -28,5 +30,51 @@ export default {
             }
         }
     },
+    methods: {
+        checkIfLastRowIncomplete() {
+            this.$nextTick(() => {
+                const wrapper = this.$refs.columnsWrapper;
+                if (!wrapper) return;
+
+                const columns = wrapper.querySelectorAll('.column');
+                if (columns.length === 0) {
+                    this.isLastRowIncomplete = false;
+                    return;
+                }
+
+                const firstRowTop = columns[0].offsetTop;
+
+                let firstRowCount = 0;
+                columns.forEach(col => {
+                    if (col.offsetTop === firstRowTop) firstRowCount++;
+                });
+
+                this.isLastRowIncomplete = this.productos.length % firstRowCount !== 0;
+            });
+        }
+    },
+    data() {
+        return {
+            isLastRowIncomplete: false
+        }
+    },
+    mounted() {
+        this.checkIfLastRowIncomplete();
+        window.addEventListener('resize', this.checkIfLastRowIncomplete);
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.checkIfLastRowIncomplete);
+    },
 }
 </script>
+
+<style>
+.columns.align-last-left {
+    justify-content: flex-start !important;
+}
+.columns.align-last-left > .column:last-child:nth-child(3n),
+.columns.align-last-left > .column:last-child:nth-child(2n),
+.columns.align-last-left > .column:last-child {
+    margin-right: auto;
+}
+</style>