feat: add color, discount price, and new item attributes to catalog and update UI
All checks were successful
Build and Push Docker Image / build (push) Successful in 25s
All checks were successful
Build and Push Docker Image / build (push) Successful in 25s
- Introduced `Color` model with admin and added a color field to items - Added `discount_price` and `is_new` fields to the `Item` model with necessary migrations - Updated pricing logic to display original and discount prices in templates - Enhanced product detail and item card templates with color swatches and metadata - Added sidebar sections for sales and new items with paginated mini-cards - Updated styles to support discount pricing, swatches, and sidebar mini-cards - Extended catalog views to filter by sales or new items and updated filtering logic
This commit is contained in:
@@ -298,6 +298,12 @@ aside {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.item-card-price-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.item-card-price {
|
||||
color: #36213e;
|
||||
font-weight: 700;
|
||||
@@ -305,6 +311,18 @@ aside {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.item-card-price--discount {
|
||||
color: #c54c5d;
|
||||
}
|
||||
|
||||
.item-card-price-original {
|
||||
color: #8a8a9a;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.item-card-availability {
|
||||
flex: 0 0 auto;
|
||||
color: #554971;
|
||||
@@ -411,12 +429,18 @@ aside {
|
||||
|
||||
.product-summary__meta {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.product-summary__price-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.product-summary__price {
|
||||
color: #36213e;
|
||||
font-weight: 700;
|
||||
@@ -424,6 +448,23 @@ aside {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.product-summary__price--discount {
|
||||
color: #c54c5d;
|
||||
}
|
||||
|
||||
.product-summary__price-original {
|
||||
color: #8a8a9a;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.product-summary__color-name {
|
||||
font-size: 16px;
|
||||
color: #554971;
|
||||
}
|
||||
|
||||
.product-summary__availability {
|
||||
color: #554971;
|
||||
font-size: 17px;
|
||||
@@ -452,20 +493,8 @@ aside {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-summary__swatch--dark {
|
||||
background: #303438;
|
||||
}
|
||||
|
||||
.product-summary__swatch--graphite {
|
||||
background: #5f6767;
|
||||
}
|
||||
|
||||
.product-summary__swatch--taupe {
|
||||
background: #927d68;
|
||||
}
|
||||
|
||||
.product-summary__swatch--sand {
|
||||
background: #cfc3ae;
|
||||
.product-summary__swatch--active {
|
||||
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #554971;
|
||||
}
|
||||
|
||||
.product-summary__description {
|
||||
@@ -606,3 +635,83 @@ aside {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar section links (Акции / Новинки headings) */
|
||||
.sidebar-section-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-section-link:hover,
|
||||
.sidebar-section-link.active {
|
||||
color: #36213e;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Sidebar mini-cards */
|
||||
.sidebar-mini-card {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sidebar-mini-card__img-link {
|
||||
flex: 0 0 52px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background: rgba(99, 118, 141, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sidebar-mini-card__img-link img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-mini-card__body {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.sidebar-mini-card__name {
|
||||
color: #36213e;
|
||||
font-size: 15px;
|
||||
line-height: 1.2;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
transition: text-decoration-color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-mini-card__name:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sidebar-mini-card__price {
|
||||
color: #554971;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sidebar-more-link {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
color: #63768d;
|
||||
font-size: 15px;
|
||||
text-decoration: underline;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-more-link:hover {
|
||||
color: #36213e;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user