Skip to content

Commit f615b0b

Browse files
uhlikskuhliksk
authored
fix: ui improvements (#452)
1 parent 5d15757 commit f615b0b

8 files changed

+203
-99
lines changed

‎public/css/App.css

+32-6
Original file line numberDiff line numberDiff line change
@@ -303,16 +303,37 @@ input[type='number'] {
303303
}
304304

305305
.coin-wrapper {
306-
width: 25%;
306+
width: 8.33%;
307307
-webkit-border-radius: 10px;
308308
-moz-border-radius: 10px;
309309
border-radius: 10px;
310310
padding: 5px;
311311
margin-bottom: 10px;
312-
flex: 25% auto;
312+
flex: 8.33% auto;
313+
}
314+
315+
@media (max-width: 3300px) {
316+
.coin-wrapper {
317+
width: 16.66%;
318+
flex: 16.66% auto;
319+
}
320+
}
321+
322+
@media (max-width: 1650px) {
323+
.coin-wrapper {
324+
width: 25%;
325+
flex: 25% auto;
326+
}
313327
}
314328

315-
@media (max-width: 1200px) {
329+
@media (max-width: 1100px) {
330+
.coin-wrapper {
331+
width: 33.33%;
332+
flex: 33.33% auto;
333+
}
334+
}
335+
336+
@media (max-width: 825px) {
316337
.coin-wrapper {
317338
width: 50%;
318339
flex: 50% auto;
@@ -447,11 +468,11 @@ input[type='number'] {
447468
}
448469

449470
.coin-info-label {
450-
width: 65%;
471+
width: auto;
451472
}
452473

453474
.coin-info-value {
454-
width: 35%;
475+
width: auto;
455476
}
456477

457478
.coin-info-column-title .coin-info-label {
@@ -967,6 +988,11 @@ input[type='number'] {
967988
background-color: #272b38;
968989
border-color: #343a40;
969990
}
991+
992+
.pagination .page-item {
993+
min-width: 2rem;
994+
text-align: center;
995+
}
970996
/**
971997
End: Pagination
972-
*/
998+
*/

‎public/js/App.js

+14-22
Original file line numberDiff line numberDiff line change
@@ -349,28 +349,19 @@ class App extends React.Component {
349349
disabled={page === 1 || totalPages === 1}
350350
/>
351351
);
352-
[...Array(3).keys()].forEach(index => {
353-
if (page === 1 && index === 0) {
354-
paginationItems.push(
355-
<Pagination.Item
356-
active
357-
key={`pagination-item-${index}`}
358-
onClick={() => this.setPage(page)}>
359-
{page}
360-
</Pagination.Item>
361-
);
362-
} else {
363-
const pageNum = page === 1 ? page + index : page + index - 1;
364-
paginationItems.push(
365-
<Pagination.Item
366-
active={pageNum === page}
367-
disabled={pageNum > totalPages}
368-
key={`pagination-item-${index}`}
369-
onClick={() => this.setPage(pageNum)}>
370-
{pageNum}
371-
</Pagination.Item>
372-
);
373-
}
352+
const maxButtons = 8;
353+
const buttons = Math.min( maxButtons , ~~totalPages );
354+
[...Array(buttons).keys()].forEach(x => {
355+
const pageNum = Math.min( Math.max( x + 1 , page + x + 1 - Math.ceil( buttons / 2 ) ) , totalPages + x + 1 - buttons );
356+
paginationItems.push(
357+
<Pagination.Item
358+
active={pageNum === page}
359+
disabled={pageNum > totalPages}
360+
key={`pagination-item-${x}`}
361+
onClick={() => this.setPage(pageNum)}>
362+
{pageNum}
363+
</Pagination.Item>
364+
);
374365
});
375366
paginationItems.push(
376367
<Pagination.Next
@@ -421,6 +412,7 @@ class App extends React.Component {
421412
/>
422413
<OrderStats orderStats={orderStats} />
423414
</div>
415+
<Pagination>{paginationItems}</Pagination>
424416
<div className='coin-wrappers'>{coinWrappers}</div>
425417
<Pagination>{paginationItems}</Pagination>
426418
<div className='app-body-footer-wrapper'>

‎public/js/CoinWrapperAction.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,13 @@ class CoinWrapperAction extends React.Component {
7575
);
7676
}
7777

78-
const updatedAt = moment.utc(buy.updatedAt, 'YYYY-MM-DDTHH:mm:ss.SSSSSS');
79-
const currentTime = moment.utc();
78+
const updatedAt = moment.utc(buy.updatedAt, 'YYYY-MM-DDTHH:mm:ss.SSSSSS').local();
79+
const currentTime = moment.utc().local();
8080

8181
return (
8282
<div className='coin-info-sub-wrapper'>
8383
<div className='coin-info-column coin-info-column-title border-bottom-0 mb-0 pb-0'>
84-
<div className='coin-info-label w-40'>
84+
<div className='coin-info-label'>
8585
Action -{' '}
8686
<span className='coin-info-value'>
8787
{updatedAt.format('HH:mm:ss')}
@@ -121,7 +121,7 @@ class CoinWrapperAction extends React.Component {
121121
)}
122122
</div>
123123

124-
<div className='d-flex flex-column align-items-end w-60'>
124+
<div className='d-flex flex-column align-items-end'>
125125
<HightlightChange className='action-label'>
126126
{label}
127127
</HightlightChange>

‎public/js/CoinWrapperBuySignal.js

+27
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,34 @@ class CoinWrapperBuySignal extends React.Component {
4040
buy: { currentGridTradeIndex, gridTrade }
4141
} = symbolConfiguration;
4242

43+
let hiddenCount = 0;
44+
4345
const buyGridRows = gridTrade.map((grid, i) => {
46+
const modifiedGridTradeIndex = Math.min( Math.max ( currentGridTradeIndex , 5 ) , gridTrade.length - 5 );
47+
48+
function hiddenRow(i) {
49+
return i >= 3 && ( i <= modifiedGridTradeIndex - 3 || i >= modifiedGridTradeIndex + 4 ) && i < gridTrade.length - 1;
50+
}
51+
52+
const isNextHidden = hiddenRow( i + 1 );
53+
const isHidden = isNextHidden || hiddenRow( i );
54+
55+
if ( isHidden === true ) {
56+
hiddenCount++;
57+
58+
return isNextHidden === true ? ('') : (
59+
<React.Fragment key={'coin-wrapper-buy-grid-row-hidden-' + symbol + '-' + (i - 1)}>
60+
<div className='coin-info-column-grid'>
61+
<div className='coin-info-column coin-info-column-price'>
62+
<div className='coin-info-label text-center'>... {hiddenCount} grid trade{hiddenCount === 1 ? '' : 's'} hidden ...</div>
63+
</div>
64+
</div>
65+
</React.Fragment>
66+
);
67+
} else {
68+
hiddenCount = 0;
69+
}
70+
4471
return (
4572
<React.Fragment key={'coin-wrapper-buy-grid-row-' + symbol + '-' + i}>
4673
<div className='coin-info-column-grid'>

‎public/js/CoinWrapperSellSignal.js

+27
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,34 @@ class CoinWrapperSellSignal extends React.Component {
4242
sell: { currentGridTradeIndex, gridTrade }
4343
} = symbolConfiguration;
4444

45+
let hiddenCount = 0;
46+
4547
const sellGridRows = gridTrade.map((grid, i) => {
48+
const modifiedGridTradeIndex = Math.min( Math.max ( currentGridTradeIndex , 5 ) , gridTrade.length - 5 );
49+
50+
function hiddenRow(i) {
51+
return i >= 3 && ( i <= modifiedGridTradeIndex - 3 || i >= modifiedGridTradeIndex + 4 ) && i < gridTrade.length - 1;
52+
}
53+
54+
const isNextHidden = hiddenRow( i + 1 );
55+
const isHidden = isNextHidden || hiddenRow( i );
56+
57+
if ( isHidden === true ) {
58+
hiddenCount++;
59+
60+
return isNextHidden === true ? ('') : (
61+
<React.Fragment key={'coin-wrapper-buy-grid-row-hidden-' + symbol + '-' + (i - 1)}>
62+
<div className='coin-info-column-grid'>
63+
<div className='coin-info-column coin-info-column-price'>
64+
<div className='coin-info-label text-center'>... {hiddenCount} grid trade{hiddenCount === 1 ? '' : 's'} hidden ...</div>
65+
</div>
66+
</div>
67+
</React.Fragment>
68+
);
69+
} else {
70+
hiddenCount = 0;
71+
}
72+
4673
return (
4774
<React.Fragment key={'coin-wrapper-sell-grid-row-' + symbol + '-' + i}>
4875
<div className='coin-info-column-grid'>

‎public/js/QuoteAssetGridTradeArchiveIcon.js

+35-22
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,13 @@ class QuoteAssetGridTradeArchiveIcon extends React.Component {
267267

268268
const totalPages = Math.ceil(stats.trades / limit);
269269
// If total
270+
paginationItems.push(
271+
<Pagination.First
272+
key='first'
273+
disabled={page === 1 || totalPages === 1}
274+
onClick={() => this.setPage(1)}
275+
/>
276+
);
270277
if (page === 1 || totalPages === 1) {
271278
paginationItems.push(
272279
<Pagination.Prev key='pagination-item-prev' disabled />
@@ -279,28 +286,19 @@ class QuoteAssetGridTradeArchiveIcon extends React.Component {
279286
/>
280287
);
281288
}
282-
[...Array(3).keys()].forEach(x => {
283-
if (page === 1 && x === 0) {
284-
paginationItems.push(
285-
<Pagination.Item
286-
active
287-
key={`pagination-item-${x}`}
288-
onClick={() => this.setPage(page)}>
289-
{page}
290-
</Pagination.Item>
291-
);
292-
} else {
293-
const pageNum = page === 1 ? page + x : page + x - 1;
294-
paginationItems.push(
295-
<Pagination.Item
296-
active={pageNum === page}
297-
disabled={pageNum > totalPages}
298-
key={`pagination-item-${x}`}
299-
onClick={() => this.setPage(pageNum)}>
300-
{pageNum}
301-
</Pagination.Item>
302-
);
303-
}
289+
const maxButtons = 8;
290+
const buttons = Math.min( maxButtons , ~~totalPages );
291+
[...Array(buttons).keys()].forEach(x => {
292+
const pageNum = Math.min( Math.max( x + 1 , page + x + 1 - Math.ceil( buttons / 2 ) ) , totalPages + x + 1 - buttons );
293+
paginationItems.push(
294+
<Pagination.Item
295+
active={pageNum === page}
296+
disabled={pageNum > totalPages}
297+
key={`pagination-item-${x}`}
298+
onClick={() => this.setPage(pageNum)}>
299+
{pageNum}
300+
</Pagination.Item>
301+
);
304302
});
305303
if (page === totalPages || page >= totalPages) {
306304
paginationItems.push(
@@ -314,6 +312,14 @@ class QuoteAssetGridTradeArchiveIcon extends React.Component {
314312
/>
315313
);
316314
}
315+
const lastPage = totalPages;
316+
paginationItems.push(
317+
<Pagination.Last
318+
key='last'
319+
disabled={page === totalPages || page >= totalPages}
320+
onClick={() => this.setPage(lastPage)}
321+
/>
322+
);
317323

318324
return (
319325
<div className='coin-info-quote-asset-grid-trade-archive-wrapper d-inline-block'>
@@ -462,6 +468,13 @@ class QuoteAssetGridTradeArchiveIcon extends React.Component {
462468
) : (
463469
<React.Fragment>
464470
<div className='row'>
471+
<div className='d-flex w-100 flex-row justify-content-between px-3 mb-2'>
472+
<Pagination
473+
className='justify-content-center mb-0'
474+
size='sm'>
475+
{paginationItems}
476+
</Pagination>
477+
</div>
465478
<Table striped bordered hover size='sm' responsive>
466479
<thead>
467480
<tr>

‎public/js/SymbolGridTradeArchiveIcon.js

+35-22
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,13 @@ class SymbolGridTradeArchiveIcon extends React.Component {
269269

270270
const totalPages = Math.ceil(stats.trades / limit);
271271
// If total
272+
paginationItems.push(
273+
<Pagination.First
274+
key='first'
275+
disabled={page === 1 || totalPages === 1}
276+
onClick={() => this.setPage(1)}
277+
/>
278+
);
272279
if (page === 1 || totalPages === 1) {
273280
paginationItems.push(
274281
<Pagination.Prev key='pagination-item-prev' disabled />
@@ -281,28 +288,19 @@ class SymbolGridTradeArchiveIcon extends React.Component {
281288
/>
282289
);
283290
}
284-
[...Array(3).keys()].forEach(x => {
285-
if (page === 1 && x === 0) {
286-
paginationItems.push(
287-
<Pagination.Item
288-
active
289-
key={`pagination-item-${x}`}
290-
onClick={() => this.setPage(page)}>
291-
{page}
292-
</Pagination.Item>
293-
);
294-
} else {
295-
const pageNum = page === 1 ? page + x : page + x - 1;
296-
paginationItems.push(
297-
<Pagination.Item
298-
active={pageNum === page}
299-
disabled={pageNum > totalPages}
300-
key={`pagination-item-${x}`}
301-
onClick={() => this.setPage(pageNum)}>
302-
{pageNum}
303-
</Pagination.Item>
304-
);
305-
}
291+
const maxButtons = 8;
292+
const buttons = Math.min( maxButtons , ~~totalPages );
293+
[...Array(buttons).keys()].forEach(x => {
294+
const pageNum = Math.min( Math.max( x + 1 , page + x + 1 - Math.ceil( buttons / 2 ) ) , totalPages + x + 1 - buttons );
295+
paginationItems.push(
296+
<Pagination.Item
297+
active={pageNum === page}
298+
disabled={pageNum > totalPages}
299+
key={`pagination-item-${x}`}
300+
onClick={() => this.setPage(pageNum)}>
301+
{pageNum}
302+
</Pagination.Item>
303+
);
306304
});
307305
if (page === totalPages || page >= totalPages) {
308306
paginationItems.push(
@@ -316,6 +314,14 @@ class SymbolGridTradeArchiveIcon extends React.Component {
316314
/>
317315
);
318316
}
317+
const lastPage = totalPages;
318+
paginationItems.push(
319+
<Pagination.Last
320+
key='last'
321+
disabled={page === totalPages || page >= totalPages}
322+
onClick={() => this.setPage(lastPage)}
323+
/>
324+
);
319325

320326
return (
321327
<div className='coin-info-symbol-grid-trade-archive-wrapper'>
@@ -464,6 +470,13 @@ class SymbolGridTradeArchiveIcon extends React.Component {
464470
) : (
465471
<React.Fragment>
466472
<div className='row'>
473+
<div className='d-flex w-100 flex-row justify-content-between px-3 mb-2'>
474+
<Pagination
475+
className='justify-content-center mb-0'
476+
size='sm'>
477+
{paginationItems}
478+
</Pagination>
479+
</div>
467480
<Table striped bordered hover size='sm' responsive>
468481
<thead>
469482
<tr>

0 commit comments

Comments
 (0)