From fbae6770df3a9e06faefd9de13459500320ad48c Mon Sep 17 00:00:00 2001
From: Rodrigo <freakrho@gmail.com>
Date: Tue, 10 Sep 2024 22:07:16 -0300
Subject: [PATCH] Cismosa: Ajustes visuales

---
 .../js/components/CategoriasContainer.vue     |   2 +-
 resources/js/components/Chismosa.vue          | 109 ++++++++++--------
 resources/js/components/ChismosaDropdown.vue  |   2 +-
 resources/js/components/PedidoBody.vue        |  11 +-
 .../js/components/ProductosContainer.vue      |   2 +-
 5 files changed, 69 insertions(+), 57 deletions(-)

diff --git a/resources/js/components/CategoriasContainer.vue b/resources/js/components/CategoriasContainer.vue
index ff21a86..62fd96b 100644
--- a/resources/js/components/CategoriasContainer.vue
+++ b/resources/js/components/CategoriasContainer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-show="visible" class="block ml-3 mr-3">
+    <div v-show="visible" class="column">
       <div class="columns is-multiline is-mobile">
         <div v-for="(categoria,i) in categorias" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
           <div @click.capture="seleccionarCategoria(categoria)" class="card" style="height:100%" >
diff --git a/resources/js/components/Chismosa.vue b/resources/js/components/Chismosa.vue
index de373b6..de59859 100644
--- a/resources/js/components/Chismosa.vue
+++ b/resources/js/components/Chismosa.vue
@@ -1,51 +1,53 @@
 <template>
-    <div class="column">
-        <table v-show="mostrar_tabla" class="chismosa-tabla table is-narrow is-striped is-bordered">
-            <thead>
-            <tr>
-                <th>Producto</th>
-                <th><abbr title="Cantidad">C</abbr></th>
-                <th><abbr title="Precio Total">$</abbr></th>
-                <th></th>
-                <th><abbr title="Eliminar"></abbr></th>
-            </tr>
-            </thead>
-            <tfoot>
-            <tr>
-                <th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
-                <th class="has-text-right">{{ cantidadBonosDeTransporte() }}</th>
-                <th class="has-text-right">{{ totalBonosDeTransporte() }}</th>
-                <th></th>
-                <th></th>
-            </tr>
-            <tr v-if="this.$root.devoluciones">
-                <th><p>Devoluciones</p></th>
-                <td><p :title="notasDevoluciones()">...</p></td>
-                <th class="has-text-right">-{{ devoluciones() }}</th>
-                <th>
-                    <button @click.capture="modificarDevoluciones()" class="button is-warning">
-                        <span class="icon">
-                            <i class="fas fa-edit"></i>
-                        </span>
-                    </button>
-                </th>
-                <th></th>
-            </tr>
-            <tr>
-                <th>Total total</th>
-                <th></th>
-                <th class="has-text-right">{{ total() }}</th>
-                <th></th>
-                <th></th>
-            </tr>
-            </tfoot>
-            <tbody>
-            <producto-row v-for="producto in productos()" :producto="producto" :key="producto.id"></producto-row>
-            </tbody>
-        </table>
-        <p class="has-text-centered" v-show="!mostrar_tabla">
-            Compa, todavía no agregaste nada a la chismosa.
-        </p>
+    <div class="column is-one-third full-height">
+        <div class="fixed-right">
+            <table v-show="mostrar_tabla" class="table is-striped is-bordered tabla-chismosa">
+                <thead>
+                <tr>
+                    <th>Producto</th>
+                    <th><abbr title="Cantidad">C</abbr></th>
+                    <th><abbr title="Precio Total">$</abbr></th>
+                    <th></th>
+                    <th><abbr title="Eliminar"></abbr></th>
+                </tr>
+                </thead>
+                <tfoot>
+                <tr>
+                    <th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
+                    <th class="has-text-right">{{ cantidadBonosDeTransporte() }}</th>
+                    <th class="has-text-right">{{ totalBonosDeTransporte() }}</th>
+                    <th></th>
+                    <th></th>
+                </tr>
+                <tr v-if="this.$root.devoluciones">
+                    <th><p>Devoluciones</p></th>
+                    <td><p :title="notasDevoluciones()">...</p></td>
+                    <th class="has-text-right">-{{ devoluciones() }}</th>
+                    <th>
+                        <button @click.capture="modificarDevoluciones()" class="button is-warning">
+                            <span class="icon">
+                                <i class="fas fa-edit"></i>
+                            </span>
+                        </button>
+                    </th>
+                    <th></th>
+                </tr>
+                <tr>
+                    <th>Total total</th>
+                    <th></th>
+                    <th class="has-text-right">{{ total() }}</th>
+                    <th></th>
+                    <th></th>
+                </tr>
+                </tfoot>
+                <tbody>
+                <producto-row v-for="producto in productos()" :producto="producto" :key="producto.id"></producto-row>
+                </tbody>
+            </table>
+            <p class="has-text-centered" v-show="!mostrar_tabla">
+                Compa, todavía no agregaste nada a la chismosa.
+            </p>
+        </div>
     </div>
 </template>
 
@@ -87,4 +89,15 @@
             },
         },
     }
-</script>
\ No newline at end of file
+</script>
+
+<style>
+    .tabla-chismosa {
+        width: 100%;
+    }
+    .fixed-right {
+        position: fixed;
+        overflow-y: auto;
+        max-height: 88vh;
+    }
+</style>
\ No newline at end of file
diff --git a/resources/js/components/ChismosaDropdown.vue b/resources/js/components/ChismosaDropdown.vue
index 8a7f8e3..f9e23bb 100644
--- a/resources/js/components/ChismosaDropdown.vue
+++ b/resources/js/components/ChismosaDropdown.vue
@@ -31,7 +31,7 @@ export default {
     methods: {
         toggle() {
             this.activa = !this.activa;
-            Event.$emit("toggle-chismosa");
+            Event.$emit("toggle-chismosa", this.activa);
         },
     },
 }
diff --git a/resources/js/components/PedidoBody.vue b/resources/js/components/PedidoBody.vue
index fb0f4e9..d8e671d 100644
--- a/resources/js/components/PedidoBody.vue
+++ b/resources/js/components/PedidoBody.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="columns">
-        <categorias-container></categorias-container>
-        <productos-container></productos-container>
+    <div class="columns ml-3 mr-3">
+        <categorias-container :class="chismosaActiva ? 'hide-below-1024' : ''"></categorias-container>
+        <productos-container :class="chismosaActiva ? 'hide-below-1024' : ''"></productos-container>
         <chismosa v-show="chismosaActiva"></chismosa>
     </div>
 </template>
@@ -23,9 +23,8 @@
             }
         },
         mounted() {
-            Event.$on('toggle-chismosa', () => {
-                this.chismosaActiva = !this.chismosaActiva;
-                console.log(this.chismosaActiva);
+            Event.$on('toggle-chismosa', (activa) => {
+                this.chismosaActiva = activa;
             });
         },
     }
diff --git a/resources/js/components/ProductosContainer.vue b/resources/js/components/ProductosContainer.vue
index 99c29e4..ee3682b 100644
--- a/resources/js/components/ProductosContainer.vue
+++ b/resources/js/components/ProductosContainer.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-show="visible" class="block ml-6 mr-6">
+	<div v-show="visible" class="column">
       <div class="columns is-multiline is-mobile">
         <producto-card v-for="(producto,i) in productos" :key="i" :producto="producto">
         </producto-card><!-- END BLOCK COLUMN -->