diff --git a/packages/app-staking/src/StakeList.tsx b/packages/app-staking/src/StakeList.tsx index e18231c6db..94899768ff 100644 --- a/packages/app-staking/src/StakeList.tsx +++ b/packages/app-staking/src/StakeList.tsx @@ -18,10 +18,11 @@ type Props = I18nProps & ComponentProps; class StakeList extends React.PureComponent { render () { const { balances, balanceArray, intentions, nominators, validators } = this.props; + const accounts = keyring.getAccounts(); return (
- {keyring.getAccounts().map((account) => { + {accounts.map((account) => { const address = account.address(); const name = account.getMeta().name || ''; @@ -40,10 +41,23 @@ class StakeList extends React.PureComponent { /> ); })} + {this.renderSpacer(accounts.length)}
); } + // HACK This is a hack of a dummy element to get the spacing right, i.e. the last + // element in an oddly spaced list should still only take up a single column + private renderSpacer (accountsLen: number) { + if (accountsLen % 2 === 0) { + return null; + } + + return ( +
+ ); + } + private getTargetOptions (): Array { const { targets } = this.props; diff --git a/packages/app-staking/src/index.css b/packages/app-staking/src/index.css index 706526a549..1cec8a98c7 100644 --- a/packages/app-staking/src/index.css +++ b/packages/app-staking/src/index.css @@ -12,15 +12,21 @@ } .staking--Account { - display: inline-block; position: relative; + flex: 1 1; .ui--AddressMini { display: block; } .ui--AddressSummary { + display: flex; + justify-content: space-between; padding: 0; + + .ui--AddressSummary-base, .ui--AddressSummary-children { + min-width: 0; + } } } @@ -103,6 +109,17 @@ } } +.staking--StakeList { + display: flex; + flex-wrap: wrap; + + .spacer { + flex: 1 1; + margin: .25rem; + padding: 1rem 1.5rem; + } +} + .staking--accounts-info { position: absolute; top: 0.25rem;