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

feat: update layout and styles for product components and variant selectors

Browse Source
This commit is contained in:
ncoronel
2026-08-11 10:14:39 -03:00
parent 5d629e27b1
commit e3599a48e4
7 changed files with 79 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/core/layout/store-layout/store-layout.component.html
View File

@@ -1,5 +1,6 @@
<div class="store-layout d-flex flex-column flex-grow-1">
<app-store-header
ngSkipHydration
[cartQuantity]="cartQuantity()"
[logoUrl]="tenant()?.header_logo ?? null"
[user]="user()"

4
src/app/shared/components/cart-item/cart-item.component.scss
View File

@@ -120,8 +120,8 @@
}
.cart-item-variant-selector {
display: flex;
justify-content: flex-end;
display: block;
width: 100%;
}
.cart-item-remove-btn {

2
src/app/shared/components/product-list/product-list.component.scss
View File

@@ -12,6 +12,8 @@
&--row {
--product-list-item-min-width: 32rem;
gap: 0;
}
&--adaptive {

36
src/app/shared/components/product-row-card/product-row-card.component.html
View File

@@ -1,6 +1,4 @@
<div
class="product-row-card border rounded bg-white shadow-sm d-flex justify-content-between p-3 gap-3"
>
<div class="product-row-card">
<!-- Left Side: Title and Description -->
<div class="product-row-card__info d-flex flex-column justify-content-center flex-grow-1">
<h3 class="product-row-card__title text-uppercase mb-1 m-0">
@@ -13,28 +11,28 @@
}
</div>
<!-- Right Side: Actions and Pricing -->
<div class="product-row-card__actions d-flex flex-column gap-2 justify-content-center">
<!-- Top Row: Price and Comprar button -->
<div class="d-flex align-items-center justify-content-end gap-3">
<!-- Right Side: Selectors and quantity first, then price -->
<div class="product-row-card__actions">
<div class="product-row-card__summary">
<div class="product-row-card__controls">
<app-variant-selector
class="product-row-card__selectors"
[variants]="variants()"
[(selectedVariant)]="selectedVariant"
/>
<app-quantity-selector [(quantity)]="quantity"></app-quantity-selector>
</div>
<span class="product-row-card__price text-primary">
{{ formattedPrice() }}
</span>
</div>
<div class="product-row-card__buttons">
<div class="product-row-card__btn-wrapper">
<app-button variant="primary" (click)="onBuy()"> Comprar </app-button>
</div>
</div>
<!-- Bottom Row: Attribute selects, Quantity, and Agregar al carrito button -->
<div class="d-flex align-items-center justify-content-end gap-2">
<app-variant-selector
class="product-row-card__selectors"
[variants]="variants()"
[(selectedVariant)]="selectedVariant"
/>
<app-quantity-selector [(quantity)]="quantity"></app-quantity-selector>
<div class="product-row-card__btn-wrapper">
<app-button variant="secondary" (click)="onAddToCart()"> Agregar al carrito </app-button>
</div>

49
src/app/shared/components/product-row-card/product-row-card.component.scss
View File

@@ -4,9 +4,14 @@
}
.product-row-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
width: 100%;
background-color: #f8f9fa; /* slightly light bg matching the screenshot if needed, but let's use white or #f8f9fa based on the border */
border-color: #e9ecef !important;
padding: 2rem 0;
border-bottom: 1px solid #e3e3e3;
background: transparent;
&__title {
font-size: 16px;
@@ -26,13 +31,38 @@
}
&__price {
display: block;
align-self: flex-end;
font-size: 20px;
font-weight: 800;
color: var(--tenant-primary, #009933) !important; /* Green matching screenshot */
color: var(--tenant-primary, #009933) !important;
white-space: nowrap;
}
&__actions {
display: grid;
grid-template-columns: minmax(0, auto) 160px;
align-items: stretch;
gap: 0.75rem 2.5rem;
}
&__summary,
&__buttons {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
&__controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
}
&__btn-wrapper {
min-width: 160px; /* To make both buttons equal width as in screenshot */
min-width: 160px;
app-button {
display: block;
@@ -46,3 +76,14 @@
}
}
}
@media (max-width: 991.98px) {
.product-row-card {
align-items: stretch;
flex-direction: column;
&__actions {
grid-template-columns: minmax(0, 1fr) 160px;
}
}
}

10
src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss
View File

@@ -73,16 +73,6 @@
width: 100%;
}
&__variant-selectors ::ng-deep .variant-selector {
flex-wrap: nowrap;
width: 100%;
}
&__variant-selectors ::ng-deep .variant-selector__select {
flex: 1 1 0;
min-width: 0;
}
&__price {
color: var(--tenant-primary, #009933);
font-size: 22px;

36
src/app/shared/components/variant-selector/variant-selector.component.scss
View File

@@ -1,19 +1,22 @@
:host {
display: block;
width: 100%;
min-width: 0;
}
.variant-selector {
display: flex;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
flex-wrap: wrap;
}
.variant-selector__select {
width: auto;
min-width: 120px;
width: 100%;
min-width: 0;
max-width: none;
height: 38px;
color: #666666;
border-color: #cccccc;
@@ -24,35 +27,20 @@
border-color: var(--tenant-primary);
box-shadow: 0 0 0 0.25rem rgba(0, 153, 51, 0.25);
}
&:first-child:nth-last-child(odd) {
grid-column: 1 / -1;
}
}
.variant-selector--compact {
justify-content: flex-end;
gap: 4px;
.variant-selector__select {
min-width: 0;
max-width: 150px;
max-width: none;
height: 28px;
padding: 0.2rem 1.75rem 0.2rem 0.45rem;
font-size: 11px;
}
}
@media (max-width: 767.98px) {
.variant-selector {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.variant-selector__select {
width: 100%;
min-width: 0;
max-width: none;
&:first-child:nth-last-child(odd) {
grid-column: 1 / -1;
}
}
}