feat: redesign transport section with improved UX, accessibility, and type safety
- Replace native <select> filters with scrollable chip components (TransportFilterChips) - Add skeleton shimmer loaders for taxi and shuttle cards (TaxiSkeletonCard, ShuttleSkeletonCard) - Add search bar to TaxisLocales to filter by driver name - Horizontal card layout on mobile for ViajesTuristicos, vertical on tablet+ - Add ARIA roles (tablist/tab, list/listitem, switch, alert, status) throughout - Apply hover: hover media query so card hover effects don't trigger on touch - Add prefers-reduced-motion support across all animations and transitions - Add clear-filters button in empty states when filters are active - Fix min-height to use 100dvh instead of 100vh for mobile nav bar - Reduce tab slider animation from 0.5s to 0.32s - Fix tsconfig: noUncheckedSideEffectImports false, add vite-plugin-pwa/client types - Fix AppImage unused parameter warning (_e) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@ -6,7 +6,6 @@ import { useRoute } from 'vue-router'
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
|
||||
// Solo mostrar el header con tabs en las vistas principales
|
||||
const isMainView = computed(() => {
|
||||
return route.name === 'TaxisLocales' || route.name === 'ViajesTuristicos'
|
||||
})
|
||||
@ -18,7 +17,6 @@ const reloadPage = () => {
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// Aquí iría cualquier inicialización global del layout si fuera necesaria
|
||||
console.log('Transporte Hub mounted')
|
||||
} catch (e) {
|
||||
console.error('Error mounting Transporte Hub:', e)
|
||||
@ -31,30 +29,44 @@ onMounted(async () => {
|
||||
<div class="taxi-view">
|
||||
<header v-if="isMainView" class="header-main">
|
||||
<h1 class="brand-title">{{ t('taxi.title') }}</h1>
|
||||
<div class="hub-tabs">
|
||||
<nav class="hub-tabs" role="tablist" :aria-label="t('taxi.title')">
|
||||
<div class="tabs-background">
|
||||
<router-link to="/transporte/taxis" class="hub-tab" active-class="active" exact-active-class="active">
|
||||
<span class="material-icons notranslate" translate="no">local_taxi</span>
|
||||
<router-link
|
||||
to="/transporte/taxis"
|
||||
class="hub-tab"
|
||||
role="tab"
|
||||
:aria-selected="!route.path.includes('viajes-turisticos')"
|
||||
active-class="active"
|
||||
exact-active-class="active"
|
||||
>
|
||||
<span class="material-icons notranslate" translate="no" aria-hidden="true">local_taxi</span>
|
||||
{{ t('taxi.tabLocal') }}
|
||||
</router-link>
|
||||
<router-link to="/transporte/viajes-turisticos" class="hub-tab" active-class="active" :class="{ 'active': route.path.includes('viajes-turisticos') }">
|
||||
<span class="material-icons notranslate" translate="no">directions_bus</span>
|
||||
<router-link
|
||||
to="/transporte/viajes-turisticos"
|
||||
class="hub-tab"
|
||||
role="tab"
|
||||
:aria-selected="route.path.includes('viajes-turisticos')"
|
||||
active-class="active"
|
||||
:class="{ 'active': route.path.includes('viajes-turisticos') }"
|
||||
>
|
||||
<span class="material-icons notranslate" translate="no" aria-hidden="true">directions_bus</span>
|
||||
{{ t('taxi.tabIntercity') }}
|
||||
</router-link>
|
||||
<div class="tab-slider" :class="{ 'slide-right': !route.path.includes('taxis') }"></div>
|
||||
<div class="tab-slider" :class="{ 'slide-right': route.path.includes('viajes-turisticos') }" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div v-if="mountError" class="error-container">
|
||||
<span class="material-icons notranslate" translate="no">error_outline</span>
|
||||
<div v-if="mountError" class="error-container" role="alert">
|
||||
<span class="material-icons notranslate" translate="no" aria-hidden="true">error_outline</span>
|
||||
<p>{{ t('taxi.errorLoading') }}</p>
|
||||
<button @click="reloadPage" class="retry-btn">
|
||||
<span class="material-icons notranslate" translate="no">refresh</span>
|
||||
<span class="material-icons notranslate" translate="no" aria-hidden="true">refresh</span>
|
||||
{{ t('common.retry') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<router-view v-else v-slot="{ Component }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<keep-alive>
|
||||
@ -67,21 +79,21 @@ onMounted(async () => {
|
||||
|
||||
<style scoped>
|
||||
.taxi-view {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
position: relative;
|
||||
padding: 0 0 150px;
|
||||
}
|
||||
|
||||
.header-main {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
color: var(--header-text);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
color: var(--header-text);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Transport Hub Tabs */
|
||||
@ -114,7 +126,7 @@ onMounted(async () => {
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transition: color 0.3s;
|
||||
transition: color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -122,6 +134,13 @@ onMounted(async () => {
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
min-height: 44px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.hub-tab:focus-visible {
|
||||
outline: 2px solid var(--active-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.hub-tab::after {
|
||||
@ -135,7 +154,7 @@ onMounted(async () => {
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: all 0.5s ease;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.hub-tab:active::after {
|
||||
@ -162,7 +181,7 @@ onMounted(async () => {
|
||||
width: calc(50% - 6px);
|
||||
background: #FEE715;
|
||||
border-radius: 12px;
|
||||
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
z-index: 1;
|
||||
box-shadow: 0 4px 20px rgba(254, 231, 21, 0.4);
|
||||
will-change: transform;
|
||||
@ -172,15 +191,31 @@ onMounted(async () => {
|
||||
transform: translateX(calc(100% + 4px));
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.tab-slider {
|
||||
transition: none;
|
||||
}
|
||||
.hub-tab {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.error-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -209,10 +244,16 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: transform 0.2s;
|
||||
transition: transform 0.15s ease;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.retry-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.retry-btn:focus-visible {
|
||||
outline: 2px solid var(--active-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user