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

#45 feat: clean catalog view on mobile devices

Browse Source
This commit is contained in:
mono
2026-07-11 18:56:45 -05:00
parent 92483a110a
commit 3029e6d4b9
4 changed files with 177 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,52 +63,64 @@
<!-- Footer con Controles de Cantidad -->
<v-card-actions class="product-actions pa-2 pb-3 justify-center">
<div class="quantity-controls">
<template v-if="disabled">
<v-btn
icon
size="small"
color="primary"
variant="tonal"
color="error"
class="qty-btn"
@click="decrease(product)"
:disabled="disabled || product.quantity === 0"
prepend-icon="mdi-cart-plus"
class="login-add-btn"
@click="$emit('request-login')"
>
<v-icon size="20">mdi-minus</v-icon>
Agregar
</v-btn>
</template>
<template v-else>
<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"
:disabled="disabled"
@input="handleQuantityChange"
/>
<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"
:disabled="disabled"
>
<v-icon size="20">mdi-plus</v-icon>
</v-btn>
</div>
<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>
</template>
</v-card-actions>
</v-card>
</template>
<script>
export default {
emits: ['add-to-cart', 'request-login'],
props: {
product: {
type: Object,
@@ -312,6 +324,13 @@ export default {
RESPONSIVE BREAKPOINTS
============================================ */
/* Botón de agregar (no autenticado) */
.login-add-btn {
width: 100%;
font-weight: 600;
letter-spacing: 0.5px;
}
/* Móvil pequeño (< 375px) */
@media (max-width: 374px) {
.product-content {