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

Refactor: Map UI improvements, ETA metrics, Schedule fixes, and Transport Detail styling

Browse Source
This commit is contained in:
Johan Samudio
2026-02-28 10:39:20 -05:00
parent 8d967814f9
commit 621da9e4c3
4 changed files with 163 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/views/transporte/ShuttleDetalle.vue
View File

@ -54,13 +54,13 @@ const volver = () => {
</script>
<template>
<div class="shuttle-detalle-container bg-surface pb-24 min-h-screen relative">
<!-- Header con botón volver -->
<div class="sticky top-0 z-10 bg-surface border-b border-border flex items-center gap-3 px-4 py-3 shadow-sm" style="padding-top: max(env(safe-area-inset-top), 12px);">
<button @click="volver" class="p-2 rounded-full hover:bg-hover flex items-center justify-center transition">
<span class="material-icons text-text-primary">arrow_back</span>
<div class="shuttle-detalle-container bg-[var(--bg-primary)] pb-24 min-h-screen relative">
<!-- Header con botón volver (Solid background to avoid overlap on scroll) -->
<div class="sticky top-0 z-50 bg-[var(--bg-primary)] border-b border-border flex items-center gap-3 px-4 py-3 shadow-md" style="padding-top: max(env(safe-area-inset-top), 12px);">
<button @click="volver" class="p-2 rounded-full hover:bg-[var(--hover-bg)] flex items-center justify-center transition">
<span class="material-icons text-[var(--text-primary)]">arrow_back</span>
</button>
<h1 class="font-bold text-text-primary text-lg truncate flex-1">
<h1 class="font-bold text-[var(--text-primary)] text-lg truncate flex-1">
{{ shuttle?.company_name || 'Detalle del viaje' }}
</h1>
</div>
@ -90,32 +90,32 @@ const volver = () => {
class="w-full h-full object-cover"
@error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'shuttle')"
/>
<div class="absolute bottom-3 left-3 bg-surface/90 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-bold shadow-sm flex items-center gap-1">
<div class="absolute bottom-3 left-3 bg-[var(--bg-primary)]/90 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-bold shadow-sm flex items-center gap-1">
<span class="material-icons text-sm" style="color: var(--active-color)">directions_bus</span>
{{ shuttle.vehicle_type }}
</div>
</div>
<!-- Rutas Origen - Destino prominente -->
<div class="bg-surface rounded-2xl p-5 shadow-sm space-y-3 border border-border">
<div class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-3 border border-border">
<div class="flex items-center justify-between">
<div class="flex flex-col flex-1">
<span class="text-xs text-text-tertiary font-semibold mb-1 uppercase tracking-wider">Origen</span>
<span class="font-bold text-text-primary text-lg leading-tight break-words">
<span class="text-xs text-[var(--text-secondary)] font-semibold mb-1 uppercase tracking-wider">Origen</span>
<span class="font-bold text-[var(--text-primary)] text-lg leading-tight break-words">
{{ shuttle.origin }}
</span>
</div>
<div class="flex flex-col items-center px-4 shrink-0">
<span class="text-xs text-text-secondary font-bold mb-1">{{ shuttle.estimated_duration }}</span>
<span class="text-xs text-[var(--text-secondary)] font-bold mb-1">{{ shuttle.estimated_duration }}</span>
<div class="w-16 border-t-2 border-dashed border-border relative my-1">
<span class="material-icons absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-text-secondary bg-surface px-1 text-sm">east</span>
<span class="material-icons absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[var(--text-secondary)] bg-[var(--bg-secondary)] px-1 text-sm">east</span>
</div>
</div>
<div class="flex flex-col flex-1 text-right">
<span class="text-xs text-text-tertiary font-semibold mb-1 uppercase tracking-wider">Destino</span>
<span class="font-bold text-text-primary text-lg leading-tight break-words">
<span class="text-xs text-[var(--text-secondary)] font-semibold mb-1 uppercase tracking-wider">Destino</span>
<span class="font-bold text-[var(--text-primary)] text-lg leading-tight break-words">
{{ shuttle.destination }}
</span>
</div>
@ -123,28 +123,28 @@ const volver = () => {
</div>
<!-- Info principal -->
<div class="bg-surface rounded-2xl p-5 shadow-sm space-y-4 border border-border">
<div class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-4 border border-border">
<div>
<h2 class="text-xl font-bold text-text-primary">{{ shuttle.company_name }}</h2>
<p class="text-text-secondary text-sm mt-1 leading-relaxed" v-if="shuttle.description" style="white-space: pre-wrap;">{{ shuttle.description }}</p>
<h2 class="text-xl font-bold text-[var(--text-primary)]">{{ shuttle.company_name }}</h2>
<p class="text-[var(--text-secondary)] text-sm mt-1 leading-relaxed" v-if="shuttle.description" style="white-space: pre-wrap;">{{ shuttle.description }}</p>
</div>
<div class="grid grid-cols-2 gap-4 pt-4 border-t border-border">
<div class="flex flex-col gap-1">
<span class="text-xs text-text-tertiary uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">schedule</span> Hora de salida</span>
<span class="font-semibold text-text-primary bg-bg-secondary p-2 rounded-lg text-sm text-center border border-border">
<span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">schedule</span> Hora de salida</span>
<span class="font-semibold text-[var(--text-primary)] bg-[var(--bg-primary)] p-2 rounded-lg text-sm text-center border border-border">
{{ shuttle.departure_times }}
</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-xs text-text-tertiary uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">swap_horiz</span> Tipo de viaje</span>
<span class="font-semibold text-text-primary bg-bg-secondary p-2 rounded-lg text-sm text-center border border-border capitalize">
<span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">swap_horiz</span> Tipo de viaje</span>
<span class="font-semibold text-[var(--text-primary)] bg-[var(--bg-primary)] p-2 rounded-lg text-sm text-center border border-border capitalize">
{{ shuttle.trip_type.replace('_', ' ') }}
</span>
</div>
<div class="flex flex-col gap-1" v-if="shuttle.english_speaking">
<span class="text-xs text-text-tertiary uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">g_translate</span> Idiomas</span>
<span class="font-semibold text-text-primary bg-bg-secondary p-2 rounded-lg text-sm text-center border border-border">
<span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">g_translate</span> Idiomas</span>
<span class="font-semibold text-[var(--text-primary)] bg-[var(--bg-primary)] p-2 rounded-lg text-sm text-center border border-border">
Español · English
</span>
</div>
@ -167,10 +167,10 @@ const volver = () => {
</div>
<!-- Contacto -->
<div class="bg-surface rounded-2xl p-5 shadow-sm space-y-4 border border-border mb-8">
<div class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-4 border border-border mb-8">
<div>
<h3 class="font-bold text-text-primary text-lg">Reserva e Información</h3>
<p class="text-sm text-text-secondary mt-1">Contacta directamente al operador para confirmar disponibilidad.</p>
<h3 class="font-bold text-[var(--text-primary)] text-lg">Reserva e Información</h3>
<p class="text-sm text-[var(--text-secondary)] mt-1">Contacta directamente al operador para confirmar disponibilidad.</p>
</div>
<div class="flex flex-col gap-3">
@ -186,7 +186,7 @@ const volver = () => {
<a v-if="shuttle.phone_number"
:href="`tel:${shuttle.phone_number}`"
class="flex justify-center items-center gap-2 p-3.5 bg-bg-secondary text-text-primary rounded-xl font-bold hover:bg-hover transition active:scale-95 border border-border"
class="flex justify-center items-center gap-2 p-3.5 bg-[var(--bg-primary)] text-[var(--text-primary)] rounded-xl font-bold hover:bg-[var(--hover-bg)] transition active:scale-95 border border-border"
@click="analyticsService.logEvent({ event_name: 'shuttle_contact', item_id: shuttle.id, properties: { action: 'call' } })"
>
<span class="material-icons">phone_in_talk</span>