From 4f11229f3a4b8a1f146e3c0ff0858983ad05ae2b Mon Sep 17 00:00:00 2001
From: Francisco Sandoval <fesv1975@gmail.com>
Date: Tue, 24 Oct 2023 15:27:40 -0300
Subject: [PATCH] cambio apariencia offcanvas de parada

---
 src/pages/mapas/CanvasParadero.svelte    | 110 -------------------
 src/pages/mapas/FormParadero.svelte      |  11 ++
 src/pages/mapas/OffcanvasParadero.svelte | 132 +++++++++++++++++++++++
 src/pages/mapas/Paraderos.svelte         |   4 +-
 4 files changed, 145 insertions(+), 112 deletions(-)
 delete mode 100644 src/pages/mapas/CanvasParadero.svelte
 create mode 100644 src/pages/mapas/OffcanvasParadero.svelte

diff --git a/src/pages/mapas/CanvasParadero.svelte b/src/pages/mapas/CanvasParadero.svelte
deleted file mode 100644
index b4c9f1c..0000000
--- a/src/pages/mapas/CanvasParadero.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script>
-    // imagenes
-    import IconParada from "$/assets/parada-de-autobus.png";
-    // libs
-    import { createEventDispatcher } from "svelte";
-    import FormParadero from "./FormParadero.svelte";
-    import FormParaderoDispositivos from "./FormParaderoDispositivos.svelte";
-    import FormParaderoDetalle from "./FormParaderoDetalle.svelte";
-    import FormParaderoServicios from "./FormParaderoServicios.svelte";
-    const dispatch = createEventDispatcher();
-    export let parada = null;
-    let canvas = null;
-    let tab = 0;
-
-    $: init(!!parada);
-
-    function init(show) {
-        if (!canvas) return;
-        if (show) {
-            canvas.classList.add("show");
-        } else {
-            canvas.classList.remove("show");
-            tab = 0;
-        }
-    }
-</script>
-
-<div
-    class="offcanvas offcanvas-end"
-    tabindex="-1"
-    bind:this={canvas}
-    aria-labelledby="offcanvasParaderoLabel"
-    style="visibility: inherit; --bs-offcanvas-width: 500px;"
->
-    <div class="offcanvas-header">
-        <h5 class="offcanvas-title text-info" id="offcanvasParaderoLabel">
-            <img src={IconParada} alt="Icono de Paradero" width="64" />
-            Paradero
-        </h5>
-        <button
-            type="button"
-            class="btn-close"
-            aria-label="Close"
-            on:click|preventDefault={() => dispatch("close")}
-        />
-    </div>
-    <div class="offcanvas-body">
-        <nav class="mb-3">
-            <ul class="nav nav-tabs">
-                <li class="nav-item">
-                    <a class={"nav-link" + (tab === 0 ? ' active' : '')} href={"#"}
-                        on:click|preventDefault={() => tab = 0}
-                    >General</a>
-                </li>
-                <li class="nav-item">
-                    <a class={"nav-link" + (tab === 1 ? ' active' : '')} href={"#"}
-                    on:click|preventDefault={() => tab = 1}
-                    >Dispositivos</a>
-                </li>
-                <li class="nav-item">
-                    <a class={"nav-link" + (tab === 2 ? ' active' : '')} href={"#"}
-                        on:click|preventDefault={() => tab = 2}
-                    >Detalle</a>
-                </li>
-                <li class="nav-item">
-                    <a class={"nav-link" + (tab === 3 ? ' active' : '')} href={"#"}
-                        on:click|preventDefault={() => tab = 3}
-                    >Servicios</a>
-                </li>
-            </ul>
-        </nav>
-
-        {#if tab === 0}
-            <FormParadero {parada} />
-        {/if}
-        {#if tab === 1}
-            <FormParaderoDispositivos {parada} />
-        {/if}
-        {#if tab === 2}
-            <FormParaderoDetalle {parada} />
-        {/if}
-        {#if tab === 3}
-            <FormParaderoServicios {parada} />
-        {/if}
-    </div>
-</div>
-
-{#if parada}
-    <div
-        class="offcanvas-backdrop fade show"
-        on:click|preventDefault={() => dispatch("close")}
-        on:keydown={() => {}}
-    />
-{/if}
-
-{#if parada}
-    <style>
-        html {
-            overflow-y: hidden;
-        }
-        .seccion-imagen {
-            position: relative;
-        }
-        .seccion-imagen > a {
-            position: absolute;
-            bottom: 0.5rem;
-            right: 0.5rem;
-        }
-    </style>
-{/if}
diff --git a/src/pages/mapas/FormParadero.svelte b/src/pages/mapas/FormParadero.svelte
index 231c18a..ef764f3 100644
--- a/src/pages/mapas/FormParadero.svelte
+++ b/src/pages/mapas/FormParadero.svelte
@@ -132,3 +132,14 @@
         </div>
     </form>
 </div>
+
+<style>
+    .seccion-imagen {
+        position: relative;
+    }
+    .seccion-imagen > a {
+        position: absolute;
+        bottom: 0.5rem;
+        right: 0.5rem;
+    }
+</style>
diff --git a/src/pages/mapas/OffcanvasParadero.svelte b/src/pages/mapas/OffcanvasParadero.svelte
new file mode 100644
index 0000000..4032e99
--- /dev/null
+++ b/src/pages/mapas/OffcanvasParadero.svelte
@@ -0,0 +1,132 @@
+<script>
+    // imagenes
+    import IconParada from "$/assets/parada-de-autobus.png";
+    // libs
+    import { createEventDispatcher } from "svelte";
+    import FormParadero from "./FormParadero.svelte";
+    import FormParaderoDispositivos from "./FormParaderoDispositivos.svelte";
+    import FormParaderoDetalle from "./FormParaderoDetalle.svelte";
+    import FormParaderoServicios from "./FormParaderoServicios.svelte";
+    const dispatch = createEventDispatcher();
+    export let parada = null;
+    let canvas = null;
+    let tab = 0;
+
+    $: init(!!parada);
+
+    function init(show) {
+        if (!canvas) return;
+        if (show) {
+            canvas.classList.add("show");
+        } else {
+            canvas.classList.remove("show");
+            tab = 0;
+        }
+    }
+</script>
+
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    bind:this={canvas}
+    aria-labelledby="offcanvasParaderoLabel"
+    style="visibility: inherit;"
+>
+    <div class="offcanvas-header d-block pb-0">
+        <div class="d-flex justify-content-between">
+            <h5 class="offcanvas-title text-info" id="offcanvasParaderoLabel">
+                <img src={IconParada} alt="Icono de Paradero" width="64" />
+                Paradero
+            </h5>
+            <button
+                type="button"
+                class="btn-close"
+                aria-label="Close"
+                on:click|preventDefault={() => dispatch("close")}
+            />
+        </div>
+
+        <nav class="mb-0" style="--bs-nav-tabs-link-active-border-color: var(--bs-dark)">
+            <ul class="nav nav-tabs">
+                <li class="nav-item">
+                    <a
+                        class={"nav-link" + (tab === 0 ? " active" : "")}
+                        href={"#"}
+                        on:click|preventDefault={() => (tab = 0)}>
+                        General
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a
+                        class={"nav-link" + (tab === 1 ? " active" : "")}
+                        href={"#"}
+                        on:click|preventDefault={() => (tab = 1)}>
+                        Dispositivos
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a
+                        class={"nav-link" + (tab === 2 ? " active" : "")}
+                        href={"#"}
+                        on:click|preventDefault={() => (tab = 2)}>
+                        Detalle
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a
+                        class={"nav-link" + (tab === 3 ? " active" : "")}
+                        href={"#"}
+                        on:click|preventDefault={() => (tab = 3)}>
+                        Servicios
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+    <div class="offcanvas-body bg-white py-3">
+        {#if tab === 0}
+            <FormParadero {parada} />
+        {/if}
+        {#if tab === 1}
+            <FormParaderoDispositivos {parada} />
+        {/if}
+        {#if tab === 2}
+            <FormParaderoDetalle {parada} />
+        {/if}
+        {#if tab === 3}
+            <FormParaderoServicios {parada} />
+        {/if}
+    </div>
+</div>
+
+{#if parada}
+    <div
+        class="offcanvas-backdrop fade show"
+        on:click|preventDefault={() => dispatch("close")}
+        on:keydown={() => {}}
+    />
+{/if}
+
+{#if parada}
+    <style>
+        html {
+            overflow-y: hidden;
+        }
+        
+        .offcanvas {
+            --bs-offcanvas-width: 500px;
+            --bs-offcanvas-bg: var(--bs-gray-200);
+        }
+
+        .nav-tabs {
+            --bs-nav-tabs-border-color: var(--bs-white);
+            --bs-nav-tabs-border-width: 0;
+        }
+        
+        .nav-tabs .nav-link.active {
+            --bs-nav-tabs-link-active-bg: var(--bs-white);
+            --bs-nav-tabs-link-active-color: var(--bs-secondary);
+            --bs-nav-tabs-link-active-border-color: var(--bs-white);
+        }
+    </style>
+{/if}
diff --git a/src/pages/mapas/Paraderos.svelte b/src/pages/mapas/Paraderos.svelte
index a980932..560b0f2 100644
--- a/src/pages/mapas/Paraderos.svelte
+++ b/src/pages/mapas/Paraderos.svelte
@@ -2,7 +2,7 @@
     // components
     import PageTitle from "$/components/PageTitle.svelte"
     import IconLoading from "$/components/IconLoading.svelte"
-    import CanvasParadero from "./CanvasParadero.svelte"
+    import OffcanvasParadero from "./OffcanvasParadero.svelte"
 
     // services
     import { getRegiones } from "$/services/regiones"
@@ -195,4 +195,4 @@
     </div>
 </div>
 
-<CanvasParadero {parada} on:close={() => parada = null} />
\ No newline at end of file
+<OffcanvasParadero {parada} on:close={() => parada = null} />
\ No newline at end of file