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

Refactor(transporte): remover íconos de filtros y hacerlos más compactos lado a lado

Browse Source
This commit is contained in:
Johan Samudio
2026-03-22 10:38:53 -05:00
parent 7f5efdacfa
commit 269691c900
2 changed files with 20 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,9 +66,6 @@ onUnmounted(() => {
<div class="selectors-side">
<!-- Ruta Select -->
<div class="select-group-premium">
<div class="group-icon">
<span class="material-icons">route</span>
</div>
<div class="group-content">
<label>{{ t('shuttle.category') || 'Categoría' }}</label>
<select v-model="shuttleCategoryFilter">
@ -81,9 +78,6 @@ onUnmounted(() => {
<!-- Tipo de Viaje Select -->
<div class="select-group-premium">
<div class="group-icon">
<span class="material-icons">sync_alt</span>
</div>
<div class="group-content">
<label>{{ t('shuttle.tripType') }}</label>
<select v-model="shuttleTypeFilter">
@ -192,33 +186,27 @@ onUnmounted(() => {
}
.filter-card {
border-radius: 1.5rem;
padding: 1.25rem;
border-radius: 1rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
background: var(--card-bg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.selectors-side {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) {
.selectors-side {
grid-template-columns: 1fr 1fr;
}
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.select-group-premium {
display: flex;
align-items: center;
gap: 0.875rem;
gap: 0.5rem;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 0.625rem 0.875rem;
border-radius: 0.75rem;
padding: 0.5rem 0.75rem;
transition: all 0.3s ease;
}
@ -226,17 +214,6 @@ onUnmounted(() => {
border-color: var(--active-color);
}
.group-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--bg-secondary);
border-radius: 0.75rem;
color: var(--active-color);
}
.group-content {
flex: 1;
display: flex;