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

Modal de producto ajustado

This commit is contained in:
Rodrigo 2024-08-27 23:27:18 -03:00
parent 758c425f91
commit 5ca11324a0
1 changed files with 42 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
resources/js/components/ProductoModal.vue
View File

@ -1,56 +1,47 @@
<template> <template>
<div v-bind:class="visible ? 'is-active modal' : 'modal'"> <div v-bind:class="visible ? 'is-active modal' : 'modal'">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <section class="modal-card-head">
<p class="modal-card-title" v-text="producto.nombre"></p> <div class="media-content">
<button class="delete" aria-label="close" @click.capture="cerrar"></button> <p class="modal-card-title">
</header> {{ producto.nombre }}
<section class="modal-card-body"> <img v-show="producto.nacional" height="24px" width="24px" src="/assets/uruguay.png" />
<div class="card-image"> <img v-show="producto.economia_solidaria" height="24px" width="24px" src="/assets/solidaria.png">
<figure v-show="producto.nacional" class="image icono is-32x32" style="z-index:10"> </p>
<img src="/assets/uruguay.png"> <p class="subtitle" v-show="producto.proveedor" v-text="producto.proveedor"></p>
</figure> <p class="subtitle is-6" v-show="producto.apto_veganxs">Apto para veganxs.</p>
<figure v-show="producto.economia_solidaria" class="image icono is-32x32" style="z-index:10"> <p class="subtitle is-6" v-show="producto.apto_celiacxs">Apto para celíacxs.</p>
<img src="/assets/solidaria.png"> </div>
</figure> </section>
<figure class="image is-4by3"> <section class="modal-card-body">
<img <p class="subtitle is-3 has-text-weight-bold has-text-primary has-text-centered">${{ producto.precio }}</p>
v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'"> </section>
</figure> <footer class="modal-card-foot">
</div> <div class="level">
<div class="media-content"> <div class="level-item has-text-centered">
<p class="title is-4" v-text="producto.proveedor"></p> <div class="field has-addons">
<p class="subtitle is-4">$<span v-text="producto.precio"></span></p> <div class="control">
<p class="subtitle is-6"><span v-show="producto.apto_veganxs">Apto para veganxs. </span><span v-show="producto.apto_celiacxs">Apto para celíacxs.</span></p> <button class="button" @click="cantidad !== 0 ? cantidad-- : cantidad">
<p class="subtitle is-5"><span v-text="producto.descripcion"></span></p> <i class="fa fa-solid fa-minus"></i>
<div class="field has-addons is-centered is-thin-centered"> </button>
<p class="control"> </div>
<button class="button" @click="cantidad !== 0 ? cantidad-- : cantidad"> <div class="control">
<span class="icon is-small"> <input id="cantidad" class="input" type="number" v-model.number="cantidad" style="text-align: center">
<!-- Habría que ver de poner un ícono de - --> </div>
</span> <div class="control">
<span>-</span> <button class="button" @click="cantidad++">
</button> <i class="fa fa-solid fa-plus"></i>
</p> </button>
<p class="control"> </div>
<input id="cantidad" class="input" type="number" v-model.number="cantidad" style="text-align: center"> </div>
</p> </div>
<p class="control"> <div class="level-item has-text-centered">
<button class="button" @click="cantidad++"> <button class="button" @click.capture="cerrar">Cancelar</button>
<span class="icon is-small"> <!-- Habría que ver si cambiar el botón cuando al cantidad es 0 -->
<!-- Habría que ver de poner un ícono de + --> <button class="button is-success" :disabled="cantidad <= 0" @click="agregarProducto">Aceptar</button>
</span> </div>
<span>+</span> </div>
</button>
</p>
</div>
</div>
</section>
<footer class="modal-card-foot">
<!-- Habría que ver si cambiar el botón cuando al cantidad es 0 -->
<button class="button is-success" :disabled="cantidad <= 0" @click="agregarProducto">Aceptar</button>
<button class="button" @click.capture="cerrar">Cancelar</button>
</footer> </footer>
</div> </div>
</div> </div>