From 7ef4ea1a9a4e44380b9d33414a54de8edf923d9f Mon Sep 17 00:00:00 2001 From: Aizad Ridzo Date: Wed, 9 Nov 2022 16:01:06 +0800 Subject: [PATCH 1/7] fix: move Derived to the correct position based on requirements --- src/javascript/app/pages/trade/markets.jsx | 6 +----- src/sass/app/components/market.scss | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/javascript/app/pages/trade/markets.jsx b/src/javascript/app/pages/trade/markets.jsx index 39af419a53b12..38d340f6630b4 100644 --- a/src/javascript/app/pages/trade/markets.jsx +++ b/src/javascript/app/pages/trade/markets.jsx @@ -355,11 +355,7 @@ 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); - } + current_viewed_node.children[0].classList.add(class_sticky); current_viewed_node.style.paddingTop = `${TITLE_HEIGHT}px`; } diff --git a/src/sass/app/components/market.scss b/src/sass/app/components/market.scss index 9e690c8e1a1fe..111a0873a0db5 100644 --- a/src/sass/app/components/market.scss +++ b/src/sass/app/components/market.scss @@ -288,6 +288,23 @@ font-size: 20px; padding: 16px 0px; font-weight: 700; + flex: 1 0 auto; + color: $COLOR_BLUE; + transition: none; + + &.sticky { + position: absolute; + width: 431px; + top: 60px; + background: $COLOR_WHITE; + @media (max-width: 767px) { + top: 123px; + width: calc(100% - 20px); + } + } + &.put_under { + z-index: -1; + } } .market_name { font-size: 18px; From c61b88e7f1ec22572f4caf36ba0893b116c3aebd Mon Sep 17 00:00:00 2001 From: Aizad Ridzo Date: Wed, 9 Nov 2022 17:23:02 +0800 Subject: [PATCH 2/7] resolved: remove transition none from css --- src/sass/app/components/market.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/sass/app/components/market.scss b/src/sass/app/components/market.scss index 111a0873a0db5..16b7ce70936d1 100644 --- a/src/sass/app/components/market.scss +++ b/src/sass/app/components/market.scss @@ -290,7 +290,6 @@ font-weight: 700; flex: 1 0 auto; color: $COLOR_BLUE; - transition: none; &.sticky { position: absolute; From 004cc9e1a70e86799fca8457609ead900cda2958 Mon Sep 17 00:00:00 2001 From: Aizad Ridzo Date: Mon, 14 Nov 2022 10:19:33 +0800 Subject: [PATCH 3/7] fix: Derived label now sticky for Synthetics --- src/javascript/app/pages/trade/markets.jsx | 10 +- src/sass/app/components/market.scss | 122 ++++++++++++++++++++- 2 files changed, 124 insertions(+), 8 deletions(-) diff --git a/src/javascript/app/pages/trade/markets.jsx b/src/javascript/app/pages/trade/markets.jsx index 38d340f6630b4..3faa7b9c2ac3e 100644 --- a/src/javascript/app/pages/trade/markets.jsx +++ b/src/javascript/app/pages/trade/markets.jsx @@ -78,13 +78,13 @@ const List = ({ ) : (
{(obj.key === derived_category && isMobile()) &&
{obj.subgroup_name}
} -
+
{obj.name}
{Object.entries(obj.submarket).sort((a, b) => sortSubmarket(a[0], b[0])) @@ -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 @@ -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`; } diff --git a/src/sass/app/components/market.scss b/src/sass/app/components/market.scss index 16b7ce70936d1..5fd14f2d7faec 100644 --- a/src/sass/app/components/market.scss +++ b/src/sass/app/components/market.scss @@ -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; @@ -298,7 +298,7 @@ background: $COLOR_WHITE; @media (max-width: 767px) { top: 123px; - width: calc(100% - 20px); + width: calc(100% - 18px); } } &.put_under { @@ -313,7 +313,7 @@ color: $COLOR_BLUE; transition: none; @media (min-width: 320px) and (max-width: 767px) { - font-size: 20px; + font-size: 16px; } &.sticky { @@ -323,7 +323,7 @@ background: $COLOR_WHITE; @media (max-width: 767px) { top: 123px; - width: calc(100% - 20px); + width: calc(100% - 16px); } } &.put_under { @@ -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 { @@ -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 { From 63994089b72e61ca39d097024b1b2c521ed02b6e Mon Sep 17 00:00:00 2001 From: Aizad Ridzo Date: Mon, 14 Nov 2022 12:25:20 +0800 Subject: [PATCH 4/7] resolved: added mixins for duplicated styles --- src/javascript/app/pages/trade/markets.jsx | 2 +- src/sass/app/components/market.scss | 101 ++++++--------------- 2 files changed, 29 insertions(+), 74 deletions(-) diff --git a/src/javascript/app/pages/trade/markets.jsx b/src/javascript/app/pages/trade/markets.jsx index 3faa7b9c2ac3e..fd8c7d481872d 100644 --- a/src/javascript/app/pages/trade/markets.jsx +++ b/src/javascript/app/pages/trade/markets.jsx @@ -84,7 +84,7 @@ const List = ({ ref={saveRef.bind(null,obj.key)} > {(obj.key === derived_category && isMobile()) &&
{obj.subgroup_name}
} -
+
{obj.name}
{Object.entries(obj.submarket).sort((a, b) => sortSubmarket(a[0], b[0])) diff --git a/src/sass/app/components/market.scss b/src/sass/app/components/market.scss index 5fd14f2d7faec..64445e705c13d 100644 --- a/src/sass/app/components/market.scss +++ b/src/sass/app/components/market.scss @@ -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; @@ -284,47 +303,14 @@ &: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; - } - } .market_name { - font-size: 18px; - padding: 10px 0; - font-weight: 400; - flex: 1 0 auto; - color: $COLOR_BLUE; - transition: none; + @include market_name(18px, 400, $COLOR_BLUE); @media (min-width: 320px) and (max-width: 767px) { font-size: 16px; } &.sticky { - position: absolute; - width: 431px; - top: 60px; - background: $COLOR_WHITE; - @media (max-width: 767px) { - top: 123px; - width: calc(100% - 16px); - } + @include sticky(16px); } &.put_under { z-index: -1; @@ -337,11 +323,7 @@ margin-bottom: 10px; .submarket_name { - font-size: 12px; - padding: 10px 0 0; - flex: 1 0 auto; - font-weight: 300; - color: $COLOR_ORANGE; + @include market_name(12px, 300, $COLOR_ORANGE); @media (min-width: 320px) and (max-width: 767px) { font-size: 12px; } @@ -393,47 +375,24 @@ padding-bottom: 80px; } .label { - font-size: 18px; - padding: 10px 0px; - font-weight: 700; - flex: 1 0 auto; - color: $COLOR_BLUE; + @include market_name(18px,700, $COLOR_BLUE); &.sticky { - position: absolute; - width: 431px; - top: 60px; - background: $COLOR_WHITE; - @media (max-width: 767px) { - top: 123px; - width: calc(100% - 18px); - } + @include sticky(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; + .subgroup_name { + @include market_name(18px,400, $COLOR_BLUE); @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); - } + @include sticky(16px); } &.put_under { z-index: -1; @@ -447,11 +406,7 @@ margin-bottom: 10px; .submarket_name { - font-size: 12px; - padding: 10px 0 0; - flex: 1 0 auto; - font-weight: 300; - color: $COLOR_ORANGE; + @include market_name(12px, 300, $COLOR_ORANGE); @media (min-width: 320px) and (max-width: 767px) { font-size: 12px; } From 1b6aa1611da1fc4e54ca0b97b6301d7044af887e Mon Sep 17 00:00:00 2001 From: Aizad Ridzo Date: Tue, 22 Nov 2022 21:47:32 +0800 Subject: [PATCH 5/7] fix: change font size and font weight based on design --- src/sass/app/components/market.scss | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/sass/app/components/market.scss b/src/sass/app/components/market.scss index 64445e705c13d..9190c3ff0b6a1 100644 --- a/src/sass/app/components/market.scss +++ b/src/sass/app/components/market.scss @@ -304,7 +304,7 @@ padding-bottom: 80px; } .market_name { - @include market_name(18px, 400, $COLOR_BLUE); + @include market_name(18px, 500, $COLOR_BLUE); @media (min-width: 320px) and (max-width: 767px) { font-size: 16px; } @@ -323,10 +323,7 @@ margin-bottom: 10px; .submarket_name { - @include market_name(12px, 300, $COLOR_ORANGE); - @media (min-width: 320px) and (max-width: 767px) { - font-size: 12px; - } + @include market_name(12px, 400, $COLOR_ORANGE); } .symbols { display: flex; @@ -385,7 +382,7 @@ } } .subgroup_name { - @include market_name(18px,400, $COLOR_BLUE); + @include market_name(18px,500, $COLOR_BLUE); @media (min-width: 320px) and (max-width: 767px) { font-size: 16px; } @@ -406,7 +403,7 @@ margin-bottom: 10px; .submarket_name { - @include market_name(12px, 300, $COLOR_ORANGE); + @include market_name(12px, 400, $COLOR_ORANGE); @media (min-width: 320px) and (max-width: 767px) { font-size: 12px; } From fb9a820060d2fc32d4b82bb6651291b5cfb5b357 Mon Sep 17 00:00:00 2001 From: Aizad Ridzo Date: Wed, 23 Nov 2022 10:50:22 +0800 Subject: [PATCH 6/7] fix: font-weight for symbols --- src/sass/app/components/market.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sass/app/components/market.scss b/src/sass/app/components/market.scss index 9190c3ff0b6a1..5febd503b98b5 100644 --- a/src/sass/app/components/market.scss +++ b/src/sass/app/components/market.scss @@ -421,7 +421,7 @@ 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; From 6f8917646f8e2c935a2928d2bc73f7f3b574ed70 Mon Sep 17 00:00:00 2001 From: Aizad Ridzo Date: Thu, 24 Nov 2022 10:28:55 +0800 Subject: [PATCH 7/7] fix: change font-weight for symbols --- src/sass/app/components/market.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sass/app/components/market.scss b/src/sass/app/components/market.scss index 5febd503b98b5..9e79844dfdda3 100644 --- a/src/sass/app/components/market.scss +++ b/src/sass/app/components/market.scss @@ -338,7 +338,7 @@ 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;