From f460cdd6cef3a4c1a6b0a3a3cf785143edddb30e Mon Sep 17 00:00:00 2001
From: ale <ale.tasistro@gmail.com>
Date: Tue, 27 May 2025 23:54:01 -0300
Subject: [PATCH] Mejoras de estilo
---
.../js/components/pedidos/CategoriasContainer.vue | 13 ++++++-------
.../js/components/pedidos/ProductosContainer.vue | 9 ++++-----
2 files changed, 10 insertions(+), 12 deletions(-)
diff --git a/resources/js/components/pedidos/CategoriasContainer.vue b/resources/js/components/pedidos/CategoriasContainer.vue
index a996010..ea840cc 100644
--- a/resources/js/components/pedidos/CategoriasContainer.vue
+++ b/resources/js/components/pedidos/CategoriasContainer.vue
@@ -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;
});
}
diff --git a/resources/js/components/pedidos/ProductosContainer.vue b/resources/js/components/pedidos/ProductosContainer.vue
index ef9b817..295dc07 100644
--- a/resources/js/components/pedidos/ProductosContainer.vue
+++ b/resources/js/components/pedidos/ProductosContainer.vue
@@ -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;
});
}