Mejoras de estilo

resources/js/components/pedidos/CategoriasContainer.vue

@@ -1,13 +1,16 @@
 <template>
     <div v-show="visible" class="column">
-        <div class="columns is-multiline is-mobile">
+        <div class="columns is-multiline is-mobile is-justify-content-center"
+             :class="{'align-last-left': categorias.length % 4 !== 0}">
             <div v-for="(categoria,i) in categorias" :key="i"
-                 class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
+                 :class="{ 'is-3-desktop': !show_chismosa }"
+                 class="column is-4-tablet is-6-mobile ">
                 <div @click.capture="seleccionar(categoria)" class="card" style="height:100%">
                     <div class="card-content">
                         <div class="media">
                             <div class="media-content" style="overflow:hidden">
-                                <p class="title is-6" v-text="categoria"></p>
+                                <p class="title is-size-7-mobile has-text-centered is-size-6-tablet"
+                                   v-text="categoria"></p>
                             </div>
                         </div>
                     </div>
@@ -23,6 +26,7 @@ export default {
     name: 'CategoriasContainer',
     computed: {
         ...mapState('productos', ["categorias", "filtro"]),
+        ...mapState('ui', ["show_chismosa"]),
         visible() {
             return this.filtro === null;
         }
@@ -33,7 +37,53 @@ export default {
         seleccionar(categoria) {
             this.seleccionarCategoria({ categoria: categoria });
             this.addMiga({ nombre: categoria, action: "productos/seleccionarCategoria", arguments: { categoria: categoria }});
+        },
+        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.categorias.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;
+}
+.title {
+    word-break: keep-all;
+}
+</style>