mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 03:36:18 +02:00
Handle large token balances in tx list hero
This commit is contained in:
parent
40fad61908
commit
1f6f4977de
@ -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,
|
||||||
|
@ -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),
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user