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

fix: improve route visibility and lift offers banner

Browse Source
This commit is contained in:
Johan Samudio
2026-02-27 22:40:16 -05:00
parent 8e75f24b1e
commit 1cd83f5fb3
3 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/composables/useDirectionsRoute.ts
View File

@ -35,7 +35,7 @@ export function useDirectionsRoute() {
return; return;
} }
limpiarRuta(); // NOTA: No llamamos a limpiarRuta() aquí para poder encadenar llamadas (dibujar fondo + trazado activo)
estasCargando.value = true; estasCargando.value = true;
errorRuta.value = null; errorRuta.value = null;
@ -98,9 +98,9 @@ export function useDirectionsRoute() {
const polyline = new google.maps.Polyline({ const polyline = new google.maps.Polyline({
path: path, path: path,
map: map, map: map,
strokeColor: isPast ? '#FDE68A' : '#FBBF24', strokeColor: isPast ? '#9CA3AF' : '#FBBF24', // Gris para lo lejano, Amarillo para lo cercano
strokeWeight: isPast ? 3 : 5, strokeWeight: isPast ? 4 : 6,
strokeOpacity: isPast ? 0.4 : 0.95, strokeOpacity: isPast ? 0.6 : 1.0,
icons: isPast ? [{ icons: isPast ? [{
icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 2 }, icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 2 },
offset: '0', offset: '0',

10
frontend/src/composables/useFlujoPrincipal.ts
View File

@ -82,8 +82,14 @@ export const useFlujoPrincipal = () => {
return; return;
} }
// ── PASO 5: Dibujar tramo relevante (azul vivo) ─────── // ── PASO 5: Dibujar tramo relevante (Amarillo Vivo) ───────
const idx = paradasFormateadas.findIndex(p => p.longitud === paradaCercanaFound.longitude && p.latitud === paradaCercanaFound.latitude) // Usar una comparación más robusta que incluya proximidad o nombre
const idx = paradasFormateadas.findIndex(p => {
const samePos = Math.abs(p.longitud - paradaCercanaFound.longitude) < 0.0001 &&
Math.abs(p.latitud - paradaCercanaFound.latitude) < 0.0001;
return samePos || p.nombre === paradaCercanaFound.name;
});
if (idx !== -1) { if (idx !== -1) {
const tramoRelevante = paradasFormateadas.slice(idx) const tramoRelevante = paradasFormateadas.slice(idx)
if (tramoRelevante.length > 1) { if (tramoRelevante.length > 1) {

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

@ -1209,8 +1209,8 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
═══════════════════════════════════════ */ ═══════════════════════════════════════ */
.offers-sheet { .offers-sheet {
position: fixed; position: fixed;
/* Base 72px (altura menú) + 16px espacio visual + safe area */ /* Base 72px (altura menú) + 40px espacio visual + safe area */
bottom: calc(72px + 16px + env(safe-area-inset-bottom, 0px)); bottom: calc(72px + 40px + env(safe-area-inset-bottom, 0px));
left: 10px; left: 10px;
right: 10px; right: 10px;
background: #fff; background: #fff;
@ -1236,7 +1236,7 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
@media (max-width: 900px) { @media (max-width: 900px) {
.offers-sheet { .offers-sheet {
/* En móvil más espacio aún por el menú nativo */ /* En móvil más espacio aún por el menú nativo */
bottom: calc(80px + env(safe-area-inset-bottom, 0px)); bottom: calc(100px + env(safe-area-inset-bottom, 0px));
left: 8px; left: 8px;
right: 8px; right: 8px;
} }