Skip to content

Commit

Permalink
fix: move Derived to the correct position based on requirements (bina…
Browse files Browse the repository at this point in the history 
…ry-com#7287)

* fix: move Derived to the correct position  based on requirements

* resolved: remove transition none from css

* fix: Derived label now sticky for Synthetics

* resolved: added mixins for duplicated styles

* fix: change font size and font weight based on design

* fix: font-weight for symbols

* fix: change font-weight for symbols

---------

Co-authored-by: Matin shafiei <[email protected]>
  • Loading branch information
@aizad-deriv @matin-deriv
aizad-deriv and matin-deriv authored Jan 30, 2023
1 parent 5a834cf commit 596fe3a
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 33 deletions.
14 changes: 8 additions & 6 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,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
132 changes: 105 additions & 27 deletions src/sass/app/components/market.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,22 @@
@mixin market_name($FONT-SIZE, $FONT-WEIGHT, $COLOR) {
font-size: $FONT-SIZE;
padding: 10px 0;
font-weight: $FONT-WEIGHT;
flex: 1 0 auto;
color: $COLOR;
transition: none;
}
@mixin sticky($FONT-WEIGHT) {
position: absolute;
width: 431px;
top: 60px;
background: $COLOR_WHITE;
@media (max-width: 767px) {
top: 123px;
width: calc(100% - $FONT-WEIGHT);
}
}

.markets {
min-width: 120px;
position: relative;
Expand Down Expand Up @@ -284,31 +303,14 @@
&:last-of-type {
padding-bottom: 80px;
}
.label {
font-size: 20px;
padding: 16px 0px;
font-weight: 700;
}
.market_name {
font-size: 18px;
padding: 10px 0;
font-weight: 400;
flex: 1 0 auto;
color: $COLOR_BLUE;
transition: none;
@include market_name(18px, 500, $COLOR_BLUE);
@media (min-width: 320px) and (max-width: 767px) {
font-size: 20px;
font-size: 16px;
}

&.sticky {
position: absolute;
width: 431px;
top: 60px;
background: $COLOR_WHITE;
@media (max-width: 767px) {
top: 123px;
width: calc(100% - 20px);
}
@include sticky(16px);
}
&.put_under {
z-index: -1;
Expand All @@ -321,13 +323,89 @@
margin-bottom: 10px;

.submarket_name {
font-size: 12px;
padding: 10px 0 0;
@include market_name(12px, 400, $COLOR_ORANGE);
}
.symbols {
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex: 1 0 auto;
font-weight: 300;
color: $COLOR_ORANGE;
@media (min-width: 320px) and (max-width: 767px) {

.symbol_name {
padding: 5px;
margin: 10px 0 5px 5px;
line-height: 18px;
cursor: pointer;
width: 162px;
font-size: 14px;
font-weight: 500;
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 {
@include market_name(18px,700, $COLOR_BLUE);

&.sticky {
@include sticky(18px);
}
&.put_under {
z-index: -1;
}
}
.subgroup_name {
@include market_name(18px,500, $COLOR_BLUE);
@media (min-width: 320px) and (max-width: 767px) {
font-size: 16px;
}

@media (min-width: 767px) {
&.sticky {
@include sticky(16px);
}
&.put_under {
z-index: -1;
}
}
}
.submarket {
display: flex;
flex-direction: column;
flex: 1 0 auto;
margin-bottom: 10px;

.submarket_name {
@include market_name(12px, 400, $COLOR_ORANGE);
@media (min-width: 320px) and (max-width: 767px) {
font-size: 12px;
}
}
.symbols {
Expand All @@ -343,11 +421,11 @@
cursor: pointer;
width: 162px;
font-size: 14px;
font-weight: 400;
font-weight: 500;
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 596fe3a

Please sign in to comment.