Chismosa scrollablre

public/css/app.css

@@ -21,13 +21,33 @@ nav.breadcrumb.is-fixed-top {
 	right: 0;
 	z-index: 30;
 	top: 3.25rem;
+	height: 3.25rem;
 }
 
 main.has-top-padding {
-	padding-top: 3rem !important;
+	padding-top: 4.5rem !important;
 }
 
 .has-text-centered {
     text-align: center;
     margin: 0 1em;
 }
+
+.is-fixed-top {
+	position: fixed;
+	z-index: 30;
+}
+
+.chismosa-container {
+	top: 6.5rem;
+	max-height: 21rem;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	width: 100%;
+	position: fixed;	
+	z-index: 15;
+}
+
+main.chisma-abierta {
+	padding-top: 25.5rem !important;
+}

public/js/chismosa.js

@@ -1,6 +1,6 @@
 Vue.component('chismosa', {
     template: `
-        <div class="container" v-show="this.visible">
+        <div class="container table-container chismosa-container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
             <table v-show="this.subpedido.productos.length != 0" class="table is-fullwidth is-striped is-bordered">
                 <thead>
                 <tr>
@@ -39,23 +39,19 @@ Vue.component('chismosa', {
             subpedido: {
                 productos:[]
             },
+            init: true,
             visible: false
         }
     },
     computed: {
-        /* TODO: tener el camino que se había hecho antes de abrir la chismosa para volver atrás */
-        miga: function() {
-            return {
-                nombre: "Chismosa de " + this.subpedido.nombre,
-                href: "/chismosa"
-            }
+        animation: function() {
+            return this.visible ? "animate__slideInDown" : "animate__slideOutUp";
         }
     },
     beforeCreate() {
         axios.get("/subpedidos/obtener_sesion").then(response => {
             this.subpedido = response.data.subpedido;
             this.fetchSubpedido();
-            Event.$emit("migas-agregar",this.miga);
         });
     },
     methods: {
@@ -71,7 +67,11 @@ Vue.component('chismosa', {
             this.fetchSubpedido();
         });
         Event.$on('toggle-chismosa', () => {
+            this.init = false;
             this.visible = !this.visible;
+            var main = document.getElementById("main");
+            if (this.visible) main.classList.add("chisma-abierta");
+            else main.classList.remove("chisma-abierta");
         });
     }
 });

resources/views/layouts/app.blade.php

@@ -40,7 +40,7 @@
             </nav>
         </nav-migas>
 
-        <main class="py-4 has-top-padding">
+        <main id="main" class="py-4 has-top-padding">
             @yield('content')
         </main>
     </div>