diff options
Diffstat (limited to 'ui/app')
| -rw-r--r-- | ui/app/components/wallet-view.js | 170 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 25 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/wallet-balance.scss | 4 |
3 files changed, 44 insertions, 155 deletions
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index db69b5faa..cf7f74e49 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -41,14 +41,24 @@ const noop = () => {} WalletView.prototype.render = function () { const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props + // temporary logs + fake extra wallets console.log(selectedAccount) + const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [ + h('div.wallet-balance', {}, [ + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + ]), + ]) + return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, }, [ // TODO: Separate component: wallet account details - h('div.flex-column', { + h('div.flex-column.wallet-view-account-details', { style: {} }, [ @@ -123,9 +133,7 @@ WalletView.prototype.render = function () { ]), //Wallet Balances - h('div.flex-column.wallet-balance-wrapper-active', {}, [ - - h('div', {}, [ + h('div.flex-column.wallet-balance-wrapper.wallet-balance-wrapper-active', {}, [ h('div.wallet-balance', {}, [ @@ -136,13 +144,9 @@ WalletView.prototype.render = function () { ]), - ]) - ]), - h('div.flex-column', {}, [ - - h('div', {}, [ + h('div.flex-column.wallet-balance-wrapper', {}, [ h('div.wallet-balance', {}, [ @@ -153,145 +157,17 @@ WalletView.prototype.render = function () { ]), - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - ]), + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, ]) } diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index edf5d0966..afda29cd5 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -24,19 +24,25 @@ $wallet-view-bg: $wild-sand; background: $tx-view-bg; } -// wallet view +// wallet view and sidebar .wallet-view { + display: flex; + flex-direction: column; flex: 33.5 0 33.5%; background: $wallet-view-bg; @media screen and (min-width: 576px) { overflow-y: scroll; } + + .wallet-view-account-details { + flex: 0 0 150px; + } } .wallet-view-title-wrapper { - height: 25px; + flex: 0 0 25px; } .wallet-view-title { @@ -49,12 +55,6 @@ $wallet-view-bg: $wild-sand; } } -.account-options-menu { - align-items: center; - justify-content: flex-start; - margin: 5% 7%; -} - .wallet-view.sidebar { flex: 1 0 230px; background: rgb(250, 250, 250); @@ -85,6 +85,8 @@ $wallet-view-bg: $wild-sand; background-color: rgba(0, 0, 0, 0.3); } +// main-container media queries + @media screen and (min-width: 576px) { .lap-visible { display: flex; @@ -154,3 +156,10 @@ $wallet-view-bg: $wild-sand; text-align: center; } } + +// account options dropdown +.account-options-menu { + align-items: center; + justify-content: flex-start; + margin: 5% 7%; +}
\ No newline at end of file diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index 03cc38a03..e1b37cb1f 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -3,6 +3,10 @@ $wallet-balance-breakpoint: 890px; $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; +.wallet-balance-wrapper { + flex: 0 0 80px +} + .wallet-balance { background: inherit; display: flex; |