Merge branch 'back-office-integration'
# Conflicts: # src/app/pages/cart/cart.component.ts # src/app/pages/category/category.component.html # src/app/pages/category/category.component.ts # src/app/pages/item-detail/item-detail.component.html # src/app/pages/item-detail/item-detail.component.ts # src/app/pages/legal/company-details/en/company-details-en.component.html # src/app/pages/legal/company-details/hy/company-details-hy.component.html # src/app/pages/legal/company-details/ru/company-details-ru.component.html # src/app/pages/legal/public-offer/en/public-offer-en.component.html # src/app/pages/legal/public-offer/ru/public-offer-ru.component.html # src/app/pages/search/search.component.ts # src/app/services/api.service.ts
This commit is contained in:
sdarbinyan
@@ -293,6 +293,64 @@ $dx-card-bg: #f5f3f9;
|
||||
}
|
||||
}
|
||||
|
||||
// Variant chips (colour/size) — shared between dexar and novo
|
||||
.dx-variants, .novo-variants {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.variant-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.variant-label {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.variant-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
border: 1.5px solid $dx-border;
|
||||
background: rgba(73, 118, 113, 0.06);
|
||||
color: $dx-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-attributes, .novo-attributes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 16px;
|
||||
margin-bottom: 14px;
|
||||
padding: 10px 14px;
|
||||
background: #f8fafa;
|
||||
border-radius: 10px;
|
||||
|
||||
.attribute-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.attribute-key {
|
||||
color: #6b7280;
|
||||
&::after { content: ':'; }
|
||||
}
|
||||
|
||||
.attribute-value {
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-description {
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid $dx-border;
|
||||
@@ -644,22 +702,70 @@ $dx-card-bg: #f5f3f9;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
// ========== DEXAR RESPONSIVE ==========
|
||||
|
||||
// Large desktop — constrain gallery height
|
||||
@media (min-width: 1201px) {
|
||||
.dx-main-photo {
|
||||
max-height: 560px;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet landscape / small desktop
|
||||
@media (max-width: 1200px) {
|
||||
.dx-item-content {
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.dx-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet portrait
|
||||
@media (max-width: 992px) {
|
||||
.dx-item-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.dx-gallery {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dx-main-photo {
|
||||
max-height: 480px;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.dx-add-cart {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dx-reviews-section,
|
||||
.dx-qa-section {
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile
|
||||
@media (max-width: 768px) {
|
||||
.dx-item-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
// On mobile: thumbnails go below main photo
|
||||
.dx-item-content {
|
||||
gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
// Thumbnails go below main photo
|
||||
.dx-gallery {
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dx-thumbnails {
|
||||
@@ -668,14 +774,16 @@ $dx-card-bg: #f5f3f9;
|
||||
max-height: none;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
order: 1; // put below main photo
|
||||
order: 1;
|
||||
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar { display: none; }
|
||||
}
|
||||
|
||||
.dx-main-photo {
|
||||
order: 0; // main photo first
|
||||
order: 0;
|
||||
max-height: 400px;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.dx-thumb {
|
||||
@@ -692,8 +800,32 @@ $dx-card-bg: #f5f3f9;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.dx-old-price {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dx-add-cart {
|
||||
max-width: 100%;
|
||||
padding: 14px 20px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dx-description {
|
||||
h2 {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-specs-table {
|
||||
.spec-key {
|
||||
white-space: normal;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-review-form {
|
||||
@@ -709,21 +841,153 @@ $dx-card-bg: #f5f3f9;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-review-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.dx-reviews-section,
|
||||
.dx-qa-section {
|
||||
margin-bottom: 32px;
|
||||
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-qa-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.dx-question,
|
||||
.dx-answer {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Small mobile
|
||||
@media (max-width: 480px) {
|
||||
.dx-item-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.dx-item-content {
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.dx-main-photo {
|
||||
max-height: 300px;
|
||||
border-radius: 10px;
|
||||
|
||||
img, video {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-thumb {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
min-width: 56px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
min-width: 52px;
|
||||
}
|
||||
|
||||
.dx-title {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.dx-info {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dx-current-price {
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.dx-rating {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dx-stock {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dx-add-cart {
|
||||
padding: 12px 16px;
|
||||
font-size: 0.95rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.dx-review-form {
|
||||
padding: 14px;
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-star-selector {
|
||||
.dx-star-pick {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-textarea {
|
||||
padding: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.dx-review-card {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.dx-reviewer-name {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.dx-review-text {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.dx-specs-table {
|
||||
td {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.8rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.spec-key {
|
||||
width: 100%;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.spec-value {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
tr {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-qa-card {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.dx-question,
|
||||
.dx-answer {
|
||||
font-size: 0.85rem;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dx-qa-label {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1301,12 +1565,20 @@ $dx-card-bg: #f5f3f9;
|
||||
}
|
||||
}
|
||||
|
||||
// ========== NOVO RESPONSIVE ==========
|
||||
|
||||
// Tablet portrait
|
||||
@media (max-width: 968px) {
|
||||
.novo-item-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.novo-gallery {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.novo-info .novo-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@@ -1315,6 +1587,10 @@ $dx-card-bg: #f5f3f9;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.novo-info .novo-add-cart {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.novo-review-form {
|
||||
padding: 1.5rem;
|
||||
|
||||
@@ -1329,3 +1605,302 @@ $dx-card-bg: #f5f3f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile
|
||||
@media (max-width: 768px) {
|
||||
.novo-item-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.novo-item-content {
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.novo-gallery {
|
||||
max-width: 100%;
|
||||
|
||||
.novo-main-photo {
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.novo-thumbnails {
|
||||
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.novo-info {
|
||||
.novo-title {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.novo-rating {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.novo-price-block {
|
||||
padding: 1rem;
|
||||
|
||||
.current-price {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.old-price {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
.novo-stock {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.novo-add-cart {
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.novo-description {
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.novo-specs-table {
|
||||
.spec-key {
|
||||
white-space: normal;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.novo-reviews {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
|
||||
h2 {
|
||||
font-size: 1.35rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.novo-review-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.novo-review-form {
|
||||
padding: 1.25rem;
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small mobile
|
||||
@media (max-width: 480px) {
|
||||
.novo-item-container {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.novo-item-content {
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.novo-gallery {
|
||||
.novo-thumbnails {
|
||||
grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.novo-main-photo {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
}
|
||||
|
||||
.novo-info {
|
||||
.novo-title {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.novo-price-block {
|
||||
padding: 0.75rem;
|
||||
|
||||
.current-price {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.novo-stock {
|
||||
padding: 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.novo-add-cart {
|
||||
padding: 0.85rem 1rem;
|
||||
font-size: 0.95rem;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
}
|
||||
|
||||
.novo-review-form {
|
||||
padding: 1rem;
|
||||
|
||||
.novo-rating-input {
|
||||
.novo-star-selector {
|
||||
.novo-star {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.novo-textarea {
|
||||
padding: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.novo-review-card {
|
||||
padding: 0.75rem;
|
||||
|
||||
.review-header {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
.review-stars {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.review-text {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.novo-specs-table {
|
||||
td {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.8rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.spec-key {
|
||||
width: 100%;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.spec-value {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
tr {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========== BADGES, TAGS & SPECS (shared) ==========
|
||||
|
||||
// Badges
|
||||
.novo-badges, .dx-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.item-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #fff;
|
||||
|
||||
&.badge-new { background: #4caf50; }
|
||||
&.badge-sale { background: #f44336; }
|
||||
&.badge-exclusive { background: #9c27b0; }
|
||||
&.badge-hot { background: #ff5722; }
|
||||
&.badge-limited { background: #ff9800; }
|
||||
&.badge-bestseller { background: #2196f3; }
|
||||
&.badge-featured { background: #607d8b; }
|
||||
&.badge-custom { background: #78909c; }
|
||||
}
|
||||
|
||||
// Tags
|
||||
.novo-tags, .dx-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: 6px 0 12px;
|
||||
}
|
||||
|
||||
.item-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
color: #497671;
|
||||
background: rgba(73, 118, 113, 0.08);
|
||||
border: 1px solid rgba(73, 118, 113, 0.15);
|
||||
}
|
||||
|
||||
// Specs table
|
||||
.novo-specs-table, .dx-specs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 12px 0;
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid #e8ecec;
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 12px;
|
||||
font-size: 0.9rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.spec-key {
|
||||
color: #697777;
|
||||
font-weight: 500;
|
||||
width: 40%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.spec-value {
|
||||
color: #1e3c38;
|
||||
}
|
||||
}
|
||||
|
||||
// Simple description
|
||||
.novo-simple-desc, .dx-simple-desc {
|
||||
font-size: 0.95rem;
|
||||
color: #697777;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// Stock quantity
|
||||
.stock-qty, .dx-stock-qty {
|
||||
font-size: 0.8rem;
|
||||
color: #697777;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user