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

Fix offers layout, implement glassmorphism navigation, and optimize image display

Browse Source
This commit is contained in:
Johan Samudio
2026-03-01 09:20:28 -05:00
parent b7d5fba9e5
commit c29b8074e6
1 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -944,12 +944,13 @@ async function highlightOptimalStopForRoute() {
OFFERS BOTTOM SHEET OFFERS BOTTOM SHEET
═══════════════════════════════════════ */ ═══════════════════════════════════════ */
.offers-sheet { .offers-sheet {
left: 16px; position: fixed;
right: 16px; left: 0;
right: 0;
bottom: 85px; bottom: 85px;
width: auto;
max-width: 500px;
margin: 0 auto; margin: 0 auto;
width: calc(100% - 32px);
max-width: 500px;
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%);
@ -1019,27 +1020,36 @@ async function highlightOptimalStopForRoute() {
.sheet-close .material-icons { font-size: 1.125rem; } .sheet-close .material-icons { font-size: 1.125rem; }
.sheet-card-area { .sheet-card-area {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0; justify-content: center;
width: 100%;
padding: 0; padding: 0;
min-height: 100px; min-height: 200px;
} }
.sheet-nav { .sheet-nav {
flex-shrink: 0; position: absolute;
width: 28px; top: 50%;
height: 28px; transform: translateY(-50%);
z-index: 10;
width: 36px;
height: 36px;
border-radius: 50%; border-radius: 50%;
border: none; border: none;
background: rgba(0, 0, 0, 0.05); background: rgba(255, 255, 255, 0.4);
color: var(--text-secondary); backdrop-filter: blur(8px);
color: #101820;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
.sheet-nav:first-of-type { left: 12px; }
.sheet-nav:last-of-type { right: 12px; }
.sheet-nav:disabled { opacity: 0.1; cursor: default; } .sheet-nav:disabled { opacity: 0.1; cursor: default; }
.sheet-nav:not(:disabled):hover { .sheet-nav:not(:disabled):hover {
background: var(--active-color); background: var(--active-color);
@ -1055,9 +1065,9 @@ async function highlightOptimalStopForRoute() {
} }
.sheet-card { .sheet-card {
flex: 1; width: 100%;
height: 200px; /* Un poco más alto para impacto visual */ height: 200px;
margin: 0 8px; /* Pequeño margen para que no toque los bordes del todo */ margin: 0;
border-radius: 20px; border-radius: 20px;
background-size: cover; background-size: cover;
background-position: center; background-position: center;