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

Commit 004cc9e

Browse files
aizad-derivaizad-deriv
committed
fix: Derived label now sticky for Synthetics
1 parent c61b88e commit 004cc9e

File tree

2 files changed

+124
-8
lines changed

2 files changed

+124
-8
lines changed

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

Lines changed: 8 additions & 2 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,6 +356,11 @@ class Markets extends React.Component {
355356
current_viewed_node.children[0].removeAttribute('style');
356357
current_viewed_node.children[0].classList.remove(class_under);
357358
}
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);
363+
}
358364
current_viewed_node.children[0].classList.add(class_sticky);
359365
current_viewed_node.style.paddingTop = `${TITLE_HEIGHT}px`;
360366
}

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

Lines changed: 116 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -285,8 +285,8 @@
285285
padding-bottom: 80px;
286286
}
287287
.label {
288-
font-size: 20px;
289-
padding: 16px 0px;
288+
font-size: 18px;
289+
padding: 10px 0px;
290290
font-weight: 700;
291291
flex: 1 0 auto;
292292
color: $COLOR_BLUE;
@@ -298,7 +298,7 @@
298298
background: $COLOR_WHITE;
299299
@media (max-width: 767px) {
300300
top: 123px;
301-
width: calc(100% - 20px);
301+
width: calc(100% - 18px);
302302
}
303303
}
304304
&.put_under {
@@ -313,7 +313,7 @@
313313
color: $COLOR_BLUE;
314314
transition: none;
315315
@media (min-width: 320px) and (max-width: 767px) {
316-
font-size: 20px;
316+
font-size: 16px;
317317
}
318318

319319
&.sticky {
@@ -323,7 +323,7 @@
323323
background: $COLOR_WHITE;
324324
@media (max-width: 767px) {
325325
top: 123px;
326-
width: calc(100% - 20px);
326+
width: calc(100% - 16px);
327327
}
328328
}
329329
&.put_under {
@@ -343,7 +343,117 @@
343343
font-weight: 300;
344344
color: $COLOR_ORANGE;
345345
@media (min-width: 320px) and (max-width: 767px) {
346+
font-size: 12px;
347+
}
348+
}
349+
.symbols {
350+
display: flex;
351+
flex-wrap: wrap;
352+
flex-direction: row;
353+
flex: 1 0 auto;
354+
355+
.symbol_name {
356+
padding: 5px;
357+
margin: 10px 0 5px 5px;
358+
line-height: 18px;
359+
cursor: pointer;
360+
width: 162px;
346361
font-size: 14px;
362+
font-weight: 400;
363+
transition: all 0.2s;
364+
@media (min-width: 320px) and (max-width: 767px) {
365+
width: 200px;
366+
font-size: 14px;
367+
}
368+
369+
&:hover {
370+
background: $COLOR_GRAY;
371+
}
372+
&.active {
373+
background: $COLOR_BLUE;
374+
color: $COLOR_WHITE;
375+
@media (min-width: 320px) and (max-width: 767px) {
376+
background: $COLOR_BLUE;
377+
color: $COLOR_WHITE;
378+
font-weight: normal;
379+
padding-left: 5px;
380+
}
381+
}
382+
}
383+
}
384+
}
385+
}
386+
.subgroup {
387+
display: flex;
388+
flex-direction: column;
389+
flex: 0 0 auto;
390+
padding-bottom: 40px;
391+
392+
&:last-of-type {
393+
padding-bottom: 80px;
394+
}
395+
.label {
396+
font-size: 18px;
397+
padding: 10px 0px;
398+
font-weight: 700;
399+
flex: 1 0 auto;
400+
color: $COLOR_BLUE;
401+
402+
&.sticky {
403+
position: absolute;
404+
width: 431px;
405+
top: 60px;
406+
background: $COLOR_WHITE;
407+
@media (max-width: 767px) {
408+
top: 123px;
409+
width: calc(100% - 18px);
410+
}
411+
}
412+
&.put_under {
413+
z-index: -1;
414+
}
415+
}
416+
.subgroup-name {
417+
font-size: 18px;
418+
padding: 10px 0;
419+
font-weight: 400;
420+
flex: 1 0 auto;
421+
color: $COLOR_BLUE;
422+
transition: none;
423+
@media (min-width: 320px) and (max-width: 767px) {
424+
font-size: 16px;
425+
}
426+
427+
@media (min-width: 767px) {
428+
&.sticky {
429+
position: absolute;
430+
width: 431px;
431+
top: 60px;
432+
background: $COLOR_WHITE;
433+
@media (max-width: 767px) {
434+
top: 123px;
435+
width: calc(100% - 16px);
436+
}
437+
}
438+
&.put_under {
439+
z-index: -1;
440+
}
441+
}
442+
}
443+
.submarket {
444+
display: flex;
445+
flex-direction: column;
446+
flex: 1 0 auto;
447+
margin-bottom: 10px;
448+
449+
.submarket_name {
450+
font-size: 12px;
451+
padding: 10px 0 0;
452+
flex: 1 0 auto;
453+
font-weight: 300;
454+
color: $COLOR_ORANGE;
455+
@media (min-width: 320px) and (max-width: 767px) {
456+
font-size: 12px;
347457
}
348458
}
349459
.symbols {
@@ -363,7 +473,7 @@
363473
transition: all 0.2s;
364474
@media (min-width: 320px) and (max-width: 767px) {
365475
width: 200px;
366-
font-size: 16px;
476+
font-size: 14px;
367477
}
368478

369479
&:hover {

0 commit comments

Comments
 (0)