sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(catalog): polish responsive UI

Browse Source
This commit is contained in:
sdarbinyan
2026-07-09 02:43:39 +04:00
parent 8d652c8259
commit 6409a91cb0
11 changed files with 568 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/product-card/product-card.component.html
View File

@@ -3,7 +3,7 @@
<div class="product-image">
<img [src]="getMainImage(item)" [alt]="title || item.name" loading="lazy" decoding="async" width="300" height="300" />
@if (showDiscountBadge && item.discount > 0) {
<div class="discount-badge">-{{ item.discount }}%</div>
<div class="discount-badge" [attr.aria-label]="'Discount ' + item.discount + '%'">-{{ item.discount }}%</div>
}
@if (showStock && item.remainings) {
<span class="stock-badge" [class.out]="item.remainings === 'out'">{{ item.remainings }}</span>
@@ -12,16 +12,16 @@
@if (showFavoriteControl() || showCompareControl() || showShareAction || showQuickViewPlaceholder) {
<div class="product-actions-overlay">
@if (showFavoriteControl()) {
<button type="button" class="product-action-btn product-action-favorite" [class.active]="isFavorite" (click)="onFavoritePlaceholder($event)">❤</button>
<button type="button" class="product-action-btn product-action-favorite" [attr.aria-label]="'catalog.favorite' | translate" [class.active]="isFavorite" (click)="onFavoritePlaceholder($event)">❤</button>
}
@if (showCompareControl()) {
<button type="button" class="product-action-btn" [class.active]="isCompared" (click)="onComparePlaceholder($event)">⇄</button>
<button type="button" class="product-action-btn" [attr.aria-label]="'catalog.compare' | translate" [class.active]="isCompared" (click)="onComparePlaceholder($event)">⇄</button>
}
@if (showShareAction) {
<button type="button" class="product-action-btn" (click)="onShare($event)">↗</button>
<button type="button" class="product-action-btn" [attr.aria-label]="'catalog.share' | translate" (click)="onShare($event)">↗</button>
}
@if (showQuickViewPlaceholder) {
<button type="button" class="product-action-btn" (click)="onQuickViewPlaceholder($event)">○</button>
<button type="button" class="product-action-btn" [attr.aria-label]="'catalog.quickView' | translate" (click)="onQuickViewPlaceholder($event)">○</button>
}
</div>
}

69
src/app/components/product-card/product-card.component.scss
View File

@@ -8,7 +8,8 @@
transition: transform 0.2s ease, box-shadow 0.2s ease;
&:hover {
transform: translateY(-4px);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}
}
@@ -23,7 +24,8 @@
.product-image {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
aspect-ratio: 1 / 1;
min-height: 220px;
border: 1px solid #d3dad9;
border-radius: 13px 13px 0 0;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
@@ -37,22 +39,22 @@
width: 100%;
height: 100%;
object-fit: contain;
background: white;
padding: 12px;
transition: transform 0.3s ease, opacity 0.3s ease;
background: #fff;
padding: 16px;
transition: transform 0.2s ease;
}
&:hover img {
transform: scale(1.05);
transform: scale(1.02);
}
}
.discount-badge {
position: absolute;
top: 12px;
right: 12px;
left: 12px;
background: #ef4444;
color: white;
color: #fff;
padding: 6px 12px;
border-radius: 20px;
font-weight: 700;
@@ -62,7 +64,7 @@
.stock-badge {
position: absolute;
right: 12px;
left: 12px;
bottom: 12px;
z-index: 1;
min-height: 22px;
@@ -84,26 +86,26 @@
.product-actions-overlay {
position: absolute;
right: 12px;
top: 44px;
top: 12px;
z-index: 2;
display: grid;
gap: 6px;
gap: 8px;
}
.product-action-btn {
width: 30px;
height: 30px;
width: 36px;
height: 36px;
border: 1px solid rgba(30, 60, 56, 0.15);
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: #1e3c38;
font-size: 0.9rem;
font-size: 1rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.2s ease, color 0.2s ease;
transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.product-action-btn:hover {
@@ -116,6 +118,13 @@
color: #497671;
}
.product-action-btn:focus-visible,
.product-link:focus-visible,
.add-to-cart-btn:focus-visible {
outline: 3px solid rgba(73, 118, 113, 0.25);
outline-offset: 2px;
}
.product-action-favorite.active {
animation: favorite-pulse 280ms ease-out;
}
@@ -134,12 +143,13 @@
.product-badges-overlay {
position: absolute;
left: 10px;
top: 10px;
left: 12px;
top: 46px;
display: flex;
gap: 6px;
flex-wrap: wrap;
z-index: 1;
max-width: calc(100% - 60px);
}
.product-badge {
@@ -160,13 +170,13 @@
border: 1px solid #d3dad9;
border-top: none;
border-radius: 0 0 13px 13px;
padding: 12px 16px;
padding: 16px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
background: #f5f3f9;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
gap: 12px;
}
.product-name {
@@ -212,7 +222,7 @@
.product-price {
display: flex;
align-items: baseline;
gap: 8px;
gap: 12px;
flex-wrap: wrap;
}
@@ -259,7 +269,7 @@
.add-to-cart-btn {
width: 100%;
margin-top: 10px;
margin-top: 12px;
min-height: 42px;
border: 0;
border-radius: 13px;
@@ -280,9 +290,26 @@
}
}
@media (max-width: 640px) {
.product-image {
min-height: 200px;
}
.product-action-btn {
width: 34px;
height: 34px;
}
.product-details {
gap: 10px;
padding: 14px;
}
}
.product-card-compact {
.product-details {
padding: 10px 12px;
gap: 8px;
}
.product-description,