nathalie/pedi2
3
3
Fork 1
Code Issues Pull requests 1 Projects Releases Wiki Activity

Mejoras de estilo

Browse source
This commit is contained in:
Alejandro Tasistro 2025-05-27 22:28:40 -03:00
parent deaa65d857
commit 82a518fa1d
1 changed files with 54 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
resources/js/components/pedidos/CategoriasContainer.vue
View file

@ -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>