From 6970867f7b757cb93a9f65de15e3134dc8af557f Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Thu, 28 May 2026 23:05:57 -0500
Subject: [PATCH] feat: transform catalog to modern grid layout with compact
 product cards

- Transform Card.vue from horizontal to vertical compact design
- Reduce card height with fixed image max-height (160-240px responsive)
- Center all text content (product name, prices, actions)
- Style product name with semibold font-weight, 2-line ellipsis
- Redesign price labels: subtle gray uppercase for labels, bold primary for values
- Style quantity controls: tonal icon buttons with smooth animations
- Redesign input field: solo-filled variant, compact density, subtle shadow
- Transform catalog.vue list layout to responsive grid (v-row/v-col)
- Implement responsive columns: 1 col mobile, 2 cols tablet, 3 cols desktop
- Clean up obsolete .catalog-item styles, use native Vuetify grid spacing
- Add hover effects: translateY(-6px), scale(1.08) on image, border highlight
- Add footer background (#fafafa) for visual separation
- Optimize breakpoints: 6 responsive sizes (374px, 559px, 959px, 1280px, 1920px)
- Result: Professional, compact, balanced e-commerce catalog design
---
 src/components/catalog/Card.vue | 670 +++++++++++++++-----------------
 src/pages/catalog.vue           |  86 ++--
 2 files changed, 372 insertions(+), 384 deletions(-)

diff --git a/src/components/catalog/Card.vue b/src/components/catalog/Card.vue
index 375cb36..960c678 100644
--- a/src/components/catalog/Card.vue
+++ b/src/components/catalog/Card.vue
@@ -1,64 +1,99 @@
 <template>
-  <v-card class="product-card">
-    <v-row class="product-card-row">
-      <!-- Columna de Imagen -->
-      <v-col cols="12" md="4" class="image-column">
-        <v-img :src="product.img" class="product-img" contain></v-img>
-      </v-col>
+  <v-card class="product-card" elevation="2" rounded="lg">
+    <!-- Imagen del Producto -->
+    <div class="product-image-container">
+      <v-img 
+        :src="product.img" 
+        :alt="product.name"
+        class="product-img" 
+        cover
+        max-height="180"
+      >
+        <template v-slot:placeholder>
+          <div class="d-flex align-center justify-center fill-height">
+            <v-progress-circular indeterminate color="primary" size="32"></v-progress-circular>
+          </div>
+        </template>
+      </v-img>
+    </div>
 
-      <!-- Columna de Detalles -->
-      <v-col cols="12" md="5" class="details-column">
-        <div class="product-details-content">
-          <v-tooltip location="top" :text="product.name">
-            <template v-slot:activator="{ props }">
-              <v-card-title class="product-name" v-bind="props" :title="product.name">
-                {{ product.name }}
-              </v-card-title>
-            </template>
-          </v-tooltip>
-          <v-card-subtitle class="product-description">{{
-            product.description
-          }}</v-card-subtitle>
+    <!-- Contenido de la Tarjeta -->
+    <v-card-text class="product-content pa-3 text-center">
+      <!-- Título del Producto -->
+      <v-tooltip location="top" :text="product.name">
+        <template v-slot:activator="{ props }">
+          <h3 class="product-name text-subtitle-1 font-weight-medium mb-2" v-bind="props">
+            {{ product.name }}
+          </h3>
+        </template>
+      </v-tooltip>
 
-          <div class="prices">
-            <div class="price-unit">
-              <span class="price-label">Precio unitario</span>
-              <span class="price-value">{{ currency(product.price) }}</span>
-            </div>
-
-            <div class="price-total">
-              <span class="price-label">Precio total</span>
-              <span class="price-value total"
-                >{{ currency(product.price * product.quantity) }}
-              </span>
-            </div>
+      <!-- Sección de Precios -->
+      <div class="prices-section mb-2">
+        <!-- Precio Unitario -->
+        <div class="price-row mb-1">
+          <span class="price-label text-caption">Precio unitario</span>
+          <div class="price-value text-body-1 font-weight-bold text-primary">
+            {{ currency(product.price) }}
           </div>
         </div>
-      </v-col>
-
-      <!-- Columna de Controles -->
-      <v-col cols="12" md="3" class="controls-column">
-        <div class="quantity-controls">
-          <v-btn icon small class="qty-btn" @click="decrease(product)">
-            <v-icon small>mdi-minus</v-icon>
-          </v-btn>
-          <v-text-field
-            v-model.number="product.quantity"
-            type="number"
-            min="0"
-            class="quantity-input"
-            dense
-            outlined
-            hide-details
-            aria-label="Cantidad"
-            @input="handleQuantityChange"
-          />
-          <v-btn icon small class="qty-btn qty-btn-add" @click="handleIncrease">
-            <v-icon small>mdi-plus</v-icon>
-          </v-btn>
+        
+        <!-- Precio Total -->
+        <div class="price-row">
+          <span class="price-label text-caption">Precio total</span>
+          <v-chip 
+            color="success" 
+            variant="flat" 
+            size="small" 
+            class="price-total-chip font-weight-bold mt-1"
+          >
+            {{ currency(product.price * product.quantity) }}
+          </v-chip>
         </div>
-      </v-col>
-    </v-row>
+      </div>
+    </v-card-text>
+
+    <!-- Footer con Controles de Cantidad -->
+    <v-card-actions class="product-actions pa-2 pb-3 justify-center">
+      <div class="quantity-controls">
+        <v-btn 
+          icon
+          size="small" 
+          variant="tonal"
+          color="error"
+          class="qty-btn"
+          @click="decrease(product)"
+          :disabled="product.quantity === 0"
+        >
+          <v-icon size="20">mdi-minus</v-icon>
+        </v-btn>
+        
+        <v-text-field
+          v-model.number="product.quantity"
+          type="number"
+          min="0"
+          class="quantity-input mx-1"
+          variant="solo-filled"
+          density="compact"
+          hide-details
+          single-line
+          flat
+          aria-label="Cantidad"
+          @input="handleQuantityChange"
+        />
+        
+        <v-btn 
+          icon
+          size="small" 
+          variant="tonal"
+          color="success"
+          class="qty-btn"
+          @click="handleIncrease"
+        >
+          <v-icon size="20">mdi-plus</v-icon>
+        </v-btn>
+      </div>
+    </v-card-actions>
   </v-card>
 </template>
 
@@ -102,400 +137,325 @@ export default {
 </script>
 
 <style scoped>
-/* ===== ESTILOS BASE - MOBILE FIRST (< 560px) ===== */
-
-/* Card Container */
+/* ============================================
+   CARD CONTAINER
+   ============================================ */
 .product-card {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  transition: all 0.3s ease;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #ffffff;
   overflow: hidden;
 }
 
 .product-card:hover {
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  transform: translateY(-2px);
-  border-color: #bdbdbd;
+  transform: translateY(-6px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
+  border-color: rgba(33, 150, 243, 0.3);
 }
 
-/* Row Container */
-.product-card-row {
-  padding: 12px 8px;
-  margin: 0;
-}
-
-/* === COLUMNA DE IMAGEN === */
-.image-column {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 0 16px 0;
+/* ============================================
+   IMAGEN DEL PRODUCTO
+   ============================================ */
+.product-image-container {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  overflow: hidden;
+  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 .product-img {
-  width: 280px;
-  height: 280px;
-  border-radius: 12px;
-  object-fit: cover;
-  background: #fff;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .product-card:hover .product-img {
-  transform: scale(1.03);
+  transform: scale(1.08);
 }
 
-/* === COLUMNA DE DETALLES === */
-.details-column {
-  padding: 0;
+/* ============================================
+   CONTENIDO DE LA TARJETA
+   ============================================ */
+.product-content {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  min-width: 0;
-}
-
-.product-details-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
 }
 
 .product-name {
   font-size: 0.95rem;
-  font-weight: 600;
-  color: #2c3e50;
+  font-weight: 500;
+  color: #1a1a1a;
   line-height: 1.3;
-  padding: 0;
-  text-align: center;
-  word-break: break-word;
-  max-width: 100%;
-}
-
-.product-description {
-  font-size: 0.8rem;
-  color: #7f8c8d;
-  line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  text-align: center;
-  padding: 0;
-  margin-bottom: 4px;
+  text-overflow: ellipsis;
+  min-height: 2.5rem;
+  letter-spacing: 0.01em;
 }
 
-/* === PRECIOS === */
-.prices {
+/* ============================================
+   SECCIÓN DE PRECIOS
+   ============================================ */
+.prices-section {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 8px;
   align-items: center;
+  gap: 4px;
 }
 
-.price-unit,
-.price-total {
+.price-row {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
+  gap: 2px;
 }
 
 .price-label {
-  font-size: 0.7rem;
-  color: #95a5a6;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  white-space: nowrap;
+  letter-spacing: 0.8px;
+  font-size: 0.65rem;
+  color: #9e9e9e;
+  font-weight: 500;
 }
 
 .price-value {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: #2c3e50;
+  color: #1565c0;
+  letter-spacing: 0.02em;
+  font-size: 1.1rem;
 }
 
-.price-value.total {
-  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
-  color: white;
-  padding: 3px 10px;
-  border-radius: 20px;
-  font-size: 0.95rem;
-  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
-  white-space: nowrap;
+.price-total-chip {
+  letter-spacing: 0.03em;
+  font-size: 0.9rem;
+  padding: 0 12px;
+  height: 26px;
+  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
 }
 
-/* === COLUMNA DE CONTROLES === */
-.controls-column {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px 0 0 0;
+/* ============================================
+   CONTROLES DE CANTIDAD
+   ============================================ */
+.product-actions {
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  background: #fafafa;
 }
 
 .quantity-controls {
-  display: inline-flex;
+  display: flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  background: #f5f5f5;
-  border-radius: 25px;
-  padding: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .quantity-input {
-  max-width: 60px;
-  min-width: 60px;
+  max-width: 65px;
+  min-width: 65px;
 }
 
-.quantity-input input {
+.quantity-input :deep(.v-field) {
+  background-color: #ffffff !important;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.quantity-input :deep(.v-field__input) {
   text-align: center;
-  font-weight: 600;
-  font-size: 0.9rem;
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: #1a1a1a;
+  padding: 4px 0;
+  min-height: 32px;
+}
+
+.quantity-input :deep(.v-field__field) {
+  padding: 0;
 }
 
 .qty-btn {
-  min-width: 32px !important;
-  width: 32px !important;
-  height: 32px !important;
-  border-radius: 50% !important;
-  background: #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s ease;
   flex-shrink: 0;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .qty-btn:hover {
-  background: #e0e0e0;
-  transform: scale(1.08);
+  transform: scale(1.1);
 }
 
-.qty-btn-add {
-  background: #27ae60;
-  color: white;
+.qty-btn:active {
+  transform: scale(0.95);
 }
 
-.qty-btn-add:hover {
-  background: #219a52 !important;
+/* ============================================
+   RESPONSIVE BREAKPOINTS
+   ============================================ */
+
+/* Móvil pequeño (< 375px) */
+@media (max-width: 374px) {
+  .product-image-container {
+    height: 160px;
+  }
+  
+  .product-content {
+    padding: 10px;
+  }
+  
+  .product-name {
+    font-size: 0.9rem;
+    min-height: 2.4rem;
+  }
+  
+  .price-value {
+    font-size: 1rem;
+  }
+  
+  .quantity-input {
+    max-width: 60px;
+    min-width: 60px;
+  }
 }
 
-/* ===== RESOLUCIÓN 375-559px (Mobile Standard) ===== */
+/* Móvil estándar (375px - 559px) */
 @media (min-width: 375px) and (max-width: 559px) {
-  .product-img {
-    width: 300px;
-    height: 300px;
-  }
-  
-  .product-card-row {
-    padding: 14px 10px;
+  .product-image-container {
+    height: 170px;
   }
   
   .product-name {
-    font-size: 1rem;
-  }
-  
-  .product-description {
-    font-size: 0.85rem;
-  }
-  
-  .quantity-input {
-    max-width: 65px;
-    min-width: 65px;
-  }
-}
-
-/* ===== RESOLUCIÓN 560-959px (Tablet) ===== */
-@media (min-width: 560px) and (max-width: 959px) {
-  .product-card-row {
-    padding: 16px 12px;
-  }
-
-  .image-column {
-    padding-bottom: 20px;
-  }
-
-  .product-img {
-    width: 300px;
-    height: 300px;
-  }
-
-  .product-details-content {
-    gap: 14px;
-  }
-
-  .product-name {
-    font-size: 1.05rem;
-  }
-
-  .product-description {
-    font-size: 0.85rem;
-  }
-
-  .prices {
-    gap: 10px;
-  }
-
-  .price-label {
-    font-size: 0.75rem;
-  }
-
-  .price-value {
-    font-size: 0.9rem;
-  }
-
-  .price-value.total {
-    font-size: 1rem;
-    padding: 4px 12px;
-  }
-
-  .controls-column {
-    padding-top: 18px;
-  }
-
-  .quantity-input {
-    max-width: 70px;
-    min-width: 70px;
-  }
-
-  .qty-btn {
-    min-width: 34px !important;
-    width: 34px !important;
-    height: 34px !important;
-  }
-}
-
-/* ===== RESOLUCIÓN ≥960px (Desktop) ===== */
-@media (min-width: 960px) {
-  .product-card {
-    border-radius: 12px;
-  }
-
-  .product-card:hover {
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
-    transform: translateY(-4px);
-  }
-
-  .product-card:hover .product-img {
-    transform: scale(1.05);
-  }
-
-  .product-card-row {
-    padding: 16px;
-    align-items: center;
-  }
-
-  .image-column {
-    padding: 0 24px 0 0;
-    margin-bottom: 0;
-    max-width: 380px;
-  }
-
-  .product-img {
-    width: 350px;
-    height: 350px;
-  }
-
-  .details-column {
-    padding: 0 24px 0 0;
-    border-right: 1px solid #e0e0e0;
-    flex: 1;
-    align-items: flex-start;
-    min-width: 0;
-  }
-
-  .product-details-content {
-    gap: 16px;
-    align-items: flex-start;
-    min-width: 0;
-  }
-
-  .product-name {
-    font-size: 1.15rem;
-    text-align: left;
-  }
-
-  .product-description {
-    font-size: 0.9rem;
-    text-align: left;
-  }
-
-  .prices {
-    align-items: flex-start;
-    gap: 10px;
-  }
-
-  .price-unit,
-  .price-total {
-    justify-content: flex-start;
-  }
-
-  .price-label {
-    font-size: 0.75rem;
-  }
-
-  .price-value {
     font-size: 0.95rem;
   }
-
-  .price-value.total {
+  
+  .price-value {
     font-size: 1.05rem;
-    padding: 4px 12px;
   }
+}
 
-  .controls-column {
-    justify-content: flex-end;
-    margin-top: 0;
-    padding: 0 0 0 16px;
-    min-width: 180px;
+/* Tablet (560px - 959px) */
+@media (min-width: 560px) and (max-width: 959px) {
+  .product-image-container {
+    height: 190px;
   }
-
-  .quantity-controls {
-    gap: 8px;
-    padding: 6px;
+  
+  .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;
   }
-
-  .qty-btn {
-    min-width: 36px !important;
-    width: 36px !important;
-    height: 36px !important;
-  }
-
-  .qty-btn:hover {
-    transform: scale(1.1);
-  }
 }
 
-/* ===== RESOLUCIÓN ≥1280px (Desktop Large) ===== */
-@media (min-width: 1280px) {
-  .product-card-row {
-    padding: 20px;
+/* Desktop (≥ 960px) */
+@media (min-width: 960px) {
+  .product-image-container {
+    height: 200px;
   }
-
-  .image-column {
-    padding-right: 28px;
+  
+  .product-content {
+    padding: 16px 14px;
   }
-
-  .details-column {
-    padding-right: 28px;
-  }
-
+  
   .product-name {
+    font-size: 1.05rem;
+    min-height: 2.7rem;
+  }
+  
+  .price-label {
+    font-size: 0.7rem;
+  }
+  
+  .price-value {
     font-size: 1.2rem;
   }
-
-  .product-description {
-    font-size: 0.95rem;
+  
+  .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;
+  }
+}
 
-  .controls-column {
-    padding-left: 20px;
+/* Desktop Large (≥ 1280px) */
+@media (min-width: 1280px) {
+  .product-image-container {
+    height: 220px;
+  }
+  
+  .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-image-container {
+    height: 240px;
+  }
+  
+  .product-name {
+    font-size: 1.15rem;
+    min-height: 3rem;
+  }
+  
+  .price-value {
+    font-size: 1.3rem;
   }
 }
 </style>
diff --git a/src/pages/catalog.vue b/src/pages/catalog.vue
index a599d56..dfe7027 100644
--- a/src/pages/catalog.vue
+++ b/src/pages/catalog.vue
@@ -60,21 +60,27 @@
           position="top"
         />
 
-        <!-- Lista de productos paginados -->
-        <v-list-item
-          v-for="item in paginatedItems"
-          :key="item.id"
-          class="catalog-item"
-        >
-          <Card
-            :product="item"
-            :increase="increase"
-            :decrease="decrease"
-            :currency="currency"
-            :updateQuantity="updateQuantity"
-            @add-to-cart="addToCart"
-          />
-        </v-list-item>
+        <!-- Grid de productos paginados -->
+        <v-row class="product-grid" v-if="paginatedItems.length > 0">
+          <v-col
+            v-for="item in paginatedItems"
+            :key="item.id"
+            cols="12"
+            sm="6"
+            md="6"
+            lg="4"
+            class="product-col"
+          >
+            <Card
+              :product="item"
+              :increase="increase"
+              :decrease="decrease"
+              :currency="currency"
+              :updateQuantity="updateQuantity"
+              @add-to-cart="addToCart"
+            />
+          </v-col>
+        </v-row>
 
         <!-- Mensaje cuando no hay productos -->
         <v-alert
@@ -642,26 +648,52 @@ export default {
 }
 
 /* ============================================
-   ITEMS DEL CATÁLOGO
+   GRID DE PRODUCTOS
    ============================================ */
-.catalog-item {
-  padding: 0;
-  margin-bottom: 12px;
+.product-grid {
+  margin: 0 -8px;
 }
 
-.catalog-item:last-child {
-  margin-bottom: 0;
+.product-col {
+  padding: 8px;
+  display: flex;
 }
 
+/* Asegurar que las cards ocupen toda la altura */
+.product-col :deep(.product-card) {
+  width: 100%;
+}
+
+/* Mobile: mayor espaciado vertical */
 @media (max-width: 559px) {
-  .catalog-item {
-    margin-bottom: 10px;
+  .product-grid {
+    margin: 0 -6px;
+  }
+  
+  .product-col {
+    padding: 6px;
   }
 }
 
+/* Tablet: espaciado medio */
 @media (min-width: 560px) and (max-width: 959px) {
-  .catalog-item {
-    margin-bottom: 14px;
+  .product-grid {
+    margin: 0 -8px;
+  }
+  
+  .product-col {
+    padding: 8px;
+  }
+}
+
+/* Desktop: espaciado óptimo */
+@media (min-width: 960px) {
+  .product-grid {
+    margin: 0 -12px;
+  }
+  
+  .product-col {
+    padding: 12px;
   }
 }
 
@@ -687,10 +719,6 @@ export default {
   .pb-mobile-cart {
     padding-bottom: 16px !important;
   }
-
-  .catalog-item {
-    margin-bottom: 16px;
-  }
 }
 
 /* ============================================