tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(cart-copia): enhance cart design with improved button styles and layout

Browse Source
This commit is contained in:
ncoronel
2026-07-07 16:06:10 -03:00
parent bdb7f5e907
commit 9d42de9fa8
3 changed files with 31 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/shared/components/cart-copia/cart-copia.component.html
View File

@@ -4,7 +4,7 @@
@if (showClose()) {
<button
class="cart-copia__close-button"
class="btn btn-link p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__close-button"
type="button"
aria-label="Cerrar carrito"
(click)="closed.emit()"
@@ -55,7 +55,7 @@
<div class="cart-copia__item-actions">
<div class="cart-copia__quantity-selector" aria-label="Selector de cantidad">
<button
class="cart-copia__quantity-button cart-copia__quantity-button--decrease"
class="btn btn-sm p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__quantity-button cart-copia__quantity-button--decrease"
type="button"
aria-label="Disminuir cantidad"
[disabled]="getItemQuantity(item) <= 1"
@@ -67,7 +67,7 @@
<span class="cart-copia__quantity-value">{{ getItemQuantity(item) }}</span>
<button
class="cart-copia__quantity-button cart-copia__quantity-button--increase"
class="btn btn-sm p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__quantity-button cart-copia__quantity-button--increase"
type="button"
aria-label="Aumentar cantidad"
(click)="increaseItemQuantity(idx)"
@@ -77,7 +77,7 @@
</div>
<button
class="cart-copia__remove-button"
class="btn btn-link p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__remove-button"
type="button"
aria-label="Eliminar producto"
(click)="onItemRemove(idx)"
@@ -110,22 +110,28 @@
</div>
@if (showActions()) {
<div class="cart-copia__footer-actions">
<button
class="cart-copia__footer-button cart-copia__footer-button--secondary"
type="button"
(click)="secondaryAction.emit()"
>
{{ secondaryActionLabel() }}
</button>
<div class="row g-2 mt-4 cart-copia__footer-actions">
<div class="col-12 col-sm-6">
<app-button
variant="secondary"
hostClass="w-100"
buttonClass="w-100 rounded-2 px-3 cart-copia__footer-app-button"
(click)="secondaryAction.emit()"
>
{{ secondaryActionLabel() }}
</app-button>
</div>
<button
class="cart-copia__footer-button cart-copia__footer-button--primary"
type="button"
(click)="primaryAction.emit()"
>
{{ primaryActionLabel() }}
</button>
<div class="col-12 col-sm-6">
<app-button
variant="primary"
hostClass="w-100"
buttonClass="w-100 rounded-2 px-3 cart-copia__footer-app-button"
(click)="primaryAction.emit()"
>
{{ primaryActionLabel() }}
</app-button>
</div>
</div>
}
</footer>

50
src/app/shared/components/cart-copia/cart-copia.component.scss
View File

@@ -34,14 +34,8 @@
}
.cart-copia__close-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
color: #ababab;
font-size: 16px;
transition: color 0.2s ease;
@@ -81,13 +75,14 @@
grid-template-columns: 88px minmax(0, 1fr);
gap: 14px;
padding-bottom: 18px;
border-bottom: 1px solid #ececec;
border-bottom: 1px solid #ffffff;
}
.cart-copia__media {
position: relative;
width: 88px;
height: 98px;
border-radius: 5px 0 0 5px;
overflow: hidden;
background: #d8d8d8;
@@ -113,7 +108,7 @@
left: 0;
z-index: 1;
padding: 4px 8px 3px;
background: #6173ff;
background: var(--tenant-primary);
color: #ffffff;
font-size: 8px;
font-weight: 500;
@@ -202,13 +197,8 @@
}
.cart-copia__quantity-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: #6f6f6f;
font-size: 12px;
@@ -231,14 +221,8 @@
}
.cart-copia__remove-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: 0;
background: transparent;
color: #aaaaaa;
font-size: 14px;
transition: color 0.2s ease;
@@ -297,31 +281,9 @@
line-height: 1.2;
}
.cart-copia__footer-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 20px;
}
.cart-copia__footer-button {
.cart-copia__footer-app-button {
min-height: 42px;
border-radius: 8px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 700;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cart-copia__footer-button--secondary {
border-color: #6173ff;
background: #ffffff;
color: #6173ff;
}
.cart-copia__footer-button--primary {
background: #6173ff;
color: #ffffff;
}
@media (max-width: 520px) {
@@ -344,8 +306,4 @@
width: 76px;
height: 88px;
}
.cart-copia__footer-actions {
grid-template-columns: minmax(0, 1fr);
}
}

3
src/app/shared/components/cart-copia/cart-copia.component.ts
View File

@@ -4,6 +4,7 @@ import { Subject, EMPTY } from 'rxjs';
import { catchError, debounceTime, groupBy, mergeMap, switchMap, tap } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import type { CartItemAttribute } from '../cart-item/cart-item.component';
import { ButtonComponent } from '../button/button.component';
import { ModalService } from '../../../core/services/modal.service';
import { CartService } from '../../../core/services/cart/cart.service';
import { ToastService } from '../../../core/services/toast.service';
@@ -22,7 +23,7 @@ export interface CartCopiaItemMock {
@Component({
selector: 'app-cart-copia',
standalone: true,
imports: [],
imports: [ButtonComponent],
templateUrl: './cart-copia.component.html',
styleUrl: './cart-copia.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush