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

Commit 596fe3a

Browse files
aizad-derivmatin-deriv
aizad-deriv
and
matin-deriv
authored
fix: move Derived to the correct position based on requirements (#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 <matin@deriv.com>
1 parent 5a834cf commit 596fe3a

File tree

2 files changed

+113
-33
lines changed

2 files changed

+113
-33
lines changed

‎src/javascript/app/pages/trade/markets.jsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,13 @@ const List = ({
7878
) : (
7979
<div key={`${item}_${idx}`}>
8080
<div
81-
className='market'
81+
className='subgroup'
8282
key={idx}
8383
id={`${obj.key}_market`}
8484
ref={saveRef.bind(null,obj.key)}
8585
>
8686
{(obj.key === derived_category && isMobile()) && <div className='label'>{obj.subgroup_name}</div>}
87-
<div className='market_name'>
87+
<div className='subgroup_name'>
8888
{obj.name}
8989
</div>
9090
{Object.entries(obj.submarket).sort((a, b) => sortSubmarket(a[0], b[0]))
@@ -329,6 +329,7 @@ class Markets extends React.Component {
329329
const class_under = 'put_under';
330330
const TITLE_HEIGHT = 40;
331331
const DEFAULT_TOP = this.references.list.offsetTop;
332+
const SUBGROUP_LABEL = document.getElementsByClassName('label');
332333

333334
const current_viewed_node = Object.values(market_nodes).find(node => (
334335
node.dataset.offsetTop <= position
@@ -355,11 +356,12 @@ class Markets extends React.Component {
355356
current_viewed_node.children[0].removeAttribute('style');
356357
current_viewed_node.children[0].classList.remove(class_under);
357358
}
358-
if (Object.values(current_viewed_node.children[0].classList).includes('label')) {
359-
current_viewed_node.children[1].classList.add(class_sticky);
360-
} else {
361-
current_viewed_node.children[0].classList.add(class_sticky);
359+
if (isMobile() && (current_viewed_node.classList.contains('subgroup') && !current_viewed_node.classList.contains('label'))) {
360+
SUBGROUP_LABEL[0].classList.add(class_sticky);
361+
SUBGROUP_LABEL[0].removeAttribute('style');
362+
SUBGROUP_LABEL[0].classList.remove(class_under);
362363
}
364+
current_viewed_node.children[0].classList.add(class_sticky);
363365
current_viewed_node.style.paddingTop = `${TITLE_HEIGHT}px`;
364366
}
365367

‎src/sass/app/components/market.scss‎

Lines changed: 105 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
@mixin market_name($FONT-SIZE, $FONT-WEIGHT, $COLOR) {
2+
font-size: $FONT-SIZE;
3+
padding: 10px 0;
4+
font-weight: $FONT-WEIGHT;
5+
flex: 1 0 auto;
6+
color: $COLOR;
7+
transition: none;
8+
}
9+
@mixin sticky($FONT-WEIGHT) {
10+
position: absolute;
11+
width: 431px;
12+
top: 60px;
13+
background: $COLOR_WHITE;
14+
@media (max-width: 767px) {
15+
top: 123px;
16+
width: calc(100% - $FONT-WEIGHT);
17+
}
18+
}
19+
120
.markets {
221
min-width: 120px;
322
position: relative;
@@ -284,31 +303,14 @@
284303
&:last-of-type {
285304
padding-bottom: 80px;
286305
}
287-
.label {
288-
font-size: 20px;
289-
padding: 16px 0px;
290-
font-weight: 700;
291-
}
292306
.market_name {
293-
font-size: 18px;
294-
padding: 10px 0;
295-
font-weight: 400;
296-
flex: 1 0 auto;
297-
color: $COLOR_BLUE;
298-
transition: none;
307+
@include market_name(18px, 500, $COLOR_BLUE);
299308
@media (min-width: 320px) and (max-width: 767px) {
300-
font-size: 20px;
309+
font-size: 16px;
301310
}
302311

303312
&.sticky {
304-
position: absolute;
305-
width: 431px;
306-
top: 60px;
307-
background: $COLOR_WHITE;
308-
@media (max-width: 767px) {
309-
top: 123px;
310-
width: calc(100% - 20px);
311-
}
313+
@include sticky(16px);
312314
}
313315
&.put_under {
314316
z-index: -1;
@@ -321,13 +323,89 @@
321323
margin-bottom: 10px;
322324

323325
.submarket_name {
324-
font-size: 12px;
325-
padding: 10px 0 0;
326+
@include market_name(12px, 400, $COLOR_ORANGE);
327+
}
328+
.symbols {
329+
display: flex;
330+
flex-wrap: wrap;
331+
flex-direction: row;
326332
flex: 1 0 auto;
327-
font-weight: 300;
328-
color: $COLOR_ORANGE;
329-
@media (min-width: 320px) and (max-width: 767px) {
333+
334+
.symbol_name {
335+
padding: 5px;
336+
margin: 10px 0 5px 5px;
337+
line-height: 18px;
338+
cursor: pointer;
339+
width: 162px;
330340
font-size: 14px;
341+
font-weight: 500;
342+
transition: all 0.2s;
343+
@media (min-width: 320px) and (max-width: 767px) {
344+
width: 200px;
345+
font-size: 14px;
346+
}
347+
348+
&:hover {
349+
background: $COLOR_GRAY;
350+
}
351+
&.active {
352+
background: $COLOR_BLUE;
353+
color: $COLOR_WHITE;
354+
@media (min-width: 320px) and (max-width: 767px) {
355+
background: $COLOR_BLUE;
356+
color: $COLOR_WHITE;
357+
font-weight: normal;
358+
padding-left: 5px;
359+
}
360+
}
361+
}
362+
}
363+
}
364+
}
365+
.subgroup {
366+
display: flex;
367+
flex-direction: column;
368+
flex: 0 0 auto;
369+
padding-bottom: 40px;
370+
371+
&:last-of-type {
372+
padding-bottom: 80px;
373+
}
374+
.label {
375+
@include market_name(18px,700, $COLOR_BLUE);
376+
377+
&.sticky {
378+
@include sticky(18px);
379+
}
380+
&.put_under {
381+
z-index: -1;
382+
}
383+
}
384+
.subgroup_name {
385+
@include market_name(18px,500, $COLOR_BLUE);
386+
@media (min-width: 320px) and (max-width: 767px) {
387+
font-size: 16px;
388+
}
389+
390+
@media (min-width: 767px) {
391+
&.sticky {
392+
@include sticky(16px);
393+
}
394+
&.put_under {
395+
z-index: -1;
396+
}
397+
}
398+
}
399+
.submarket {
400+
display: flex;
401+
flex-direction: column;
402+
flex: 1 0 auto;
403+
margin-bottom: 10px;
404+
405+
.submarket_name {
406+
@include market_name(12px, 400, $COLOR_ORANGE);
407+
@media (min-width: 320px) and (max-width: 767px) {
408+
font-size: 12px;
331409
}
332410
}
333411
.symbols {
@@ -343,11 +421,11 @@
343421
cursor: pointer;
344422
width: 162px;
345423
font-size: 14px;
346-
font-weight: 400;
424+
font-weight: 500;
347425
transition: all 0.2s;
348426
@media (min-width: 320px) and (max-width: 767px) {
349427
width: 200px;
350-
font-size: 16px;
428+
font-size: 14px;
351429
}
352430

353431
&:hover {

0 commit comments

Comments
 (0)