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>
}