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

Redesign SIBU offers with background images, unified exit buttons, and simplified UI

Browse Source
This commit is contained in:
Johan Samudio
2026-03-01 00:20:49 -05:00
parent 91ef07b3ed
commit f411986b28
1 changed files with 49 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -602,15 +602,12 @@ async function highlightOptimalStopForRoute() {
<div class="map-floating-controls">
<!-- Botón de Ofertas (FAB Simple) -->
<button
v-if="isLoaded"
v-if="isLoaded && !showPromos"
class="offers-fab pulse"
:class="{ 'active': showPromos }"
@click="showPromos = !showPromos"
@click="showPromos = true"
>
<span class="material-icons">
{{ showPromos ? 'close' : 'local_offer' }}
</span>
<span v-if="couponStore.coupons.length > 0 && !showPromos" class="offers-badge">
<span class="material-icons">local_offer</span>
<span v-if="couponStore.coupons.length > 0" class="offers-badge">
{{ couponStore.coupons.length }}
</span>
</button>
@ -738,7 +735,7 @@ async function highlightOptimalStopForRoute() {
<div class="sheet-header">
<div class="sheet-title-group">
<span class="material-icons sheet-star">stars</span>
<span class="sheet-title">Ofertas SIBU</span>
<span class="sheet-title">Ofertas</span>
</div>
<button class="sheet-close" @click="showPromos = false">
<span class="material-icons">close</span>
@ -756,23 +753,20 @@ async function highlightOptimalStopForRoute() {
v-if="currentPromo"
:key="currentPromo.id"
class="sheet-card"
:style="{ backgroundImage: `url(${getImageUrl(currentPromo.image_url, 'coupon')})` }"
@mouseenter="stopCarousel"
@touchstart="stopCarousel"
@mouseleave="startCarousel"
>
<div class="sheet-img-wrap">
<img
:src="getImageUrl(currentPromo.image_url, 'coupon')"
class="sheet-img"
@error="handleImageError"
/>
<span v-if="currentPromo.discount_percentage" class="sheet-discount">-{{ currentPromo.discount_percentage }}%</span>
</div>
<div class="sheet-info">
<span class="sheet-biz-name">{{ currentPromo.business?.name || 'Local' }}</span>
<h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
<button class="sheet-cta" @click="handlePromoClick(currentPromo)">Ver detalles</button>
<div class="sheet-card-overlay">
<div class="sheet-info">
<span class="sheet-biz-name">{{ currentPromo.business?.name || 'Local' }}</span>
<h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
<div class="sheet-actions">
<button class="sheet-cta" @click="handlePromoClick(currentPromo)">Ver detalles</button>
<span v-if="currentPromo.discount_percentage" class="sheet-discount-tag">-{{ currentPromo.discount_percentage }}%</span>
</div>
</div>
</div>
</div>
</Transition>
@ -931,11 +925,6 @@ async function highlightOptimalStopForRoute() {
z-index: 1001;
}
.offers-fab.active {
background: #f44336;
color: #fff;
}
.offers-badge {
position: absolute;
top: -5px;
@ -1065,90 +1054,62 @@ async function highlightOptimalStopForRoute() {
.sheet-card {
flex: 1;
display: flex;
gap: 0.75rem;
align-items: flex-start;
min-width: 0;
}
.sheet-img-wrap {
height: 180px;
border-radius: 20px;
background-size: cover;
background-position: center;
position: relative;
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
display: flex;
}
.sheet-img {
.sheet-card-overlay {
width: 100%;
height: 100%;
object-fit: cover;
}
.sheet-discount {
position: absolute;
top: 0;
left: 0;
background: #f43f5e;
color: #ffffff;
font-size: 0.65rem;
font-weight: 900;
padding: 0.2rem 0.5rem;
border-bottom-right-radius: 12px;
line-height: 1;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.25rem;
}
.sheet-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
gap: 0.25rem;
}
.sheet-biz-name {
margin: 0;
font-size: 0.65rem;
font-size: 0.75rem;
font-weight: 800;
color: var(--text-secondary);
color: #fee715;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.8;
}
.sheet-promo-title {
margin: 0;
font-size: 0.9rem;
font-size: 1.1rem;
font-weight: 900;
color: var(--text-primary);
line-height: 1.1;
color: #fff;
line-height: 1.2;
margin-bottom: 0.5rem;
}
.sheet-promo-desc {
margin: 0;
font-size: 0.8rem;
color: var(--text-secondary);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
.sheet-actions {
display: flex;
align-items: center;
justify-content: space-between;
}
.sheet-cta {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-top: 0.4rem;
padding: 0.35rem 0.75rem;
background: #101820;
color: #fee715;
padding: 0.5rem 1rem;
background: #fee715;
color: #101820;
border: none;
border-radius: 12px;
font-size: 0.75rem;
font-size: 0.8rem;
font-weight: 800;
cursor: pointer;
transition: transform 0.2s;
@ -1156,11 +1117,13 @@ async function highlightOptimalStopForRoute() {
.sheet-cta:active { transform: scale(0.95); }
@media (prefers-color-scheme: dark) {
.sheet-cta {
background: #fee715;
color: #101820;
}
.sheet-discount-tag {
background: #f43f5e;
color: #fff;
font-size: 0.75rem;
font-weight: 900;
padding: 0.25rem 0.6rem;
border-radius: 8px;
}
/* Dots */