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

Fix layout overflow in stop banner and center offers sheet

Browse Source
This commit is contained in:
Johan Samudio
2026-03-01 09:32:55 -05:00
parent c29b8074e6
commit 8f586b47f5
1 changed files with 14 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -601,7 +601,7 @@ async function highlightOptimalStopForRoute() {
<div id="map" class="map" :style="{ display: isLoaded ? 'block' : 'none' }"></div> <div id="map" class="map" :style="{ display: isLoaded ? 'block' : 'none' }"></div>
<!-- Floating UI Elements --> <!-- Floating UI Elements -->
<div class="map-floating-controls" :class="{ 'sheet-open': showPromos && couponStore.coupons.length > 0 }"> <div class="map-floating-controls">
<!-- Botón de Ofertas (FAB Simple) --> <!-- Botón de Ofertas (FAB Simple) -->
<button <button
v-if="isLoaded && !showPromos" v-if="isLoaded && !showPromos"
@ -661,7 +661,7 @@ async function highlightOptimalStopForRoute() {
<span class="material-icons text-white text-[16px]">directions_bus</span> <span class="material-icons text-white text-[16px]">directions_bus</span>
</div> </div>
<div class="flex flex-col flex-1 truncate ml-2"> <div class="flex flex-col flex-1 truncate ml-2" style="min-width: 0;">
<span class="text-[9px] uppercase font-bold text-gray-500 dark:text-gray-400 leading-none">Tiempo de llegada</span> <span class="text-[9px] uppercase font-bold text-gray-500 dark:text-gray-400 leading-none">Tiempo de llegada</span>
<span class="trigger-text-compact truncate leading-tight">{{ paradaCercana?.name }}</span> <span class="trigger-text-compact truncate leading-tight">{{ paradaCercana?.name }}</span>
</div> </div>
@ -945,12 +945,11 @@ async function highlightOptimalStopForRoute() {
═══════════════════════════════════════ */ ═══════════════════════════════════════ */
.offers-sheet { .offers-sheet {
position: fixed; position: fixed;
left: 0; top: 50%;
right: 0; left: 50%;
bottom: 85px; transform: translate(-50%, -50%);
margin: 0 auto;
width: calc(100% - 32px); width: calc(100% - 32px);
max-width: 500px; max-width: 420px;
background: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
@ -1322,16 +1321,18 @@ html.light-theme .uber-search-trigger-compact {
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: 40px; /* Más compacto (de 44px a 40px) */ height: 40px;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 10px; padding: 0 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
max-width: none; max-width: 100%;
overflow: hidden;
pointer-events: auto; pointer-events: auto;
z-index: 1200; z-index: 1200;
min-width: 0;
} }
/* Animaciones del Banner (Slide de arriba hacia abajo, muy fluido) */ /* Animaciones del Banner (Slide de arriba hacia abajo, muy fluido) */
@ -1578,10 +1579,6 @@ html.light-theme .uber-search-trigger-compact {
transition: bottom 0.6s cubic-bezier(0.32, 0.72, 0, 1); transition: bottom 0.6s cubic-bezier(0.32, 0.72, 0, 1);
} }
.map-floating-controls.sheet-open {
bottom: 300px; /* Sube para dejar espacio a las ofertas */
}
.promos-badge-wrapper { .promos-badge-wrapper {
cursor: pointer; cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@ -1695,16 +1692,16 @@ html.light-theme .uber-search-trigger-compact {
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(254, 231, 21, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(254, 231, 21, 0); }
} }
/* Bottom sheet transition - Fluid Slide Up/Down */ /* Center sheet transition - Fluid Pop */
.sheet-slide-enter-active { .sheet-slide-enter-active {
transition: all 0.6s cubic-bezier(0.32, 0.72, 0, 1); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
} }
.sheet-slide-leave-active { .sheet-slide-leave-active {
transition: all 0.5s cubic-bezier(0.32, 0.72, 0, 1); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
} }
.sheet-slide-enter-from, .sheet-slide-enter-from,
.sheet-slide-leave-to { .sheet-slide-leave-to {
transform: translateY(120%) scale(0.95); transform: translate(-50%, -40%) scale(0.85); /* Emerge ligeramente desde abajo hacia el centro */
opacity: 0; opacity: 0;
} }