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

style: rediseñar disparador de rutas para ser compacto y adaptativo

Browse Source
This commit is contained in:
Johan Samudio
2026-02-28 01:02:36 -05:00
parent 62ff09b6a0
commit 8d967814f9
1 changed files with 50 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -831,13 +831,14 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
<span class="material-icons">search</span> <span class="material-icons">search</span>
</div> </div>
<!-- Normal Trigger --> <!-- Normal Trigger: Compacto con texto -->
<div <div
v-else v-else
class="uber-search-trigger" class="uber-search-trigger-compact"
@click="openUberSearch" @click="openUberSearch"
> >
<span class="material-icons search-icon">directions_bus</span> <span class="material-icons search-icon">directions_bus</span>
<span class="trigger-label">ver rutas</span>
</div> </div>
<!-- Nuevo Banner de Parada Cercana Alineado --> <!-- Nuevo Banner de Parada Cercana Alineado -->
@ -1416,24 +1417,65 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
background: var(--header-bg); background: var(--header-bg);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
height: 56px; height: 44px; /* Tamaño compacto ajustado */
border-radius: 18px; border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 20px; padding: 0 16px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
cursor: pointer; cursor: pointer;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%; /* Take full width of container */ width: 100%;
max-width: 500px; max-width: 500px;
} }
.uber-search-trigger-compact {
background: var(--active-color) !important;
color: #101820 !important; /* Texto oscuro para el amarillo SIBU */
height: 44px; /* Tamaño del logo / botones header */
border-radius: 12px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
cursor: pointer;
border: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
width: fit-content;
pointer-events: auto;
}
/* En modo claro, el botón es azul, usamos texto blanco */
html.light-theme .uber-search-trigger-compact {
color: #ffffff !important;
}
.uber-search-trigger-compact:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.uber-search-trigger-compact .search-icon {
margin: 0;
font-size: 20px;
color: inherit !important;
}
.trigger-label {
font-size: 0.9rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
}
.uber-search-trigger.circular { .uber-search-trigger.circular {
width: 60px; width: 44px; /* Mantener cuadrado */
padding: 0; padding: 0;
justify-content: center; justify-content: center;
border-radius: 20px; border-radius: 12px;
} }
.triggers-row { .triggers-row {