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

Cambio en layout de productos

Browse source
This commit is contained in:
Alejandro Tasistro 2025-05-27 23:38:37 -03:00
parent a641247748
commit 4b4a284914
2 changed files with 81 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
resources/js/components/pedidos/ProductoCard.vue
View file

@ -24,37 +24,35 @@ export default {
</script>
<template>
<div class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
<div class="box" style="height:100%">
<div class="columns">
<div class="column">
<p class="title is-6">
{{ producto.nombre }}
</p>
<span class="subtitle is-7 hidden-from-tablet" v-if="fuePedido">{{ cantidadEnChismosa }}</span>
</div>
<div class="column is-one-quarter has-text-right">
<p class="has-text-weight-bold has-text-primary">
<span class="is-left-mobile">
<img v-show="producto.economia_solidaria" height="30px" width="30px" src="/assets/solidaria.png" alt="proveedor de economía solidaria">
<img v-show="producto.nacional" height="30px" width="30px" src="/assets/uruguay.png" alt="proveedor nacional"/>
</span>
$<span v-text="producto.precio"></span>
</p>
</div>
<div class="box" style="height:100%">
<div class="columns">
<div class="column">
<p class="title is-6">
{{ producto.nombre }}
</p>
<span class="subtitle is-7 hidden-from-tablet" v-if="fuePedido">{{ cantidadEnChismosa }}</span>
</div>
<div class="column is-one-quarter has-text-right">
<p class="has-text-weight-bold has-text-primary">
<span class="is-left-mobile">
<img v-show="producto.economia_solidaria" height="30px" width="30px" src="/assets/solidaria.png" alt="proveedor de economía solidaria">
<img v-show="producto.nacional" height="30px" width="30px" src="/assets/uruguay.png" alt="proveedor nacional"/>
</span>
$<span v-text="producto.precio"></span>
</p>
</div>
<footer class="columns">
<div class="column is-three-quarters">
<producto-cantidad
:producto_id="producto.id"
:requiere_notas="producto.requiere_notas">
</producto-cantidad>
</div>
<div class="column">
<p class="subtitle is-7 is-hidden-mobile" v-if="fuePedido">{{ cantidadEnChismosa }} en chismosa</p>
</div>
</footer>
</div>
<footer class="columns">
<div class="column is-three-quarters">
<producto-cantidad
:producto_id="producto.id"
:requiere_notas="producto.requiere_notas">
</producto-cantidad>
</div>
<div class="column">
<p class="subtitle is-7 is-hidden-mobile" v-if="fuePedido">{{ cantidadEnChismosa }} en chismosa</p>
</div>
</footer>
</div>
</template>

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

@ -1,11 +1,13 @@
<template>
<div v-show="visible" class="column">
<div class="columns is-multiline is-mobile">
<producto-card
v-for="(producto,i) in this.productos"
:key="i"
:producto="producto">
</producto-card>
<div 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">
<producto-card :key="i"
:producto="producto">
</producto-card>
</div>
</div>
</div>
</template>
@ -28,5 +30,51 @@ export default {
}
}
},
methods: {
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.productos.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;
}
</style>