OneTeam/don_confiao_frontend
16
0
Fork 0
Code Issues 1 Pull Requests 3 Actions Packages Projects Releases 8 Wiki Activity

refactor: reduce product card size by 25-30% (aggressive optimization)

Browse Source 
TEMPLATE CHANGES:
- Reduce image max-height: 180px → 140px
- Reduce padding: pa-3 → pa-2 (12px → 8px)
- Reduce title size: text-subtitle-1 → text-subtitle-2
- Reduce margins: mb-2 → mb-1 throughout
- Reduce chip size: small → x-small
- Simplify footer padding: pa-2 pb-3 → pa-2

CSS BASE CHANGES:
- Image container height: 180px → 140px (-22%)
- Product name font: 0.95rem → 0.85rem, min-height: 2.5rem → 2rem
- Price label font: 0.65rem → 0.6rem
- Price value font: 1.1rem → 0.9rem (-18%)
- Price chip: height 26px → 22px, padding 12px → 10px, font 0.9rem → 0.75rem
- Quantity input: 65px → 55px, font 0.95rem → 0.85rem, min-height 32px → 28px
- Section gaps: 4px → 2px, row gaps: 2px → 1px

RESPONSIVE BREAKPOINTS (all reduced ~25-30%):
- Mobile XS (<375px): 160px → 130px
- Mobile (375-559px): 170px → 140px
- Tablet (560-959px): 190px → 150px
- Desktop (960-1279px): 200px → 160px
- Desktop L (1280-1919px): 220px → 170px
- Desktop XL (≥1920px): 240px → 180px

RESULT: Cards are now 25-30% smaller maintaining proportions across all devices
This commit is contained in:
aserrador
2026-05-28 23:10:27 -05:00
parent 6970867f7b
commit 398a4cf79d
1 changed files with 99 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/components/catalog/Card.vue
View File

