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/css | |
| 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/css')
| -rw-r--r-- | ui/app/css/itcss/components/hero-balance.scss | 15 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 8 |
2 files changed, 19 insertions, 4 deletions
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 |