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