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

fix(ui): Adjust bottom nav padding, fix router scroll, keep session on PWA, and add ETA loading state

Browse Source
This commit is contained in:
Johan Samudio
2026-03-12 13:53:56 -05:00
parent 512711ecf5
commit 1d3f0ce2fa
4 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/auth/LoginForm.vue
View File

@ -11,7 +11,7 @@ const authStore = useAuthStore()
const email = ref('') const email = ref('')
const password = ref('') const password = ref('')
const keepSession = ref(false) const keepSession = ref(true)
const isLoading = ref(false) const isLoading = ref(false)
const errorMessage = ref('') const errorMessage = ref('')
const showPassword = ref(false) const showPassword = ref(false)

6
frontend/src/components/map/ETACard.vue
View File

@ -28,7 +28,7 @@
</p> </p>
<!-- Cabecera de la parada --> <!-- Cabecera de la parada -->
<div v-if="stopName" class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800"> <div v-if="stopName && !isLoading" class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
<div class="bg-blue-100 dark:bg-blue-900/40 p-3 rounded-2xl flex-shrink-0"> <div class="bg-blue-100 dark:bg-blue-900/40 p-3 rounded-2xl flex-shrink-0">
<span class="material-icons text-blue-600 dark:text-blue-400 text-3xl">place</span> <span class="material-icons text-blue-600 dark:text-blue-400 text-3xl">place</span>
</div> </div>
@ -51,7 +51,9 @@
<!-- Estado de carga --> <!-- Estado de carga -->
<div v-if="isLoading" class="flex flex-col items-center justify-center py-8"> <div v-if="isLoading" class="flex flex-col items-center justify-center py-8">
<div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div> <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
<span class="mt-4 text-gray-500 dark:text-gray-400 font-medium animate-pulse">Calculando satélites...</span> <span class="mt-4 text-gray-500 dark:text-gray-400 font-medium animate-pulse">
{{ stopName ? 'Calculando llegada...' : 'Cargando datos de ruta...' }}
</span>
</div> </div>
<!-- Sin servicio --> <!-- Sin servicio -->

7
frontend/src/router/index.ts
View File

@ -5,6 +5,13 @@ import { useAuthStore } from '@/stores/auth'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
scrollBehavior(_to, _from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { top: 0 };
}
},
routes: [ routes: [
// ─── Vistas Públicas Core ─────────────────────────────────────────── // ─── Vistas Públicas Core ───────────────────────────────────────────
{ {

8
frontend/src/views/MapView.vue
View File

@ -701,7 +701,7 @@ watch([() => authStore.userProfile?.auto_location, isLoaded], ([canLocate, loade
:walk-distance="distanciaMetros" :walk-distance="distanciaMetros"
:walk-duration="duracionCaminata" :walk-duration="duracionCaminata"
:buses="busesActivos" :buses="busesActivos"
:is-loading="etaCargando" :is-loading="etaCargando || isUpdatingMarkers || flujoCargando"
@close="handleETACardDismiss" @close="handleETACardDismiss"
@refresh="paradaCercana && routeStore.selectedRouteId ? calcularETA(routeStore.selectedRouteId, paradaCercana) : null" @refresh="paradaCercana && routeStore.selectedRouteId ? calcularETA(routeStore.selectedRouteId, paradaCercana) : null"
/> />
@ -751,7 +751,7 @@ watch([() => authStore.userProfile?.auto_location, isLoaded], ([canLocate, loade
.map-floating-controls { .map-floating-controls {
position: fixed; position: fixed;
bottom: 85px; bottom: calc(95px + var(--safe-area-bottom));
right: 16px; right: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -865,6 +865,8 @@ watch([() => authStore.userProfile?.auto_location, isLoaded], ([canLocate, loade
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.map-floating-controls { bottom: 100px; } .map-floating-controls {
bottom: calc(100px + var(--safe-area-bottom));
}
} }
</style> </style>