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

refactor: replace chip filters with compact dropdown menus in transport section

Browse Source 
Filters now occupy a single compact row instead of multiple chip rows,
giving more vertical space to taxi and shuttle cards.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Johan Samudio
2026-04-04 17:59:40 -05:00
parent 5c1b62f55a
commit dc007b24ce
3 changed files with 244 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/views/transporte/ViajesTuristicos.vue
View File

@ -7,7 +7,7 @@ import AuthGuard from '@/components/common/AuthGuard.vue'
import AppImage from '@/components/AppImage.vue'
import { analyticsService } from '@/services/analyticsService'
import ShuttleSkeletonCard from '@/components/transporte/ShuttleSkeletonCard.vue'
import TransportFilterChips from '@/components/transporte/TransportFilterChips.vue'
import TransportFilterSelect from '@/components/transporte/TransportFilterSelect.vue'
const { t } = useI18n()
const shuttleStore = useShuttleStore()
@ -81,22 +81,14 @@ onUnmounted(() => {
<div class="viajes-turisticos">
<!-- FILTERS -->
<div class="filters-wrap">
<div class="filter-section">
<span class="filter-label">{{ t('shuttle.category') }}</span>
<TransportFilterChips
v-model="shuttleCategoryFilter"
:options="categoryOptions"
:label="t('shuttle.category')"
/>
</div>
<div class="filter-section">
<span class="filter-label">{{ t('shuttle.tripType') }}</span>
<TransportFilterChips
v-model="shuttleTypeFilter"
:options="typeOptions"
:label="t('shuttle.tripType')"
/>
</div>
<TransportFilterSelect
v-model="shuttleCategoryFilter"
:options="categoryOptions"
/>
<TransportFilterSelect
v-model="shuttleTypeFilter"
:options="typeOptions"
/>
</div>
<!-- LOADING SKELETONS -->
@ -197,24 +189,11 @@ onUnmounted(() => {
/* FILTERS */
.filters-wrap {
padding: 0 1rem 1rem;
padding: 0 1rem 0.75rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.filter-section {
display: flex;
flex-direction: column;
flex-direction: row;
gap: 0.5rem;
}
.filter-label {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
flex-wrap: wrap;
}
/* GRID — single column on mobile, 2-col on tablet, 3-col on desktop */