Cismosa: Ajustes visuales

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%" >

resources/js/components/Chismosa.vue

@@ -1,6 +1,7 @@
 <template>
-    <div class="column">
-        <table v-show="mostrar_tabla" class="chismosa-tabla table is-narrow is-striped is-bordered">
+    <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>
@@ -47,6 +48,7 @@
                 Compa, todavía no agregaste nada a la chismosa.
             </p>
         </div>
+    </div>
 </template>
 
 <script>
@@ -88,3 +90,14 @@
         },
     }
 </script>
+
+<style>
+    .tabla-chismosa {
+        width: 100%;
+    }
+    .fixed-right {
+        position: fixed;
+        overflow-y: auto;
+        max-height: 88vh;
+    }
+</style>

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);
         },
     },
 }

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;
             });
         },
     }

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 -->