Skip to content
This repository has been archived by the owner on Jul 18, 2024. It is now read-only.

YSHOP2-337 : COD V1 LTR direction issues for (dropdown + breadcrumb) #286

Merged
merged 3 commits into from
Apr 11, 2023
Merged

YSHOP2-337 : COD V1 LTR direction issues for (dropdown + breadcrumb) #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
15927ed
fix dropdown
bj-anas Apr 11, 2023
ea36720
rotate arrow
bj-anas Apr 11, 2023
670bac1
updated
bj-anas Apr 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,50 +400,48 @@ input:not([type=radio]),
/* ----- custom dropdwown input ----- */
/* ---------------------------------- */
.dropdown-input {
position: relative;
border: 1px solid #E7E7E7;
border-radius: 4px;
width: 100%;
min-width: 335px;
max-width: max-content;
cursor: pointer;
/* Style the dropdown content */
}
.dropdown-input .dropbtn {
position: relative;
display: flex;
align-items: center;
border-radius: 4px;
width: 100%;
max-width: 280px;
padding: 10px 15px;
border: 1px solid #E7E7E7;
text-align: start;
gap: 6px;
text-align: start;
font-size: 14px;
font-weight: 400;
cursor: pointer;
}
@media (min-width: 768px) {
.dropdown-input .dropbtn {
max-width: 350px;
}
.dropdown-input .dropbtn :first-child {
margin-inline-end: 20px;
}
.dropdown-input .dropbtn .dropdown-icon {
position: absolute;
left: 0;
padding-left: 10px;
left: 10px;
}
[dir=ltr] .dropdown-input .dropbtn .dropdown-icon {
left: unset;
right: 10px;
}
.dropdown-input .dropdown-content {
display: none;
margin-top: 5px;
position: absolute;
top: 40px;
left: 0;
z-index: 1;
width: 100%;
max-width: 280px;
background: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0px 10px 55px rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
@media (min-width: 768px) {
.dropdown-input .dropdown-content {
max-width: 350px;
}
}
.dropdown-input .dropdown-content li {
color: black;
padding: 10px;
Expand Down Expand Up @@ -643,6 +641,9 @@ input:not([type=radio]),
font-size: 14px;
text-decoration: none;
}
[dir=ltr] .breadcrumbs-container .breadcrumbs-listings .listings__item img {
rotate: 180deg;
}
.breadcrumbs-container .breadcrumbs-name {
font-weight: 700;
font-size: 26px;
Expand Down
14 changes: 4 additions & 10 deletions assets/product-listing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,17 +101,11 @@
}

.sort-container {
margin: 40px auto;
margin: 40px 0;
max-width: max-content;
}
@media (min-width: 768px) {
.sort-container #productDropdownFiltring .dropbtn {
max-width: 280px;
}
}
@media (min-width: 768px) {
.sort-container #productDropdownFiltring .dropdown-content {
max-width: 280px;
}
.sort-container #productDropdownFiltring {
min-width: 280px;
}
.sort-container #productDropdownFiltring .dropdown-content a {
color: black;
Expand Down
2 changes: 1 addition & 1 deletion assets/queries-handler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ function filterProduct() {
const selectedOption = filterDropdownContent.querySelector(`[data-value="${sortField}-${sortOrder}"]`);

// Update the dropdown button text with the selected option
filterDropdownBtn.innerHTML = `<span class='order-by'>${order_by} : </span> ${selectedOption.textContent}`;
filterDropdownBtn.innerHTML = `<span class='order-by'>${order_by} : ${selectedOption.textContent} </span>`;

const icon = document.createElement('ion-icon');
icon.setAttribute('name', 'chevron-down-outline');
Expand Down
43 changes: 25 additions & 18 deletions styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,6 @@ body {
font-family: var(--yc-font-family);
}

[style*='z-index: 500; height: 54px; width: 100vw; position: fixed; padding: 4px 16px'] {
display: none !important;
}
.container {
max-width: 1440px !important;
margin: 0 auto;
Expand Down Expand Up @@ -424,29 +421,35 @@ input:not([type='radio']),
/* ----- custom dropdwown input ----- */
/* ---------------------------------- */
.dropdown-input {
position: relative;
border: 1px solid #E7E7E7;
border-radius: 4px;
width: 100%;
min-width: 335px;
max-width: max-content;
cursor: pointer;

.dropbtn {
position: relative;
display: flex;
align-items: center;
border-radius: 4px;
width: 100%;
max-width: 280px;
padding: 10px 15px;
border: 1px solid #E7E7E7;
text-align: start;
gap: 6px;
text-align: start;
font-size: 14px;
font-weight: 400;
cursor: pointer;

@include breakpoint('md') {
max-width: 350px;
:first-child {
margin-inline-end: 20px;
}

.dropdown-icon {
position: absolute;
left: 0;
padding-left: 10px;
left: 10px;

[dir='ltr'] & {
left: unset;
right: 10px;
}
}
}

Expand All @@ -455,17 +458,15 @@ input:not([type='radio']),
display: none;
margin-top: 5px;
position: absolute;
top: 40px;
left: 0;
z-index: 1;
width: 100%;
max-width: 280px;
background: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0px 10px 55px rgba(0, 0, 0, 0.1);
border-radius: 4px;

@include breakpoint('md') {
max-width: 350px;
}

li {
color: black;
Expand Down Expand Up @@ -689,6 +690,12 @@ input:not([type='radio']),
font-size: 14px;
text-decoration: none;
}

.listings__item img {
[dir='ltr'] & {
rotate: 180deg;
}
}
}

.breadcrumbs-name {
Expand Down
13 changes: 4 additions & 9 deletions styles/product-listing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,18 +107,13 @@
}

.sort-container {
margin: 40px auto;
margin: 40px 0;
max-width: max-content;

#productDropdownFiltring {
.dropbtn {
@include breakpoint('md') {
max-width: 280px;
}
}
min-width: 280px;

.dropdown-content {
@include breakpoint('md') {
max-width: 280px;
}
a {
color: black;
padding: 10px;
Expand Down