Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: limit to 2 routes and add slide animations to ETA card and banner

Browse Source
This commit is contained in:
Johan Samudio
2026-02-28 12:00:38 -05:00
parent 621da9e4c3
commit 25008054b3
2 changed files with 64 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/ETACard.vue
View File

@ -1,5 +1,6 @@
<template>
<div v-if="isOpen" class="fixed inset-x-0 bottom-0 z-[9999] sm:max-w-md sm:mx-auto">
<Transition name="sheet-ui">
<div v-if="isOpen" class="fixed inset-x-0 bottom-0 z-[9999] sm:max-w-md sm:mx-auto">
<!-- Overlay transparente oscuro en fondo -->
<div class="fixed inset-0 bg-black/40 transition-opacity" @click="closeCard"></div>
@ -60,10 +61,10 @@
<p class="text-sm text-gray-500 dark:text-gray-400">No hay buses en ruta para hoy en esta línea.</p>
</div>
<!-- Lista de llegadas (Max 3) -->
<!-- Lista de llegadas (Max 2) -->
<template v-else>
<div
v-for="(bus, index) in buses"
v-for="(bus, index) in buses.slice(0, 2)"
:key="bus.horario_id"
class="group bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-4 flex items-center justify-between"
:class="{ 'ring-2 ring-green-500/50 dark:ring-green-400/50 bg-green-50/30 dark:bg-green-900/10': bus.estado === 'en_camino' }"
@ -134,6 +135,7 @@
</div>
</div>
</div>
</Transition>
</template>
<script setup lang="ts">
@ -214,11 +216,26 @@ onUnmounted(() => {
</script>
<style scoped>
/* Transición extra refinada a lo material you */
.translate-y-full {
transform: translateY(100%);
/* Transición de entrada/salida (Slide up de abajo hacia arriba) */
.sheet-ui-enter-active,
.sheet-ui-leave-active {
transition: all 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.translate-y-0 {
transform: translateY(0%);
.sheet-ui-enter-from,
.sheet-ui-leave-to {
transform: translateY(100%);
opacity: 0;
}
.sheet-ui-enter-to,
.sheet-ui-leave-from {
transform: translateY(0);
opacity: 1;
}
/* Transición extra para el overlay */
.fixed.inset-0 {
transition: opacity 0.4s ease;
}
</style>