Skip to content

Commit 3f9a71e

Browse files
JosemaJosema
committed
Mobile optimizations
1 parent 4883f4d commit 3f9a71e

File tree

4 files changed

+72
-33
lines changed

4 files changed

+72
-33
lines changed

‎src/components/partials/Header.js‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -182,11 +182,13 @@ function HeaderTemplate({
182182
<IconMenu size={28} color="white" />
183183
</div>
184184
</HeaderLeft>
185-
<HeaderCenter onClick={onHome}>
186-
<div>
187-
<IconHome size={15} color="white" />
188-
</div>
189-
<img src="/static/image/logo.svg" width="80" />
185+
<HeaderCenter>
186+
<HeaderLogo onClick={onHome}>
187+
<div>
188+
<IconHome size={15} color="white" />
189+
</div>
190+
<img src="/static/image/logo.svg" width="80" />
191+
</HeaderLogo>
190192

191193
{/* {Object.keys(cryptoPrices).map(symbol => {
192194
if ( typeof cryptoPrices[symbol] == 'number' && cryptoPrices[symbol]>0 )
@@ -280,16 +282,14 @@ const HeaderDiv = styled.div`
280282
margin: 0 ${styles.paddingOutMobile};
281283
}
282284
`
283-
const HeaderContent = styled.div`
284-
padding-top: 25px;
285-
`
285+
const HeaderContent = styled.div``
286286
const HeaderLeft = styled.div`
287+
margin-top: 28px;
287288
float: left;
288289
text-align: center;
289290
cursor: pointer;
290291
width: 28px;
291292
height: 28px;
292-
margin-top: 3px;
293293
min-height: 1px;
294294
box-shadow: 0 0 0px 4px rgba(255, 255, 255, 0);
295295
background: rgba(255, 255, 255, 0);
@@ -316,21 +316,23 @@ const HeaderCenter = styled.div`
316316
width: calc(100% - 60px);
317317
float: left;
318318
text-align: center;
319-
cursor: pointer;
320-
padding-top: 3px;
321319
position: relative;
320+
`
321+
const HeaderLogo = styled.div`
322+
cursor: pointer;
323+
padding-top: 10px;
324+
width: 100px;
325+
margin: 0 auto;
322326
& div {
323-
display: none;
324-
position: absolute;
325-
text-align: center;
326-
width: 100%;
327-
top: -18px;
327+
opacity: 0;
328328
}
329329
&:hover div {
330-
display: block;
330+
opacity: 1;
331331
}
332332
`
333+
333334
const HeaderRight = styled.div`
335+
margin-top: 25px;
334336
width: 30px;
335337
height: 30px;
336338
float: right;

‎src/components/partials/HeaderAsset.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,11 @@ const Right = styled.div`
168168
padding-top: 10px;
169169
float: right;
170170
${styles.media.fourth} {
171-
display: none;
171+
float: left;
172+
padding-top: 0;
173+
width: 100%;
174+
text-align: left;
175+
padding-left: 2px;
172176
}
173177
`
174178

@@ -183,4 +187,7 @@ const H1b = styled.div`
183187
font-size: 19px;
184188
line-height: 23px;
185189
}
190+
${styles.media.fourth} {
191+
display: none;
192+
}
186193
`

‎src/components/views/Dashboard.js‎

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -286,20 +286,20 @@ function DashboardTemplate({
286286
</AssetIcon>
287287
<AssetText>
288288
<AssetLeft>
289-
<AssetTitle1>
289+
<AssetLabel>
290290
{asset.label}
291-
</AssetTitle1>
292-
<AssetSubtitle>
291+
</AssetLabel>
292+
<AssetAddress>
293293
{asset.address}
294-
</AssetSubtitle>
294+
</AssetAddress>
295295
</AssetLeft>
296296
<AssetRight>
297-
<AssetTitle2>
297+
<AssetBalanceCurrency>
298298
{asset.balance_currency}
299-
</AssetTitle2>
300-
<AssetSubtitle>
299+
</AssetBalanceCurrency>
300+
<AssetBalance>
301301
{asset.balance_asset}
302-
</AssetSubtitle>
302+
</AssetBalance>
303303
</AssetRight>
304304
<AssetPercentage>
305305
<AssetPercentageLeft
@@ -375,6 +375,7 @@ const Left = styled.div`
375375
${styles.media.fourth} {
376376
width: 100%;
377377
float: none;
378+
height: 150px;
378379
}
379380
`
380381
const Right = styled.div`
@@ -386,10 +387,7 @@ const Right = styled.div`
386387
width: 100%;
387388
float: none;
388389
padding-left: 0;
389-
margin-top: 100px;
390390
clear: both;
391-
& > div {
392-
}
393391
}
394392
`
395393

@@ -440,6 +438,9 @@ const Category = styled.div`
440438

441439
const HeaderAsset = styled.div`
442440
min-height: 50px;
441+
${styles.media.fourth} {
442+
display: none;
443+
}
443444
`
444445

445446
const HeaderLeft = styled.div``
@@ -556,6 +557,11 @@ const Asset = styled.div`
556557
height: 120px;
557558
margin-left: 10px;
558559
}
560+
${styles.media.fourth} {
561+
height: auto;
562+
margin-left: 0;
563+
margin-top: 80px;
564+
}
559565
`
560566
const AssetIcon = styled.div`
561567
padding-top: 5px;
@@ -585,16 +591,19 @@ const AssetRight = styled.div`
585591
text-align: left;
586592
float: none;
587593
}
594+
${styles.media.fourth} {
595+
clear: none;
596+
}
588597
`
589598

590-
const AssetTitle1 = styled.div`
599+
const AssetLabel = styled.div`
591600
color: ${styles.color.front3};
592601
font-weight: bold;
593602
font-size: 16px;
594603
text-overflow: ellipsis;
595604
overflow: hidden;
596605
`
597-
const AssetTitle2 = styled.div`
606+
const AssetBalanceCurrency = styled.div`
598607
color: ${styles.color.front3};
599608
font-weight: bold;
600609
font-size: 16px;
@@ -607,7 +616,24 @@ const AssetTitle2 = styled.div`
607616
color: ${styles.color.grey1};
608617
}
609618
`
610-
const AssetSubtitle = styled.div`
619+
const AssetAddress = styled.div`
620+
padding-top: 3px;
621+
color: ${styles.color.grey1};
622+
letter-spacing: 0.5px;
623+
font-weight: 100;
624+
font-size: 12px;
625+
clear: both;
626+
text-overflow: ellipsis;
627+
overflow: hidden;
628+
line-height: 20px;
629+
${styles.media.third} {
630+
padding-top: 0;
631+
}
632+
${styles.media.fourth} {
633+
display: none;
634+
}
635+
`
636+
const AssetBalance = styled.div`
611637
padding-top: 3px;
612638
color: ${styles.color.grey1};
613639
letter-spacing: 0.5px;
@@ -621,6 +647,7 @@ const AssetSubtitle = styled.div`
621647
padding-top: 0;
622648
}
623649
`
650+
624651
const AssetPercentage = styled.div`
625652
padding-top: 3px;
626653
clear: both;
@@ -647,6 +674,9 @@ const AssetPercentageRight = styled.span`
647674
const CurrenciesStyled = styled.div`
648675
width: 200px;
649676
margin: 0 auto;
677+
${styles.media.fourth} {
678+
display: none;
679+
}
650680
`
651681
const Currency = styled.div`
652682
clear: both;

‎src/const/styles.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export default {
33
paddingOut: '50px',
44
paddingOutMobile: '15px',
55
paddingContent: '40px',
6-
paddingContentMobile: '30px',
6+
paddingContentMobile: '20px',
77
leftColumn: '250px',
88
leftColumnMobile: '300px',
99
media: {

0 commit comments

Comments
 (0)