fix: optimize catalog mobile cart behavior and z-index hierarchy
- Fix cart overlay blocking header in mobile (z-index: header 900 < cart 1000) - Add cart-is-collapsed class with translateY(calc(100% - 60px)) for bottom sheet behavior - Ensure cart header remains visible and clickable when collapsed in mobile - Add deep Vuetify styles for search field integration (:deep(.v-field)) - Preserve desktop sticky sidebar behavior (position: sticky, overflow-y: auto) - Make entire cart header clickable in mobile (@click on v-card-title) - Add visual feedback with chevron icons (mdi-chevron-up/down) - Clean CSS organization with section comments
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
<v-card-title
|
||||
class="d-flex align-center cart-title"
|
||||
:class="{ 'cart-header-mobile': isMobile, 'cart-header-desktop': !isMobile }"
|
||||
>
|
||||
@click="isMobile && $emit('toggle-collapse')">
|
||||
<!-- Icono del carrito - SIEMPRE VISIBLE -->
|
||||
<v-icon class="mr-2">mdi-cart</v-icon>
|
||||
|
||||
|
||||
@@ -9,13 +9,27 @@
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="9" lg="7" :class="{ 'pb-mobile-cart': isMobile }">
|
||||
<v-sheet class="page-header d-flex align-center pa-3 pa-sm-4 pa-md-6 mb-3 mb-sm-4 rounded-lg">
|
||||
<v-icon size="28" color="white" class="mr-2 d-sm-none">mdi-store</v-icon>
|
||||
<v-icon size="36" color="white" class="mr-3 d-none d-sm-inline">mdi-store</v-icon>
|
||||
<div class="d-flex flex-column flex-sm-row align-start align-sm-center w-100 ga-2 ga-sm-4">
|
||||
<v-sheet
|
||||
class="page-header d-flex align-center pa-3 pa-sm-4 pa-md-6 mb-3 mb-sm-4 rounded-lg"
|
||||
>
|
||||
<v-icon size="28" color="white" class="mr-2 d-sm-none"
|
||||
>mdi-store</v-icon
|
||||
>
|
||||
<v-icon size="36" color="white" class="mr-3 d-none d-sm-inline"
|
||||
>mdi-store</v-icon
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column flex-sm-row align-start align-sm-center w-100 ga-2 ga-sm-4"
|
||||
>
|
||||
<div class="flex-shrink-0">
|
||||
<h1 class="text-h6 text-sm-h5 text-md-h4 font-weight-bold text-white mb-0">Catálogo</h1>
|
||||
<p class="text-body-2 text-white text-medium-emphasis mb-0">Explora y agrega productos a tu compra</p>
|
||||
<h1
|
||||
class="text-h6 text-sm-h5 text-md-h4 font-weight-bold text-white mb-0"
|
||||
>
|
||||
Catálogo
|
||||
</h1>
|
||||
<p class="text-body-2 text-white text-medium-emphasis mb-0">
|
||||
Explora y agrega productos a tu compra
|
||||
</p>
|
||||
</div>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
@@ -98,7 +112,7 @@
|
||||
<v-col cols="12" md="3" lg="5">
|
||||
<div
|
||||
class="cart-sidebar"
|
||||
:class="{ collapsed: cartCollapsed && isMobile }"
|
||||
:class="{ 'cart-is-collapsed': cartCollapsed && isMobile }"
|
||||
>
|
||||
<Cart
|
||||
:cart-items="cartItems"
|
||||
@@ -509,19 +523,24 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ============================================
|
||||
CABECERA STICKY CON BÚSQUEDA
|
||||
============================================ */
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
z-index: 10;
|
||||
background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
|
||||
z-index: 5;
|
||||
background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
|
||||
color: white !important;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Mobile: Header sticky al top, z-index menor que el cart */
|
||||
@media (max-width: 959px) {
|
||||
.page-header {
|
||||
top: 0;
|
||||
border-radius: 0 !important;
|
||||
z-index: 900;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -531,16 +550,24 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.page-header .search-field {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
/* Estilos profundos para el campo de búsqueda de Vuetify */
|
||||
.page-header :deep(.v-field) {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
border-radius: 8px;
|
||||
transition: background 0.2s;
|
||||
width: 100%;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.page-header .search-field:hover,
|
||||
.page-header .search-field:focus-within {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
.page-header :deep(.v-field:hover),
|
||||
.page-header :deep(.v-field--focused) {
|
||||
background-color: rgba(255, 255, 255, 0.25) !important;
|
||||
}
|
||||
|
||||
.page-header :deep(.v-field__input) {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.page-header :deep(.v-field__input::placeholder) {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 559px) {
|
||||
@@ -563,13 +590,87 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CARRITO FLOTANTE (MOBILE FIRST)
|
||||
============================================ */
|
||||
.cart-sidebar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
border-radius: 16px 16px 0 0;
|
||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Cuando está colapsado en mobile, solo muestra el header (60px) */
|
||||
.cart-sidebar.cart-is-collapsed {
|
||||
transform: translateY(calc(100% - 60px));
|
||||
}
|
||||
|
||||
.cart-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Espacio inferior para evitar que productos queden ocultos bajo el cart */
|
||||
.pb-mobile-cart {
|
||||
padding-bottom: 80px !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ITEMS DEL CATÁLOGO
|
||||
============================================ */
|
||||
.catalog-item {
|
||||
padding: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.catalog-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 559px) {
|
||||
.catalog-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 560px) and (max-width: 959px) {
|
||||
.catalog-item {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
DISEÑO DESKTOP (>= 960px)
|
||||
============================================ */
|
||||
@media (min-width: 960px) {
|
||||
.cart-sidebar {
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
z-index: auto;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow-y: visible;
|
||||
top: 96px;
|
||||
z-index: 1;
|
||||
max-height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
box-shadow: none;
|
||||
border-radius: 12px;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.cart-backdrop {
|
||||
@@ -585,18 +686,9 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 559px) {
|
||||
.catalog-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 560px) and (max-width: 959px) {
|
||||
.catalog-item {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MODALES
|
||||
============================================ */
|
||||
.product-list-scroll {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
|
||||
Reference in New Issue
Block a user