Skip to content
This repository has been 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 all 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
132 changes: 105 additions & 27 deletions src/sass/app/components/market.scss
View file
Open in desktop
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