diff options
| -rw-r--r-- | ui/app/account-and-transaction-details.js | 7 | ||||
| -rw-r--r-- | ui/app/components/token-cell.js | 29 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/hero-balance.scss | 24 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 13 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/token-list.scss | 21 |
5 files changed, 70 insertions, 24 deletions
diff --git a/ui/app/account-and-transaction-details.js b/ui/app/account-and-transaction-details.js index 60293de77..03101d37a 100644 --- a/ui/app/account-and-transaction-details.js +++ b/ui/app/account-and-transaction-details.js @@ -13,12 +13,7 @@ function AccountAndTransactionDetails () { } AccountAndTransactionDetails.prototype.render = function () { - return h('div', { - style: { - display: 'flex', - flex: '1 0 auto', - }, - }, [ + return h('div.account-and-transaction-details', [ // wallet h(WalletView, { style: { diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index 59552f4a0..a5d032a0d 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -111,20 +111,25 @@ TokenCell.prototype.render = function () { network, }), - h('h.token-list-item__balance-wrapper', null, [ - h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`), + h('div.token-list-item__balance-ellipsis', [ - showFiat && h('div.token-list-item__fiat-amount', { - style: {}, - }, formattedFiat), - ]), + h('h.token-list-item__balance-wrapper', null, [ + h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`), - h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', { - onClick: (e) => { - e.stopPropagation() - this.setState({ tokenMenuOpen: true }) - }, - }), + showFiat && h('div.token-list-item__fiat-amount', { + style: {}, + }, formattedFiat), + ]), + + h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', { + onClick: (e) => { + e.stopPropagation() + this.setState({ tokenMenuOpen: true }) + }, + }), + + ]), + tokenMenuOpen && h(TokenMenuDropdown, { onClose: () => this.setState({ tokenMenuOpen: false }), diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index ccc9a0118..4af0c2c55 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -71,6 +71,22 @@ font-size: 105%; } } + + @media #{$sub-mid-size-breakpoint-range} { + margin-left: .4em; + margin-right: .4em; + justify-content: flex-start; + align-items: flex-start; + + .token-amount { + font-size: 1rem; + } + + .fiat-amount { + margin-top: .25%; + font-size: 1rem; + } + } } .hero-balance-buttons { @@ -91,4 +107,12 @@ .hero-balance-button { width: 6rem; + + @media #{$sub-mid-size-breakpoint-range} { + padding: 0.4rem; + width: 4rem; + display: flex; + flex: 1; + justify-content: center; + } } diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 37fabf254..a5e4523b9 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -1,3 +1,6 @@ +$sub-mid-size-breakpoint: 667px; +$sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$sub-mid-size-breakpoint})"; + /* NewUI Container Elements */ @@ -20,6 +23,12 @@ $wallet-view-bg: $alabaster; display: none; } +//Account and transaction details +.account-and-transaction-details { + display: flex; + flex: 1 0 auto; +} + // tx view .tx-view { @@ -60,6 +69,10 @@ $wallet-view-bg: $alabaster; overflow-x: hidden; } + @media #{$sub-mid-size-breakpoint-range} { + min-width: 160px; + } + .wallet-view-account-details { flex: 0 0 auto; } diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index e24bf812b..e90418c97 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -15,7 +15,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( font-size: 1.5rem; @media #{$wallet-balance-breakpoint-range} { - font-size: 105%; + font-size: 95%; } } @@ -41,17 +41,22 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( &__identicon { margin-right: 15px; border: '1px solid #dedede'; + min-width: 50px; @media #{$wallet-balance-breakpoint-range} { margin-right: 4%; } } + &__balance-ellipsis { + display: flex; + align-items: center; + justify-content: space-around; + } + &__ellipsis { - // position: absolute; - // top: 20px; - // right: 24px; line-height: 45px; + margin-left: 5px; } &__balance-wrapper { @@ -61,7 +66,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( .token-menu-dropdown { height: 55px; - width: 191px; + width: 80%; border-radius: 4px; background-color: rgba(0, 0, 0, .82); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5); @@ -70,6 +75,10 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( right: 25px; z-index: 2000; + @media #{$wallet-balance-breakpoint-range} { + right: 18px; + } + &__close-area { position: fixed; top: 0; @@ -81,7 +90,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } &__container { - padding: 16px 34px 32px; + padding: 16px; z-index: 2200; position: relative; } |