diff --git a/src/components/catalog/Card.vue b/src/components/catalog/Card.vue index ff35426..4659528 100644 --- a/src/components/catalog/Card.vue +++ b/src/components/catalog/Card.vue @@ -176,7 +176,6 @@ export default { .product-image-container { position: relative; width: 100%; - height: 100%; overflow: hidden; background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.05); @@ -336,143 +335,6 @@ export default { /* Móvil estándar (375px - 559px) */ @media (min-width: 375px) and (max-width: 559px) { - .product-name { - font-size: 0.95rem; - } - - .price-value { - font-size: 1.05rem; - } -} - -/* Tablet (560px - 959px) */ -@media (min-width: 560px) and (max-width: 959px) { - .product-content { - padding: 14px; - } - - .product-name { - font-size: 1rem; - min-height: 2.6rem; - } - - .price-label { - font-size: 0.68rem; - } - - .price-value { - font-size: 1.15rem; - } - - .price-total-chip { - font-size: 0.95rem; - height: 28px; - } - - .quantity-input { - max-width: 70px; - min-width: 70px; - } -} - -/* Desktop (≥ 960px) */ -@media (min-width: 960px) { - .product-content { - padding: 16px 14px; - } - - .product-name { - font-size: 1.05rem; - min-height: 2.7rem; - } - - .price-label { - font-size: 0.7rem; - } - - .price-value { - font-size: 1.2rem; - } - - .price-total-chip { - font-size: 1rem; - height: 30px; - padding: 0 14px; - } - - .product-actions { - padding: 8px; - padding-bottom: 12px; - } - - .quantity-input { - max-width: 70px; - min-width: 70px; - } - - .qty-btn { - width: 36px; - height: 36px; - } -} - -/* Desktop Large (≥ 1280px) */ -@media (min-width: 1280px) { - .product-content { - padding: 18px 16px; - } - - .product-name { - font-size: 1.1rem; - min-height: 2.8rem; - } - - .price-value { - font-size: 1.25rem; - } - - .price-total-chip { - font-size: 1.05rem; - height: 32px; - } -} - -/* Desktop Extra Large (≥ 1920px) */ -@media (min-width: 1920px) { - .product-name { - font-size: 1.15rem; - min-height: 3rem; - } - - .price-value { - font-size: 1.3rem; - } - - .product-content { - padding: 8px; - } - - .product-name { - font-size: 0.8rem; - min-height: 1.9rem; - } - - .price-value { - font-size: 0.85rem; - } - - .quantity-input { - max-width: 50px; - min-width: 50px; - } -} - -/* Móvil estándar (375px - 559px) */ -@media (min-width: 375px) and (max-width: 559px) { - .product-image-container { - height: 140px; - } - .product-name { font-size: 0.85rem; } @@ -484,10 +346,6 @@ export default { /* Tablet (560px - 959px) */ @media (min-width: 560px) and (max-width: 959px) { - .product-image-container { - height: 150px; - } - .product-content { padding: 10px; } @@ -518,10 +376,6 @@ export default { /* Desktop (≥ 960px) */ @media (min-width: 960px) { - .product-image-container { - height: 160px; - } - .product-content { padding: 12px 10px; } @@ -563,10 +417,6 @@ export default { /* Desktop Large (≥ 1280px) */ @media (min-width: 1280px) { - .product-image-container { - height: 170px; - } - .product-content { padding: 14px 12px; } @@ -588,10 +438,6 @@ export default { /* Desktop Extra Large (≥ 1920px) */ @media (min-width: 1920px) { - .product-image-container { - height: 180px; - } - .product-name { font-size: 1.05rem; min-height: 2.5rem; diff --git a/src/pages/catalog.vue b/src/pages/catalog.vue index 98d8154..d85a138 100644 --- a/src/pages/catalog.vue +++ b/src/pages/catalog.vue @@ -342,9 +342,10 @@ export default { // Búsqueda filteredItems() { if (!this.searchQuery) return this.items; - const query = this.searchQuery.toLowerCase(); + const normalize = (s) => s.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); + const query = normalize(this.searchQuery); return this.items.filter((item) => - item.name.toLowerCase().includes(query), + normalize(item.name).includes(query), ); }, // Paginación @@ -541,15 +542,13 @@ export default { } }, scrollToTop() { - this.$nextTick(() => { - const catalogHeader = this.$el?.querySelector(".page-header"); - if (catalogHeader) { - catalogHeader.scrollIntoView({ - behavior: "smooth", - block: "start", - }); - } - }); + const grid = this.$el?.querySelector(".product-grid"); + if (grid) { + const top = grid.getBoundingClientRect().top + window.scrollY - 16; + window.scrollTo({ top, behavior: "smooth" }); + } else { + window.scrollTo({ top: 0, behavior: "smooth" }); + } }, openLoginDialog() { this.$refs.loginDialogRef.open();