Democracy layout changes (#1309)

* Democracy layout changes

* Select democarcy.propose as default

* Revert default, blonde moment

* Remove min-height for ui--Card

* Extract Item styles

* Extract all styles into styled-components

* lint hack

* Update Row.tsx

* Update Address.tsx

* Small layout cleanups

packages/app-democracy/src/Overview/Item.tsx

@@ -6,6 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import BN from 'bn.js';
 import React from 'react';
+import styled from 'styled-components';
 import { Method, Proposal } from '@polkadot/types';
 import { Call } from '@polkadot/ui-app';
 import { formatNumber } from '@polkadot/util';
@@ -21,41 +22,57 @@ type Props = I18nProps & {
 
 class Item extends React.PureComponent<Props> {
   render () {
-    const { children, idNumber, proposal, proposalExtra } = this.props;
+    const { children, className, idNumber, proposal, proposalExtra } = this.props;
     const { meta, method, section } = Method.findFunction(proposal.callIndex);
 
-    // FIXME This is _very_ similar to what we have in explorer/BlockByHash
     return (
-      <article className='democracy--Item'>
+      <article className={className}>
         <div className='democracy--Item-header'>
-          <div className='democracy--Item-header-info'>
-            <h3>
-              {section}.{method}
-            </h3>
-            <div className='democracy--Item-header-description'>{
-              meta && meta.documentation
-                ? meta.documentation.join(' ')
-                : ''
-            }</div>
-          </div>
+          <h3>{section}.{method}</h3>
+          {meta && meta.documentation && (
+            <details>
+              <summary>{meta.documentation.join(' ')}</summary>
+            </details>
+          )}
           <div className='democracy--Item-header-id'>
             #{formatNumber(idNumber)}
           </div>
         </div>
-        <div className='democracy--Item-body'>
-          <Call
-            className='democracy--Item-extrinsic'
-            value={proposal}
-          >
-            {proposalExtra}
-          </Call>
-          <div className='democracy--Item-children'>
-            {children}
-          </div>
+        <div className='democracy--Item-children'>
+          {children}
         </div>
+        <Call
+          className='democracy--Item-extrinsic'
+          value={proposal}
+        >
+          {proposalExtra}
+        </Call>
       </article>
     );
   }
 }
 
-export default translate(Item);
+export default translate(styled(Item as React.ComponentClass<Props>)`
+  .democracy--Item-children {
+    padding-bottom: 1rem;
+  }
+
+  .democracy--Item-extrinsic {
+    .ui--Params-Content {
+      padding-left: 0;
+    }
+  }
+
+  .democracy--Item-header {
+    margin-bottom: 1rem;
+    position: relative;
+
+    .democracy--Item-header-id {
+      font-size: 1.5rem;
+      line-height: 1.5rem;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+`);

packages/app-democracy/src/Overview/Proposal.tsx

@@ -23,13 +23,14 @@ type Props = I18nProps & {
 
 class ProposalDisplay extends React.PureComponent<Props> {
   render () {
-    const { democracy_depositOf, idNumber, value } = this.props;
+    const { className, democracy_depositOf, idNumber, value } = this.props;
     const depositors = democracy_depositOf
       ? democracy_depositOf[1]
       : [];
 
     return (
       <Item
+        className={className}
         idNumber={idNumber}
         proposal={value}
         proposalExtra={this.renderExtra()}
@@ -52,7 +53,7 @@ class ProposalDisplay extends React.PureComponent<Props> {
     const [balance, addresses] = democracy_depositOf;
 
     return (
-      <div className='democracy--Proposal-info'>
+      <div>
         <Labelled label={t('depositors')}>
           {addresses.map((address, index) => (
             <InputAddress

packages/app-democracy/src/Overview/Proposals.tsx

@@ -8,6 +8,7 @@ import BN from 'bn.js';
 import React from 'react';
 import { Proposal } from '@polkadot/types';
 import { withCalls, withMulti } from '@polkadot/ui-api';
+import { Column } from '@polkadot/ui-app';
 
 import ProposalDisplay from './Proposal';
 import translate from '../translate';
@@ -29,12 +30,9 @@ class Proposals extends React.PureComponent<Props> {
     const { t } = this.props;
 
     return (
-      <section className='democracy--Proposals'>
-        <h1>
-          {t('proposals')}
-        </h1>
+      <Column header={t('proposals')}>
         {this.renderProposals()}
-      </section>
+      </Column>
     );
   }
 
@@ -43,9 +41,7 @@ class Proposals extends React.PureComponent<Props> {
 
     if (!democracy_publicProps || !democracy_publicProps.length) {
       return (
-        <div className='ui disabled'>
-          {t('no available proposals')}
-        </div>
+        <article>{t('no available proposals')}</article>
       );
     }
 

packages/app-democracy/src/Overview/Referendum.tsx

@@ -8,10 +8,11 @@ import { RawParam } from '@polkadot/ui-params/types';
 
 import BN from 'bn.js';
 import React from 'react';
+import styled from 'styled-components';
 import { ReferendumInfoExtended } from '@polkadot/api-derive/type';
 import { Chart, Static } from '@polkadot/ui-app';
 import VoteThreshold from '@polkadot/ui-params/Param/VoteThreshold';
-import { withCalls } from '@polkadot/ui-api';
+import { withCalls, withMulti } from '@polkadot/ui-api';
 import settings from '@polkadot/ui-settings';
 import { formatBalance, formatNumber } from '@polkadot/util';
 
@@ -88,7 +89,7 @@ class Referendum extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { chain_bestNumber, value } = this.props;
+    const { chain_bestNumber, className, value } = this.props;
 
     if (!chain_bestNumber || value.end.sub(chain_bestNumber).lten(0)) {
       return null;
@@ -96,6 +97,7 @@ class Referendum extends React.PureComponent<Props, State> {
 
     return (
       <Item
+        className={className}
         idNumber={value.index}
         proposal={value.proposal}
         proposalExtra={this.renderExtra()}
@@ -116,7 +118,7 @@ class Referendum extends React.PureComponent<Props, State> {
     const enactBlock = (democracy_publicDelay || new BN(0)).add(end);
 
     return (
-      <div className='democracy--Referendum-info'>
+      <div>
         <Static label={t('ending at')}>
           {t('block #{{blockNumber}}, {{remaining}} blocks remaining', {
             replace: {
@@ -174,10 +176,20 @@ class Referendum extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(
+export default withMulti(
+  styled(Referendum as React.ComponentClass<Props>)`
+    .democracy--Referendum-results {
+      margin-bottom: 1em;
+
+      &.chart {
+        text-align: center;
+      }
+    }
+  `,
+  translate,
   withCalls<Props>(
     'derive.chain.bestNumber',
     ['derive.democracy.referendumVotesFor', { paramName: 'idNumber' }],
     'query.democracy.publicDelay'
-  )(Referendum)
+  )
 );

packages/app-democracy/src/Overview/Referendums.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import { ReferendumInfoExtended } from '@polkadot/api-derive/type';
 import { Option } from '@polkadot/types';
 import { withCalls } from '@polkadot/ui-api';
+import { Column } from '@polkadot/ui-app';
 
 import Referendum from './Referendum';
 import translate from '../translate';
@@ -21,10 +22,9 @@ class Referendums extends React.PureComponent<Props> {
     const { t } = this.props;
 
     return (
-      <section className='democracy--Referendums'>
-        <h1>{t('referendum')}</h1>
+      <Column header={t('referendum')}>
         {this.renderReferendums()}
-      </section>
+      </Column>
     );
   }
 
@@ -36,9 +36,7 @@ class Referendums extends React.PureComponent<Props> {
 
     if (!referendums.length) {
       return (
-        <div className='ui disabled'>
-          {t('no available referendum')}
-        </div>
+        <article>{t('no available referendums')}</article>
       );
     }
 

packages/app-democracy/src/Overview/index.tsx

@@ -4,9 +4,8 @@
 
 import { AppProps, BareProps, I18nProps } from '@polkadot/ui-app/types';
 
-import '../index.css';
-
 import React from 'react';
+import { Columar } from '@polkadot/ui-app';
 
 import Proposals from './Proposals';
 import Referendums from './Referendums';
@@ -19,8 +18,10 @@ export default class Overview extends React.PureComponent<Props> {
     return (
       <>
         <Summary />
-        <Referendums />
-        <Proposals />
+        <Columar>
+          <Referendums />
+          <Proposals />
+        </Columar>
       </>
     );
   }

packages/app-democracy/src/Propose.tsx

@@ -122,6 +122,6 @@ class Propose extends TxComponent<Props, State> {
 export default withMulti(
   Propose,
   translate,
-  withApi,
-  withRouter
+  withRouter,
+  withApi
 );

packages/app-democracy/src/index.css

@@ -1,68 +0,0 @@
-/* Copyright 2017-2019 @polkadot/app-democracy authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.democracy--Item-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
-.democracy--Item-header-info,
-.democracy--Item-header-id {
-  flex: 1;
-}
-
-.democracy--Item-header-id {
-  font-size: 2rem;
-  line-height: 2rem;
-  text-align: right;
-}
-
-.democracy--Item-header-description {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.democracy--Item-body {
-  display: flex;
-  flex-direction: row;
-  justify-content: stretch;
-}
-
-.democracy--Item-extrinsic,
-.democracy--Item-children {
-  flex: 1;
-  width: 0;
-  padding: 0 1em;
-  text-align: left;
-}
-
-.democracy--Item-extrinsic .ui--Params-Content {
-  padding-left: 0;
-}
-
-.democracy--Extrinsic .ui--Labelled {
-  margin-bottom: 0.25rem;
-}
-
-.democracy--Extrinsic .ui--Labelled .ui.label {
-  display: block;
-  padding-left: 0;
-}
-
-.democracy--Proposal-info,
-.democracy--Referendum-info {
-  margin-bottom: 0;
-}
-
-.democracy--Proposal-new {
-  float: right;
-}
-
-.democracy--Referendum-results {
-  margin-bottom: 1em;
-}
-
-.democracy--Referendum-results.chart {
-  text-align: center;
-}

packages/app-democracy/src/index.tsx

@@ -5,8 +5,6 @@
 import { AppProps, BareProps, I18nProps } from '@polkadot/ui-app/types';
 import { TabItem } from '@polkadot/ui-app/Tabs';
 
-import './index.css';
-
 import React from 'react';
 import { Route, Switch } from 'react-router';
 import { HelpOverlay,Tabs } from '@polkadot/ui-app';

packages/app-staking/src/Overview/Address.tsx

@@ -76,9 +76,8 @@ class Address extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { address, className, defaultName, lastAuthor, lastBlock, filter } = this.props;
+    const { className, defaultName, filter } = this.props;
     const { controllerId, stakers, stashId } = this.state;
-    const isAuthor = [address, controllerId, stashId].includes(lastAuthor);
     const bonded = stakers && !stakers.own.isZero()
       ? [stakers.own, stakers.total.sub(stakers.own)]
       : true;
@@ -102,22 +101,22 @@ class Address extends React.PureComponent<Props, State> {
         withBalance={{ bonded }}
       >
         {this.renderNominators()}
-        {
-          isAuthor && stashId
-            ? <div className='blockNumber'>#{lastBlock}</div>
-            : null
-        }
       </AddressCard>
     );
   }
 
   private renderKeys () {
-    const { t } = this.props;
-    const { controllerId, sessionId } = this.state;
+    const { address, lastAuthor, lastBlock, t } = this.props;
+    const { controllerId, sessionId, stashId } = this.state;
     const isSame = controllerId === sessionId;
+    const isAuthor = [address, controllerId, stashId].includes(lastAuthor);
 
     return (
       <div className='staking--Address-info'>
+        {isAuthor && stashId
+          ? <div className='blockNumber'>#{lastBlock}</div>
+          : null
+        }
         {controllerId
           ? (
             <div>

packages/ui-app/src/AddressCard.tsx

@@ -3,6 +3,8 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 // import { I18nProps } from '@polkadot/ui-app/types';
 
+// @ts-ignore This line needed for the styled export... don't ask why
+import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -39,7 +41,7 @@ class AddressCard extends React.PureComponent<Props> {
   }
 }
 
-export default styled(translate(AddressCard))`
+export default translate(styled(AddressCard as React.ComponentClass<Props>)`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -58,4 +60,4 @@ export default styled(translate(AddressCard))`
       margin-top: 0.5rem;
     }
   }
-`;
+`);

packages/ui-app/src/Card.tsx

@@ -26,7 +26,6 @@ export default styled(Card)`
   position: relative;
   flex: 1 1;
   min-width: 24%;
-  min-height: 130px;
   justify-content: space-around;
 
   i.help.circle.icon,

packages/ui-app/src/Row.tsx

@@ -224,7 +224,6 @@ class Row<P extends RowProps, S extends RowState> extends React.PureComponent<P,
 
   protected renderChildren () {
     const { children } = this.props;
-
     const hasChildren = !children
       ? false
       : Array.isArray(children)