From 5ca11324a0f634fded0db4b2a369a686bc655c0a Mon Sep 17 00:00:00 2001
From: Rodrigo <freakrho@gmail.com>
Date: Tue, 27 Aug 2024 23:27:18 -0300
Subject: [PATCH] Modal de producto ajustado

---
 resources/js/components/ProductoModal.vue | 93 ++++++++++-------------
 1 file changed, 42 insertions(+), 51 deletions(-)

diff --git a/resources/js/components/ProductoModal.vue b/resources/js/components/ProductoModal.vue
index 4839594..c1ab53c 100644
--- a/resources/js/components/ProductoModal.vue
+++ b/resources/js/components/ProductoModal.vue
@@ -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>