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

feat: align and enlarge top stop banner and fix X functionality

Browse Source
This commit is contained in:
Johan Samudio
2026-02-28 00:33:57 -05:00
parent 8ad7cd772f
commit 62ff09b6a0
1 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -116,6 +116,7 @@ async function clearAllMapData() {
destinationQuery.value = "";
stopSearchQuery.value = "";
showETACard.value = false;
paradaCercana.value = null; // Borrar banner superior
// 2. Invalidar hilos en curso
mappingSequenceId.value++;
@ -767,25 +768,8 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
</div>
</div>
<!-- Banner de Parada Más Cercana Inteligente (Chip Compacto) -->
<div
v-if="paradaCercana && routeStore.selectedRouteId && !showETACard"
class="fixed z-[1050] px-3 transition-all duration-300 pointer-events-none"
:style="{ top: (alturaNavbar + 8) + 'px', right: '16px' }"
>
<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-[10px] text-gray-500 whitespace-nowrap">
{{ (distanciaMetros && distanciaMetros < 1000) ? Math.round(distanciaMetros) + 'm' : (distanciaMetros ? (distanciaMetros / 1000).toFixed(1) + 'km' : '') }}
</span>
<button @click="clearAllMapData" class="text-gray-400 hover:text-gray-600 shrink-0 p-0.5 ml-1">
<span class="material-icons" style="font-size:14px">close</span>
</button>
</div>
</div>
<!-- Banner de Parada Más Cercana (Movido a triggers-row para alineación) -->
<!-- Comentado fuera de aquí, lo pondremos abajo -->
<div class="map-container">
<!-- Floating Offers Button at exact location -->
@ -854,7 +838,24 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
@click="openUberSearch"
>
<span class="material-icons search-icon">directions_bus</span>
<span class="trigger-text">Ver Rutas</span>
</div>
<!-- Nuevo Banner de Parada Cercana Alineado -->
<div
v-if="paradaCercana && routeStore.selectedRouteId && !showETACard"
class="uber-search-trigger best-stop-banner"
>
<span class="material-icons text-yellow-500 mr-3">directions_bus</span>
<div class="flex flex-col flex-1 truncate">
<span class="text-[10px] uppercase font-bold text-yellow-500 leading-tight">Parada cercana</span>
<span class="trigger-text truncate leading-tight">{{ paradaCercana?.name }}</span>
</div>
<div class="text-[11px] font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-lg ml-2 whitespace-nowrap">
{{ (distanciaMetros && distanciaMetros < 1000) ? Math.round(distanciaMetros) + 'm' : (distanciaMetros ? (distanciaMetros / 1000).toFixed(1) + 'km' : '') }}
</div>
<button @click.stop="clearAllMapData" class="ml-3 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
<span class="material-icons text-[20px] text-gray-400 hover:text-red-500">close</span>
</button>
</div>
</div>
@ -1480,6 +1481,14 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
letter-spacing: -0.01em;
}
.best-stop-banner {
flex: 1; /* Ocupa el espacio restante al lado de la búsqueda circular */
background: var(--header-bg);
border: 1px solid var(--border-color);
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
max-width: none;
}
.uber-search-panel {
position: fixed;
top: 70px; /* Debajo del header superior */