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

mobile is finished

Browse Source
This commit is contained in:
sdarbinyan
2026-02-14 02:59:26 +04:00
parent 4238d59fc6
commit 9154660a01
10 changed files with 297 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/components/items-carousel/items-carousel.component.html
View File

@@ -20,17 +20,22 @@
<div class="item-image">
<img [src]="getItemImage(product)" [alt]="product.name" loading="lazy" />
@if (product.discount > 0) {
<div class="discount-badge">-{{ product.discount }}%</div>
<span class="discount-badge">-{{ product.discount }}%</span>
}
</div>
<div class="item-details">
<h3 class="item-name">{{ product.name }}</h3>
<div class="item-rating" *ngIf="product.rating">
<span class="rating-stars">⭐ {{ product.rating }}</span>
@if (product.rating) {
<div class="item-rating">
<svg width="14" height="14" viewBox="0 0 24 24" fill="#497671" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
</svg>
<span class="rating-value">{{ product.rating }}</span>
<span class="rating-count">({{ product.callbacks?.length || 0 }})</span>
</div>
</div>
}
<div class="item-price-row">
<div class="item-price">
@@ -42,16 +47,15 @@
}
</div>
<button class="cart-icon-btn" (click)="addToCart($event, product)" title="Добавить в корзину">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
<line x1="3" y1="6" x2="21" y2="6"></line>
<path d="M16 10a4 4 0 0 1-8 0"></path>
</svg>
</button>
</div>
</div>
</a>
</div>
</ng-template>
<ul class="p-carousel-indicator-list" data-pc-section="indicatorlist"><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="1" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="2" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="3" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="4" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="5" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="6" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator p-carousel-indicator-active" data-p-active="true" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="0" aria-label="7" aria-current="page" data-pc-section="indicatorbutton"></button></li><!----></ul>

99
src/app/components/items-carousel/items-carousel.component.scss
View File

@@ -127,12 +127,12 @@
// Item card styles
.item-card {
background: white;
background: #ffffff;
border-radius: 13px;
border: 1px solid #d3dad9;
overflow: hidden;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.3s ease, transform 0.3s ease;
position: relative;
height: 100%;
display: flex;
@@ -142,7 +142,7 @@
margin: 0 auto;
&:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
}
@@ -158,56 +158,55 @@
.item-image {
position: relative;
width: 100%;
height: 140px;
height: 170px;
overflow: hidden;
background: #f5f5f5;
border-radius: 13px;
background: #f5f3f9;
img {
width: 100%;
height: 100%;
object-fit: contain;
background: white;
padding: 10px;
transition: transform 0.3s ease, filter 0.3s ease;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
padding: 12px;
transition: transform 0.4s ease;
box-sizing: border-box;
}
&:hover img {
transform: scale(1.08);
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12)) brightness(1.05);
.item-card:hover & img {
transform: scale(1.06);
}
}
.discount-badge {
position: absolute;
top: 12px;
right: 12px;
top: 10px;
left: 10px;
background: #ef4444;
color: white;
padding: 0.4rem 0.8rem;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.875rem;
font-family: "DM Sans", sans-serif;
font-size: 0.75rem;
font-weight: 700;
z-index: 10;
letter-spacing: 0.02em;
z-index: 2;
line-height: 1.3;
}
.item-details {
padding: 0.625rem;
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 0.375rem;
gap: 6px;
flex: 1;
}
.item-name {
font-family: "DM Sans", sans-serif;
font-size: 0.8125rem;
font-weight: 600;
margin: 0;
line-height: 1.3;
min-height: 2.6em;
line-height: 1.35;
min-height: 2.2em;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
@@ -216,20 +215,25 @@
color: #1e3c38;
transition: color 0.2s;
&:hover {
color: var(--primary-color, #497671);
.item-card:hover & {
color: #497671;
}
}
.item-rating {
display: flex;
align-items: center;
gap: 0.25rem;
gap: 4px;
font-family: "DM Sans", sans-serif;
font-size: 0.75rem;
.rating-stars {
color: #497671;
svg {
flex-shrink: 0;
}
.rating-value {
font-weight: 600;
color: #1e3c38;
}
.rating-count {
@@ -241,15 +245,18 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
gap: 8px;
margin-top: auto;
padding-top: 4px;
}
.item-price {
display: flex;
align-items: baseline;
gap: 0.375rem;
gap: 6px;
flex-wrap: wrap;
flex: 1;
font-family: "DM Sans", sans-serif;
.current-price,
.discounted-price {
@@ -263,20 +270,22 @@
}
.original-price {
font-size: 0.8125rem;
color: #697777;
font-size: 0.75rem;
color: #a1b4b5;
text-decoration: line-through;
}
}
.cart-icon-btn {
padding: 0.5rem;
background: var(--primary-color, #497671);
width: 36px;
height: 36px;
padding: 0;
background: #497671;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
transition: background 0.2s ease, transform 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
@@ -284,11 +293,13 @@
svg {
display: block;
width: 18px;
height: 18px;
}
&:hover {
background: var(--primary-hover, #3d635f);
transform: scale(1.05);
background: #3d635f;
transform: scale(1.08);
}
&:active {
@@ -336,27 +347,27 @@
}
.item-image {
height: 220px;
height: 160px;
}
}
@media (max-width: 640px) {
.item-image {
height: 200px;
height: 150px;
}
.item-details {
padding: 1rem;
padding: 10px 12px 12px;
}
.item-name {
font-size: 0.9rem;
font-size: 0.8125rem;
}
.item-price {
.current-price,
.discounted-price {
font-size: 1.125rem;
font-size: 1rem;
}
}
}