diff options
author | Whymarrh Whitby <whymarrh.whitby@gmail.com> | 2018-06-19 07:30:44 +0800 |
---|---|---|
committer | Whymarrh Whitby <whymarrh.whitby@gmail.com> | 2018-06-21 02:45:17 +0800 |
commit | 1f6f4977deb19543e4a4bd22d3f5126db931c4a2 (patch) | |
tree | 9d6658407f2b97a564375bf48a21ea21207dc2ab /ui/app | |
parent | 40fad619088bd955d5505cc839a7521ac43235f9 (diff) | |
download | tangerine-wallet-browser-1f6f4977deb19543e4a4bd22d3f5126db931c4a2.tar tangerine-wallet-browser-1f6f4977deb19543e4a4bd22d3f5126db931c4a2.tar.gz tangerine-wallet-browser-1f6f4977deb19543e4a4bd22d3f5126db931c4a2.tar.bz2 tangerine-wallet-browser-1f6f4977deb19543e4a4bd22d3f5126db931c4a2.tar.lz tangerine-wallet-browser-1f6f4977deb19543e4a4bd22d3f5126db931c4a2.tar.xz tangerine-wallet-browser-1f6f4977deb19543e4a4bd22d3f5126db931c4a2.tar.zst tangerine-wallet-browser-1f6f4977deb19543e4a4bd22d3f5126db931c4a2.zip |
Handle large token balances in tx list hero
Diffstat (limited to 'ui/app')
-rw-r--r-- | ui/app/components/identicon.js | 1 | ||||
-rw-r--r-- | ui/app/components/token-balance.js | 2 | ||||
-rw-r--r-- | ui/app/css/itcss/components/hero-balance.scss | 15 | ||||
-rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 8 |
4 files changed, 21 insertions, 5 deletions
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index dce9b0449..424048745 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -36,6 +36,7 @@ IdenticonComponent.prototype.render = function () { key: 'identicon-' + address, style: { display: 'flex', + flexShrink: 0, alignItems: 'center', justifyContent: 'center', height: diameter, diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index 1900ccec7..df3bd59bb 100644 --- a/ui/app/components/token-balance.js +++ b/ui/app/components/token-balance.js @@ -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), ]) } diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 09d66aedd..eba93ecb4 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -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; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index bbe0ee661..667e45ba2 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -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 |