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

Fix: Map offers button design, bottom nav cleanup, sidebar theme toggle simplification, and tourist trip auto-scroll animation

Browse Source
This commit is contained in:
Johan Samudio
2026-02-24 13:02:19 -05:00
parent 6d4f50cafb
commit c4046541a5
6 changed files with 126 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -921,18 +921,19 @@ function clearNavigation() {
<!-- Floating UI Elements -->
<div class="map-floating-controls">
<!-- Promos FAB Button -->
<!-- Botón de Ofertas (FAB Simple) -->
<button
v-if="isLoaded && couponStore.coupons.length > 0"
class="offers-fab"
:class="{ 'offers-fab--open': showPromos }"
v-if="isLoaded"
class="offers-fab pulse"
:class="{ 'active': showPromos }"
@click="showPromos = !showPromos"
title="Ver Ofertas"
>
<span class="material-icons offers-fab-icon">
<span class="material-icons">
{{ showPromos ? 'close' : 'local_offer' }}
</span>
<span v-if="!showPromos" class="offers-fab-badge">{{ couponStore.coupons.length }}</span>
<span v-if="couponStore.coupons.length > 0 && !showPromos" class="offers-badge">
{{ couponStore.coupons.length }}
</span>
</button>
<!-- Location Button (Animated Pin) -->
@ -1105,14 +1106,14 @@ function clearNavigation() {
<!-- Handle -->
<div class="sheet-handle"></div>
<!-- Header -->
<!-- Cabecera -->
<div class="sheet-header">
<div class="sheet-header-left">
<span class="material-icons sheet-star">stars</span>
<span class="sheet-title">Ofertas SIBU</span>
<span class="sheet-count-badge">{{ couponStore.coupons.length }} disponibles</span>
<div class="sheet-title-group">
<span class="material-icons">local_offer</span>
<strong>Ofertas Disponibles</strong>
<span class="sheet-count">({{ couponStore.coupons.length }})</span>
</div>
<button class="sheet-close" @click="showPromos = false">
<button class="close-btn" @click="showPromos = false">
<span class="material-icons">close</span>
</button>
</div>
@ -1239,54 +1240,42 @@ function clearNavigation() {
}
/* ═══════════════════════════════════════
OFFERS FAB BUTTON
BOTÓN DE OFERTAS (MAPA)
Mantenido simple y funcional
No premiun - solo funcional
═══════════════════════════════════════ */
.offers-fab {
position: relative;
width: 52px;
height: 52px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--active-color);
color: #101820;
background: #fee715;
color: #000;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 20px rgba(254, 231, 21, 0.45);
transition: transform 0.2s, box-shadow 0.2s;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
position: relative;
z-index: 1001;
}
.offers-fab:hover { transform: scale(1.08); }
.offers-fab:active { transform: scale(0.96); }
.offers-fab--open {
background: var(--bg-secondary);
color: var(--text-primary);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
border: 1px solid var(--border-color);
.offers-fab.active {
background: #f44336;
color: #fff;
}
.offers-fab-icon { font-size: 1.5rem; transition: color 0.2s; }
.offers-fab-badge {
.offers-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 4px;
background: #ef4444;
color: #ffffff;
font-size: 0.625rem;
font-weight: 800;
border-radius: 99px;
border: 2px solid var(--bg-primary);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
top: -5px;
right: -5px;
background: #f44336;
color: white;
font-size: 12px;
font-weight: bold;
padding: 2px 6px;
border-radius: 10px;
border: 2px solid #fff;
}
/* ═══════════════════════════════════════
@ -1294,15 +1283,24 @@ function clearNavigation() {
═══════════════════════════════════════ */
.offers-sheet {
position: fixed;
bottom: calc(64px + env(safe-area-inset-bottom, 0px)); /* above bottom nav + safe area */
left: 0;
right: 0;
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
border-radius: 20px 20px 0 0;
z-index: 1300;
padding: 0 0 0.75rem;
box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
bottom: 110px; /* Separado más de la barra inferior para evitar solapamiento */
left: 10px;
right: 10px;
background: #fff;
border: 2px solid #000;
border-radius: 12px;
z-index: 2000;
padding-bottom: 10px;
box-shadow: 0 -4px 15px rgba(0,0,0,0.2);
color: #000;
}
@media (prefers-color-scheme: dark) {
.offers-sheet {
background: #111;
color: #fff;
border-color: #333;
}
}
.sheet-handle {