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

Fix UI overlapping, transport load error handling, and schedule filtering bugs

Browse Source
This commit is contained in:
Johan Samudio
2026-02-27 20:22:29 -05:00
parent 7c800a0551
commit a2d317d1bc
5 changed files with 171 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -807,24 +807,22 @@ function calculateWalkingPath(origin: { lat: number, lng: number }, targetStop:
</div>
</div>
<!-- Banner de Parada Más Cercana Inteligente -->
<!-- Banner de Parada Más Cercana Inteligente (Chip Compacto) -->
<div
v-if="paradaCercana && routeStore.selectedRouteId && !showETACard"
class="fixed left-0 right-0 z-40 px-3 transition-transform duration-300 pointer-events-none"
:style="{ top: alturaNavbar + 'px' }"
class="fixed z-[1050] px-3 transition-all duration-300 pointer-events-none"
:style="{ top: (alturaNavbar + 8) + 'px', right: '16px' }"
>
<!-- Solo mostrar cuando ETACard está CERRADO -->
<!-- v-if agrega condición: && !showETACard -->
<div class="bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm rounded-b-2xl shadow-lg border-t-2 border-yellow-400 px-4 py-2 flex items-center gap-2 pointer-events-auto">
<span class="material-icons text-yellow-500 text-sm">directions_bus</span>
<span class="text-sm font-bold text-gray-800 dark:text-white truncate flex-1">
<div class="bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm rounded-2xl shadow-lg border border-yellow-400/50 px-3 py-1.5 flex items-center gap-2 max-w-[220px] pointer-events-auto">
<span class="material-icons text-yellow-500" style="font-size:16px">directions_bus</span>
<span class="text-xs font-bold text-gray-800 dark:text-white truncate flex-1">
{{ paradaCercana?.name }}
</span>
<span class="text-xs text-gray-500 whitespace-nowrap">
<span class="text-[10px] text-gray-500 whitespace-nowrap">
{{ (distanciaMetros && distanciaMetros < 1000) ? Math.round(distanciaMetros) + 'm' : (distanciaMetros ? (distanciaMetros / 1000).toFixed(1) + 'km' : '') }}
</span>
<button @click="paradaCercana = null" class="text-gray-400 hover:text-gray-600 shrink-0 p-0.5 ml-1">
<span class="material-icons text-sm">close</span>
<span class="material-icons" style="font-size:14px">close</span>
</button>
</div>
</div>
@ -1252,7 +1250,8 @@ function calculateWalkingPath(origin: { lat: number, lng: number }, targetStop:
═══════════════════════════════════════ */
.offers-sheet {
position: fixed;
bottom: 110px; /* Separado más de la barra inferior para evitar solapamiento */
/* Base 72px (altura menú) + 16px espacio visual + safe area */
bottom: calc(72px + 16px + env(safe-area-inset-bottom, 0px));
left: 10px;
right: 10px;
background: #fff;
@ -1262,6 +1261,9 @@ function calculateWalkingPath(origin: { lat: number, lng: number }, targetStop:
padding-bottom: 10px;
box-shadow: 0 -4px 15px rgba(0,0,0,0.2);
color: #000;
/* Limitar altura máxima para no ocupar toda la pantalla */
max-height: calc(100vh - 200px);
overflow-y: auto;
}
@media (prefers-color-scheme: dark) {
@ -1272,6 +1274,15 @@ function calculateWalkingPath(origin: { lat: number, lng: number }, targetStop:
}
}
@media (max-width: 900px) {
.offers-sheet {
/* En móvil más espacio aún por el menú nativo */
bottom: calc(80px + env(safe-area-inset-bottom, 0px));
left: 8px;
right: 8px;
}
}
.sheet-handle {
width: 40px;
height: 4px;
@ -2137,4 +2148,14 @@ function calculateWalkingPath(origin: { lat: number, lng: number }, targetStop:
left: 15px;
z-index: 10;
}
.map-floating-controls {
position: fixed;
/* Subir los botones FAB cuando el carrusel está abierto */
bottom: 85px;
right: 16px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 12px;
}
</style>