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

style fixes

Browse Source
This commit is contained in:
sdarbinyan
2026-02-20 10:58:06 +04:00
parent 369af40f20
commit d6097e2b5d
3 changed files with 1015 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

443
src/app/pages/item-detail/item-detail.component.scss
View File

@@ -642,22 +642,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 {
@@ -666,14 +714,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 {
@@ -690,8 +740,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 {
@@ -707,21 +781,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;
}
}
@@ -1299,12 +1505,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;
}
@@ -1313,6 +1527,10 @@ $dx-card-bg: #f5f3f9;
font-size: 2rem;
}
.novo-info .novo-add-cart {
max-width: 100%;
}
.novo-review-form {
padding: 1.5rem;
@@ -1328,6 +1546,213 @@ $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