2-column staking layout (#920)

packages/app-staking/src/StakeList.tsx

@@ -18,10 +18,11 @@ type Props = I18nProps & ComponentProps;
 class StakeList extends React.PureComponent<Props> {
   render () {
     const { balances, balanceArray, intentions, nominators, validators } = this.props;
+    const accounts = keyring.getAccounts();
 
     return (
       <div className='staking--StakeList'>
-        {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<Props> {
             />
           );
         })}
+        {this.renderSpacer(accounts.length)}
       </div>
     );
   }
 
+  // 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 (
+      <div className='spacer' />
+    );
+  }
+
   private getTargetOptions (): Array<KeyringSectionOption> {
     const { targets } = this.props;
 

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;