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> <template>
<div v-show="visible" class="column"> <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 }"> :class="{ 'align-last-left': isLastRowIncomplete }">
<div v-for="(categoria,i) in categorias" :key="i" <div v-for="(categoria,i) in categorias" :key="i"
:class="{ 'is-3-desktop': !show_chismosa }" :class="{ 'is-3-desktop is-2-fullhd': !show_chismosa }"
class="column is-4-tablet is-6-mobile "> class="column is-4-tablet is-6-mobile">
<div @click.capture="seleccionar(categoria)" class="card" style="height: 100%"> <div @click.capture="seleccionar(categoria)" class="card" style="height: 100%">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-content" style="overflow: hidden"> <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> </div>
</div> </div>
@ -40,7 +41,7 @@ export default {
}, },
checkIfLastRowIncomplete() { checkIfLastRowIncomplete() {
this.$nextTick(() => { this.$nextTick(() => {
const wrapper = this.$refs.columnsWrapper; const wrapper = this.$refs.categorias;
if (!wrapper) return; if (!wrapper) return;
const columns = wrapper.querySelectorAll('.column'); const columns = wrapper.querySelectorAll('.column');
@ -50,12 +51,10 @@ export default {
} }
const firstRowTop = columns[0].offsetTop; const firstRowTop = columns[0].offsetTop;
let firstRowCount = 0; let firstRowCount = 0;
columns.forEach(col => { columns.forEach(col => {
if (col.offsetTop === firstRowTop) firstRowCount++; if (col.offsetTop === firstRowTop) firstRowCount++;
}); });
this.isLastRowIncomplete = this.categorias.length % firstRowCount !== 0; this.isLastRowIncomplete = this.categorias.length % firstRowCount !== 0;
}); });
} }

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

@ -1,9 +1,10 @@
<template> <template>
<div v-show="visible" class="column"> <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 }"> :class="{ 'align-last-left': isLastRowIncomplete }">
<div v-for="(producto,i) in this.productos" <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-card :key="i"
:producto="producto"> :producto="producto">
</producto-card> </producto-card>
@ -33,7 +34,7 @@ export default {
methods: { methods: {
checkIfLastRowIncomplete() { checkIfLastRowIncomplete() {
this.$nextTick(() => { this.$nextTick(() => {
const wrapper = this.$refs.columnsWrapper; const wrapper = this.$refs.productos;
if (!wrapper) return; if (!wrapper) return;
const columns = wrapper.querySelectorAll('.column'); const columns = wrapper.querySelectorAll('.column');
@ -43,12 +44,10 @@ export default {
} }
const firstRowTop = columns[0].offsetTop; const firstRowTop = columns[0].offsetTop;
let firstRowCount = 0; let firstRowCount = 0;
columns.forEach(col => { columns.forEach(col => {
if (col.offsetTop === firstRowTop) firstRowCount++; if (col.offsetTop === firstRowTop) firstRowCount++;
}); });
this.isLastRowIncomplete = this.productos.length % firstRowCount !== 0; this.isLastRowIncomplete = this.productos.length % firstRowCount !== 0;
}); });
} }