@@ -7,7 +7,7 @@
:alt="product.name" :alt="product.name"
class="product-img" class="product-img"
cover cover
max-height="180" max-height="140"
> >
<template v-slot:placeholder> <template v-slot:placeholder>
<div class="d-flex align-center justify-center fill-height"> <div class="d-flex align-center justify-center fill-height">
@@ -18,22 +18,22 @@
</div> </div>
<!-- Contenido de la Tarjeta --> <!-- Contenido de la Tarjeta -->
<v-card-text class="product-content pa-3 text-center"> <v-card-text class="product-content pa-2 text-center">
<!-- Título del Producto --> <!-- Título del Producto -->
<v-tooltip location="top" :text="product.name"> <v-tooltip location="top" :text="product.name">
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<h3 class="product-name text-subtitle-1 font-weight-medium mb-2" v-bind="props"> <h3 class="product-name text-subtitle-2 font-weight-medium mb-1" v-bind="props">
{{ product.name }} {{ product.name }}
</h3> </h3>
</template> </template>
</v-tooltip> </v-tooltip>
<!-- Sección de Precios --> <!-- Sección de Precios -->
<div class="prices-section mb-2"> <div class="prices-section mb-1">
<!-- Precio Unitario --> <!-- Precio Unitario -->
<div class="price-row mb-1"> <div class="price-row">
<span class="price-label text-caption">Precio unitario</span> <span class="price-label text-caption">Precio unitario</span>
<div class="price-value text-body-1 font-weight-bold text-primary"> <div class="price-value text-body-2 font-weight-bold text-primary">
{{ currency(product.price) }} {{ currency(product.price) }}
</div> </div>
</div> </div>
@@ -44,8 +44,8 @@
<v-chip <v-chip
color="success" color="success"
variant="flat" variant="flat"
size="small" size="x-small"
class="price-total-chip font-weight-bold mt-1" class="price-total-chip font-weight-bold"
> >
{{ currency(product.price * product.quantity) }} {{ currency(product.price * product.quantity) }}
</v-chip> </v-chip>
@@ -54,7 +54,7 @@
</v-card-text> </v-card-text>
<!-- Footer con Controles de Cantidad --> <!-- Footer con Controles de Cantidad -->
<v-card-actions class="product-actions pa-2 pb-3 justify-center"> <v-card-actions class="product-actions pa-2 justify-center">
<div class="quantity-controls"> <div class="quantity-controls">
<v-btn <v-btn
icon icon
@@ -162,7 +162,7 @@ export default {
.product-image-container { .product-image-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 180px; height: 140px;
overflow: hidden; overflow: hidden;
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%); background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -190,16 +190,16 @@ export default {
} }
.product-name { .product-name {
font-size: 0.95rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
color: #1a1a1a; color: #1a1a1a;
line-height: 1.3; line-height: 1.2;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
min-height: 2.5rem; min-height: 2rem;
letter-spacing: 0.01em; letter-spacing: 0.01em;
} }
@@ -211,20 +211,20 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 4px; gap: 2px;
} }
.price-row { .price-row {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 2px; gap: 1px;
} }
.price-label { .price-label {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.8px; letter-spacing: 0.8px;
font-size: 0.65rem; font-size: 0.6rem;
color: #9e9e9e; color: #9e9e9e;
font-weight: 500; font-weight: 500;
} }
@@ -232,14 +232,14 @@ export default {
.price-value { .price-value {
color: #1565c0; color: #1565c0;
letter-spacing: 0.02em; letter-spacing: 0.02em;
font-size: 1.1rem; font-size: 0.9rem;
} }
.price-total-chip { .price-total-chip {
letter-spacing: 0.03em; letter-spacing: 0.03em;
font-size: 0.9rem; font-size: 0.75rem;
padding: 0 12px; padding: 0 10px;
height: 26px; height: 22px;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25); box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
} }
@@ -259,8 +259,8 @@ export default {
} }
.quantity-input { .quantity-input {
max-width: 65px; max-width: 55px;
min-width: 65px; min-width: 55px;
} }
.quantity-input :deep(.v-field) { .quantity-input :deep(.v-field) {
@@ -272,10 +272,10 @@ export default {
.quantity-input :deep(.v-field__input) { .quantity-input :deep(.v-field__input) {
text-align: center; text-align: center;
font-weight: 700; font-weight: 700;
font-size: 0.95rem; font-size: 0.85rem;
color: #1a1a1a; color: #1a1a1a;
padding: 4px 0; padding: 2px 0;
min-height: 32px; min-height: 28px;
} }
.quantity-input :deep(.v-field__field) { .quantity-input :deep(.v-field__field) {
@@ -302,7 +302,47 @@ export default {
/* Móvil pequeño (< 375px) */ /* Móvil pequeño (< 375px) */
@media (max-width: 374px) { @media (max-width: 374px) {
.product-image-container { .product-image-container {
height: 160px; height: 130px;
}
.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;
}
.price-value {
font-size: 0.9rem;
}
}
/* Tablet (560px - 959px) */
@media (min-width: 560px) and (max-width: 959px) {
.product-image-container {
height: 150px;
} }
.product-content { .product-content {
@@ -311,151 +351,111 @@ export default {
.product-name { .product-name {
font-size: 0.9rem; font-size: 0.9rem;
min-height: 2.4rem; min-height: 2.1rem;
}
.price-value {
font-size: 1rem;
}
.quantity-input {
max-width: 60px;
min-width: 60px;
}
}
/* Móvil estándar (375px - 559px) */
@media (min-width: 375px) and (max-width: 559px) {
.product-image-container {
height: 170px;
}
.product-name {
font-size: 0.95rem;
}
.price-value {
font-size: 1.05rem;
}
}
/* Tablet (560px - 959px) */
@media (min-width: 560px) and (max-width: 959px) {
.product-image-container {
height: 190px;
}
.product-content {
padding: 14px;
}
.product-name {
font-size: 1rem;
min-height: 2.6rem;
} }
.price-label { .price-label {
font-size: 0.68rem; font-size: 0.62rem;
} }
.price-value { .price-value {
font-size: 1.15rem; font-size: 0.95rem;
} }
.price-total-chip { .price-total-chip {
font-size: 0.95rem; font-size: 0.8rem;
height: 28px; height: 24px;
} }
.quantity-input { .quantity-input {
max-width: 70px; max-width: 58px;
min-width: 70px; min-width: 58px;
} }
} }
/* Desktop (≥ 960px) */ /* Desktop (≥ 960px) */
@media (min-width: 960px) { @media (min-width: 960px) {
.product-image-container { .product-image-container {
height: 200px; height: 160px;
} }
.product-content { .product-content {
padding: 16px 14px; padding: 12px 10px;
} }
.product-name { .product-name {
font-size: 1.05rem; font-size: 0.95rem;
min-height: 2.7rem; min-height: 2.2rem;
} }
.price-label { .price-label {
font-size: 0.7rem; font-size: 0.63rem;
} }
.price-value { .price-value {
font-size: 1.2rem; font-size: 1rem;
} }
.price-total-chip { .price-total-chip {
font-size: 1rem; font-size: 0.85rem;
height: 30px; height: 25px;
padding: 0 14px; padding: 0 11px;
} }
.product-actions { .product-actions {
padding: 8px; padding: 6px;
padding-bottom: 12px; padding-bottom: 8px;
} }
.quantity-input { .quantity-input {
max-width: 70px; max-width: 58px;
min-width: 70px; min-width: 58px;
} }
.qty-btn { .qty-btn {
width: 36px; width: 32px;
height: 36px; height: 32px;
} }
} }
/* Desktop Large (≥ 1280px) */ /* Desktop Large (≥ 1280px) */
@media (min-width: 1280px) { @media (min-width: 1280px) {
.product-image-container { .product-image-container {
height: 220px; height: 170px;
} }
.product-content { .product-content {
padding: 18px 16px; padding: 14px 12px;
} }
.product-name { .product-name {
font-size: 1.1rem; font-size: 1rem;
min-height: 2.8rem; min-height: 2.4rem;
} }
.price-value { .price-value {
font-size: 1.25rem; font-size: 1.05rem;
} }
.price-total-chip { .price-total-chip {
font-size: 1.05rem; font-size: 0.9rem;
height: 32px; height: 26px;
} }
} }
/* Desktop Extra Large (≥ 1920px) */ /* Desktop Extra Large (≥ 1920px) */
@media (min-width: 1920px) { @media (min-width: 1920px) {
.product-image-container { .product-image-container {
height: 240px; height: 180px;
} }
.product-name { .product-name {
font-size: 1.15rem; font-size: 1.05rem;
min-height: 3rem; min-height: 2.5rem;
} }
.price-value { .price-value {
font-size: 1.3rem; font-size: 1.1rem;
} }
} }
</style> </style>