Skip to content
This repository was archived by the owner on Feb 22, 2024. It is now read-only.

fix: move Derived to the correct position based on requirements #7287

Merged
merged 8 commits into from
Jan 30, 2023
Merged

fix: move Derived to the correct position based on requirements #7287

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7ef4ea1
fix: move Derived to the correct position based on requirements
aizad-deriv Nov 9, 2022
c61b88e
resolved: remove transition none from css
aizad-deriv Nov 9, 2022
004cc9e
fix: Derived label now sticky for Synthetics
aizad-deriv Nov 14, 2022
6399408
resolved: added mixins for duplicated styles
aizad-deriv Nov 14, 2022
1b6aa16
fix: change font size and font weight based on design
aizad-deriv Nov 22, 2022
fb9a820
fix: font-weight for symbols
aizad-deriv Nov 23, 2022
6f89176
fix: change font-weight for symbols
aizad-deriv Nov 24, 2022
db920f1
Merge branch 'master' into aizad/80390/derived-mobile-fix
matin-deriv Jan 30, 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
14 changes: 8 additions & 6 deletions src/javascript/app/pages/trade/markets.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,13 @@ const List = ({
) : (
<div key={`${item}_${idx}`}>
<div
className='market'
className='subgroup'
key={idx}
id={`${obj.key}_market`}
ref={saveRef.bind(null,obj.key)}
>
{(obj.key === derived_category && isMobile()) && <div className='label'>{obj.subgroup_name}</div>}
<div className='market_name'>
<div className='subgroup-name'>
{obj.name}
</div>
{Object.entries(obj.submarket).sort((a, b) => sortSubmarket(a[0], b[0]))
Expand Down Expand Up @@ -329,6 +329,7 @@ class Markets extends React.Component {
const class_under = 'put_under';
const TITLE_HEIGHT = 40;
const DEFAULT_TOP = this.references.list.offsetTop;
const SUBGROUP_LABEL = document.getElementsByClassName('label');

const current_viewed_node = Object.values(market_nodes).find(node => (
node.dataset.offsetTop <= position
Expand All @@ -355,11 +356,12 @@ class Markets extends React.Component {
current_viewed_node.children[0].removeAttribute('style');
current_viewed_node.children[0].classList.remove(class_under);
}
if (Object.values(current_viewed_node.children[0].classList).includes('label')) {
current_viewed_node.children[1].classList.add(class_sticky);
} else {
current_viewed_node.children[0].classList.add(class_sticky);
if (isMobile() && (current_viewed_node.classList.contains('subgroup') && !current_viewed_node.classList.contains('label'))) {
SUBGROUP_LABEL[0].classList.add(class_sticky);
SUBGROUP_LABEL[0].removeAttribute('style');
SUBGROUP_LABEL[0].classList.remove(class_under);
}
current_viewed_node.children[0].classList.add(class_sticky);
current_viewed_node.style.paddingTop = `${TITLE_HEIGHT}px`;
}

Expand Down
136 changes: 131 additions & 5 deletions src/sass/app/components/market.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,9 +285,25 @@
padding-bottom: 80px;
}
.label {
font-size: 20px;
padding: 16px 0px;
font-size: 18px;
padding: 10px 0px;
font-weight: 700;
flex: 1 0 auto;
color: $COLOR_BLUE;

&.sticky {
position: absolute;
width: 431px;
top: 60px;
background: $COLOR_WHITE;
@media (max-width: 767px) {
top: 123px;
width: calc(100% - 18px);
}
}
&.put_under {
z-index: -1;
}
}
.market_name {
font-size: 18px;
Expand All @@ -297,7 +313,7 @@
color: $COLOR_BLUE;
transition: none;
@media (min-width: 320px) and (max-width: 767px) {
font-size: 20px;
font-size: 16px;
}

&.sticky {
Expand All @@ -307,7 +323,7 @@
background: $COLOR_WHITE;
@media (max-width: 767px) {
top: 123px;
width: calc(100% - 20px);
width: calc(100% - 16px);
}
}
&.put_under {
Expand All @@ -327,7 +343,117 @@
font-weight: 300;
color: $COLOR_ORANGE;
@media (min-width: 320px) and (max-width: 767px) {
font-size: 12px;
}
}
.symbols {
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex: 1 0 auto;

.symbol_name {
padding: 5px;
margin: 10px 0 5px 5px;
line-height: 18px;
cursor: pointer;
width: 162px;
font-size: 14px;
font-weight: 400;
transition: all 0.2s;
@media (min-width: 320px) and (max-width: 767px) {
width: 200px;
font-size: 14px;
}

&:hover {
background: $COLOR_GRAY;
}
&.active {
background: $COLOR_BLUE;
color: $COLOR_WHITE;
@media (min-width: 320px) and (max-width: 767px) {
background: $COLOR_BLUE;
color: $COLOR_WHITE;
font-weight: normal;
padding-left: 5px;
}
}
}
}
}
}
.subgroup {
display: flex;
flex-direction: column;
flex: 0 0 auto;
padding-bottom: 40px;

&:last-of-type {
padding-bottom: 80px;
}
.label {
font-size: 18px;
padding: 10px 0px;
font-weight: 700;
flex: 1 0 auto;
color: $COLOR_BLUE;

&.sticky {
position: absolute;
width: 431px;
top: 60px;
background: $COLOR_WHITE;
@media (max-width: 767px) {
top: 123px;
width: calc(100% - 18px);
}
}
&.put_under {
z-index: -1;
}
}
.subgroup-name {
font-size: 18px;
padding: 10px 0;
font-weight: 400;
flex: 1 0 auto;
color: $COLOR_BLUE;
Copy link

@ameerul-deriv ameerul-deriv Nov 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we add a mixin for .subgroup-name and .label? the css is basically the same except for the font-weight

transition: none;
@media (min-width: 320px) and (max-width: 767px) {
font-size: 16px;
}

@media (min-width: 767px) {
&.sticky {
position: absolute;
width: 431px;
top: 60px;
background: $COLOR_WHITE;
@media (max-width: 767px) {
top: 123px;
width: calc(100% - 16px);
}
Copy link

@ameerul-deriv ameerul-deriv Nov 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here for .sticky and the one under .label

}
&.put_under {
z-index: -1;
}
}
}
.submarket {
display: flex;
flex-direction: column;
flex: 1 0 auto;
margin-bottom: 10px;

.submarket_name {
font-size: 12px;
padding: 10px 0 0;
flex: 1 0 auto;
font-weight: 300;
color: $COLOR_ORANGE;
Copy link

@ameerul-deriv ameerul-deriv Nov 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this could also relate to the mixin I mentioned for .subgroup-name since they're quite similar

@media (min-width: 320px) and (max-width: 767px) {
font-size: 12px;
}
}
.symbols {
Expand All @@ -347,7 +473,7 @@
transition: all 0.2s;
@media (min-width: 320px) and (max-width: 767px) {
width: 200px;
font-size: 16px;
font-size: 14px;
}

&:hover {
Expand Down