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

Commit

Permalink
fix: Derived label now sticky for Synthetics
Browse files Browse the repository at this point in the history
  • Loading branch information
@aizad-deriv
aizad-deriv committed Nov 14, 2022
1 parent c61b88e commit 004cc9e
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 8 deletions.
10 changes: 8 additions & 2 deletions src/javascript/app/pages/trade/markets.jsx
View file
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,6 +356,11 @@ class Markets extends React.Component {
current_viewed_node.children[0].removeAttribute('style');
current_viewed_node.children[0].classList.remove(class_under);
}
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
122 changes: 116 additions & 6 deletions src/sass/app/components/market.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,8 +285,8 @@
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;
Expand All @@ -298,7 +298,7 @@
background: $COLOR_WHITE;
@media (max-width: 767px) {
top: 123px;
width: calc(100% - 20px);
width: calc(100% - 18px);
}
}
&.put_under {
Expand All @@ -313,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 @@ -323,7 +323,7 @@
background: $COLOR_WHITE;
@media (max-width: 767px) {
top: 123px;
width: calc(100% - 20px);
width: calc(100% - 16px);
}
}
&.put_under {
Expand All @@ -343,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;
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);
}
}
&.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;
@media (min-width: 320px) and (max-width: 767px) {
font-size: 12px;
}
}
.symbols {
Expand All @@ -363,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

0 comments on commit 004cc9e

Please sign in to comment.