m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-23 03:36:18 +02:00
Code

Handle large token balances in tx list hero

Browse Source
This commit is contained in:
Whymarrh Whitby 2018-06-18 21:00:44 -02:30
parent 40fad61908
commit 1f6f4977de
4 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/app/components/identicon.js
View File

@ -36,6 +36,7 @@ IdenticonComponent.prototype.render = function () {
key: 'identicon-' + address, key: 'identicon-' + address,
style: { style: {
display: 'flex', display: 'flex',
flexShrink: 0,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
height: diameter, height: diameter,

2
ui/app/components/token-balance.js
View File

@ -34,7 +34,7 @@ TokenBalance.prototype.render = function () {
return isLoading return isLoading
? h('span', '') ? h('span', '')
: h('span.token-balance', [ : h('span.token-balance', [
h('span.token-balance__amount', string), h('span.hide-text-overflow.token-balance__amount', string),
!balanceOnly && h('span.token-balance__symbol', symbol), !balanceOnly && h('span.token-balance__symbol', symbol),
]) ])
} }

15
ui/app/css/itcss/components/hero-balance.scss
View File

@ -27,25 +27,37 @@
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
flex-direction: column; flex-direction: column;
flex: 0 0 auto; flex: 0 0 auto;
max-width: 100%;
} }
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {
flex-direction: row; flex-direction: row;
flex-grow: 3; flex-grow: 3;
min-width: 0;
} }
} }
.balance-display { .balance-display {
.token-amount { .token-amount {
color: $black; color: $black;
max-width: 100%;
.token-balance {
display: flex;
}
} }
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
max-width: 100%;
text-align: center; text-align: center;
.token-amount { .token-amount {
font-size: 1.75rem; font-size: 1.75rem;
margin-top: 1rem; margin-top: 1rem;
.token-balance {
flex-direction: column;
}
} }
.fiat-amount { .fiat-amount {
@ -56,9 +68,10 @@
} }
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {
margin-left: .8em; margin: 0 .8em;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
min-width: 0;
.token-amount { .token-amount {
font-size: 1.5rem; font-size: 1.5rem;

8
ui/app/css/itcss/components/newui-sections.scss
View File

@ -26,14 +26,16 @@ $wallet-view-bg: $alabaster;
//Account and transaction details //Account and transaction details
.account-and-transaction-details { .account-and-transaction-details {
display: flex; display: flex;
flex: 1 0 auto; flex: 1 1 auto;
min-width: 0;
} }
// tx view // tx view
.tx-view { .tx-view {
flex: 63.5 0 66.5%; flex: 1 1 66.5%;
background: $tx-view-bg; background: $tx-view-bg;
min-width: 0;
// No title on mobile // No title on mobile
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
@ -286,7 +288,7 @@ $wallet-view-bg: $alabaster;
} }
.token-balance__amount { .token-balance__amount {
padding-right: 6px; padding: 0 6px;
} }
// first time // first time