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