cambio apariencia offcanvas de parada
Francisco Sandoval
parent
9958a53ebe
commit
4f11229f3a
|
|
@ -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}
|
||||
|
|
@ -132,3 +132,14 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.seccion-imagen {
|
||||
position: relative;
|
||||
}
|
||||
.seccion-imagen > a {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
@ -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} />
|
||||
<OffcanvasParadero {parada} on:close={() => parada = null} />
|
||||
Loading…
Reference in New Issue