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