1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Handle large token balances in tx list hero

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

View File

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

View File

@ -34,7 +34,7 @@ TokenBalance.prototype.render = function () {
return isLoading
? h('span', '')
: 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),
])
}

View File

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

View File

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