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 23:54:01 -03:00
parent 4b4a284914
commit f460cdd6ce
2 changed files with 10 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,15 +1,16 @@
<template>
<div v-show="visible" class="column">
<div class="columns is-multiline is-mobile"
<div ref="categorias"
class="columns is-multiline is-mobile"
:class="{ 'align-last-left': isLastRowIncomplete }">
<div v-for="(categoria,i) in categorias" :key="i"
:class="{ 'is-3-desktop': !show_chismosa }"
class="column is-4-tablet is-6-mobile ">
:class="{ 'is-3-desktop is-2-fullhd': !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 is-size-6-tablet has-text-centered" v-text="categoria"></p>
</div>
</div>
</div>
@ -40,7 +41,7 @@ export default {
},
checkIfLastRowIncomplete() {
this.$nextTick(() => {
const wrapper = this.$refs.columnsWrapper;
const wrapper = this.$refs.categorias;
if (!wrapper) return;
const columns = wrapper.querySelectorAll('.column');
@ -50,12 +51,10 @@ export default {
}
const firstRowTop = columns[0].offsetTop;
let firstRowCount = 0;
columns.forEach(col => {
if (col.offsetTop === firstRowTop) firstRowCount++;
});
this.isLastRowIncomplete = this.categorias.length % firstRowCount !== 0;
});
}

9
resources/js/components/pedidos/ProductosContainer.vue
View file

@ -1,9 +1,10 @@
<template>
<div v-show="visible" class="column">
<div class="columns is-multiline is-mobile"
<div ref="productos"
class="columns is-multiline is-mobile"
:class="{ 'align-last-left': isLastRowIncomplete }">
<div v-for="(producto,i) in this.productos"
class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
class="block column is-full-mobile is-half-tablet is-one-third-desktop is-one-quarter-fullhd">
<producto-card :key="i"
:producto="producto">
</producto-card>
@ -33,7 +34,7 @@ export default {
methods: {
checkIfLastRowIncomplete() {
this.$nextTick(() => {
const wrapper = this.$refs.columnsWrapper;
const wrapper = this.$refs.productos;
if (!wrapper) return;
const columns = wrapper.querySelectorAll('.column');
@ -43,12 +44,10 @@ export default {
}
const firstRowTop = columns[0].offsetTop;
let firstRowCount = 0;
columns.forEach(col => {
if (col.offsetTop === firstRowTop) firstRowCount++;
});
this.isLastRowIncomplete = this.productos.length % firstRowCount !== 0;
});
}