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

Refine offers UI: remove icon, adjust card layout for full-width/bottom alignment, and unify theme colors in promo modal

Browse Source
This commit is contained in:
Johan Samudio
2026-03-01 09:58:34 -05:00
parent 355bee84e3
commit 09ce466cf1
1 changed files with 14 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -117,17 +117,6 @@ function closePromoModal() {
async function claimPromo() {
if (!selectedPromo.value) return
try {
await couponStore.claimCoupon(selectedPromo.value.id)
alert('¡Promoción reclamada con éxito! Revisa "Mis Cupones" en tu perfil.')
closePromoModal()
} catch (e: any) {
alert(e.message || 'Error al reclamar la promoción')
}
}
function handleImageError(event: Event) {
const target = event.target as HTMLImageElement;
if (target) {
@ -736,7 +725,6 @@ async function highlightOptimalStopForRoute() {
<!-- Header -->
<div class="sheet-header">
<div class="sheet-title-group">
<span class="material-icons sheet-star">stars</span>
<span class="sheet-title">Ofertas</span>
</div>
<button class="sheet-close" @click="showPromos = false">
@ -811,8 +799,7 @@ async function highlightOptimalStopForRoute() {
<p>{{ selectedPromo.description }}</p>
</div>
<div class="promo-actions-modal">
<button class="business-detail-btn-modal" @click="router.push('/business/' + selectedPromo.business_id)">Ver Negocio</button>
<button class="promo-claim-btn" @click="claimPromo">Reclamar Cupón</button>
<button class="business-detail-btn-modal" style="flex: 1; width: 100%;" @click="router.push('/business/' + selectedPromo.business_id)">Ver Negocio</button>
</div>
</div>
</div>
@ -956,7 +943,7 @@ async function highlightOptimalStopForRoute() {
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px;
z-index: 3000; /* Aumentado para estar sobre todo */
padding: 8px 0 12px; /* Reducimos el padding lateral a 0 */
padding: 12px 0 0; /* Padding superior para el título, 0 abajo para que la imagen pegue */
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
color: #000;
overflow: hidden;
@ -975,8 +962,8 @@ async function highlightOptimalStopForRoute() {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px 8px; /* Padding para el header */
margin-bottom: 4px;
padding: 0 16px 12px; /* Padding para el header */
margin-bottom: 0px;
}
.sheet-header-left {
@ -1067,12 +1054,11 @@ async function highlightOptimalStopForRoute() {
width: 100%;
height: 200px;
margin: 0;
border-radius: 20px;
border-radius: 0;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
display: flex;
}
@ -1116,15 +1102,16 @@ async function highlightOptimalStopForRoute() {
}
.sheet-cta {
padding: 0.5rem 1rem;
background: #fee715;
background: var(--active-color);
color: #101820;
border: none;
border-radius: 12px;
font-size: 0.8rem;
padding: 8px 20px;
border-radius: 100px;
font-size: 0.8125rem;
font-weight: 800;
cursor: pointer;
transition: transform 0.2s;
box-shadow: 0 4px 15px rgba(254, 231, 21, 0.3);
transition: all 0.2s;
}
.sheet-cta:active { transform: scale(0.95); }
@ -1735,13 +1722,13 @@ html.light-theme .uber-search-trigger-compact {
}
.promo-header-modal { position: relative; height: 200px; }
.promo-img-modal { width: 100%; height: 100%; object-fit: cover; }
.promo-badge-modal { position: absolute; bottom: 0; left: 0; background: #FF4081; color: white; padding: 5px 15px; font-weight: 800; }
.promo-badge-modal { position: absolute; bottom: 0; left: 0; background: #EAB308; color: #000; padding: 5px 15px; font-weight: 800; border-top-right-radius: 12px; }
.promo-body-modal { padding: 25px; }
.promo-title-modal { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }
.promo-biz { color: var(--active-color); font-weight: 700; margin-bottom: 15px; }
.promo-actions-modal { padding: 0 25px 25px; display: flex; gap: 10px; }
.promo-claim-btn { flex: 1; background: #FF4081; color: white; border: none; padding: 15px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.business-detail-btn-modal { flex: 1; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); padding: 15px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.business-detail-btn-modal { flex: 1; background: var(--active-color); color: #000; border: none; padding: 15px; border-radius: 10px; font-weight: 800; cursor: pointer; transition: all 0.2s; }
.business-detail-btn-modal:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3); }
.close-modal-btn {
position: absolute;
top: 15px;