mono
3029e6d4b9
#45 feat: clean catalog view on mobile devices
2026-07-11 18:56:45 -05:00
mono
2c2082266e
#fix: corregir solapamiento de imagen en tarjetas del catálogo
...
- Cambiar height: 100% por aspect-ratio: 1 en .product-image-container
- Eliminar media queries duplicados y obsoletos
- El contenedor ahora se ajusta al tamaño real del v-img
2026-07-03 18:52:33 -05:00
762fde2cd0
#44 feat: ocultar carrito y deshabilitar controles para usuarios no autenticados en catálogo
2026-06-22 11:46:50 -05:00
cb79ad6d45
chore: Sintaxis
2026-05-28 23:29:36 -05:00
38c1d8c17c
feat: optimize product images to e-commerce standard (600x600 → 300px display)
...
INDUSTRY STANDARD IMPLEMENTATION:
- Change placeholder images from 300x200 (3:2) to 600x600 (1:1 square)
- Set max-height to 300px with aspect-ratio 1:1 for consistent display
- Follow e-commerce best practices (Amazon, Shopify, Mercado Libre)
TEMPLATE CHANGES:
- catalog.vue: Update placeholder URL to 600x600 square images
- Card.vue: Add aspect-ratio="1" for perfect square display
- Card.vue: Increase max-height from 140px to 300px
- Restore padding: pa-2 → pa-3 (8px → 12px)
- Restore title size: text-subtitle-2 → text-subtitle-1
- Restore margins: mb-1 → mb-2
- Restore chip size: x-small → small
- Restore footer padding: pa-2 → pa-2 pb-3
CSS CHANGES:
- Remove fixed height from .product-image-container (use 100% for flexibility)
- Product name: 0.85rem → 0.95rem, min-height 2rem → 2.5rem
- Price label: 0.6rem → 0.65rem
- Price value: 0.9rem → 1.1rem
- Price chip: height 22px → 26px, font 0.75rem → 0.9rem
- Quantity input: 55px → 65px, font 0.85rem → 0.95rem
- Section gaps: 2px → 4px, row gaps: 1px → 2px
RESPONSIVE STRATEGY (optimized for 300px max):
- Mobile XS (<375px): Natural scaling, compact layout
- Mobile (375-559px): Natural scaling, readable text
- Tablet (560-959px): Enhanced padding and fonts
- Desktop (≥960px): Full 300px display with optimal spacing
- Desktop L/XL: Maintain 300px with enhanced typography
RESULT:
- Square images (1:1) matching industry standard
- 600x600 source allows retina displays and zoom
- 300px display on desktop (sweet spot for catalogs)
- Responsive scaling maintains aspect ratio
- Professional e-commerce appearance
2026-05-28 23:25:17 -05:00
398a4cf79d
refactor: reduce product card size by 25-30% (aggressive optimization)
...
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
2026-05-28 23:10:27 -05:00
6970867f7b
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
2026-05-28 23:05:57 -05:00
2b52c63133
feat: add tooltip with full product name on hover
2026-05-15 13:34:21 -05:00
15f1f0f826
fix: prevent product name from expanding column and pushing controls out of row
2026-05-15 13:32:00 -05:00
a6d3a86e33
fix: remove name truncation, allow full product name to grow downward
2026-05-15 13:28:44 -05:00
9fd6f8306d
fix: constrain product name length to prevent layout breakage
2026-05-15 13:25:18 -05:00
f958735bd2
fix: vertically center card content with image on desktop
2026-05-15 13:22:06 -05:00
99d3881d61
feat: improve catalog responsive design, cart layout and card component
...
- Redesign Cart component with improved alignments, gaps, and responsive padding
- Refactor Card component with mobile-first layout and consistent spacing
- Update catalog layout to 60/40 split for products/cart on desktop (lg)
- Add PaginationControls component (previously untracked)
- Clean up obsolete CSS styles from catalog page
2026-05-15 13:10:54 -05:00
1d37ce42dc
feat: Improve product card design and sync cart quantity
...
- Add borders, hover effects, and box shadows to product cards
- Improve typography and layout styling
- Fix cart sync when updating quantity via minus button or input field
- Add updateQuantity prop to handle manual quantity changes
2026-03-14 16:28:10 -05:00
339ac6727f
feat: Add shopping cart to catalog page with sidebar
2026-03-07 17:33:57 -05:00
