Remove expander width: 100% (#2494)

* Remove expander width: 100%

* Show vote balance & conviction

* ReferendumVote component

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

@@ -7,7 +7,7 @@ import { BlockNumber } from '@polkadot/types/interfaces';
 
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
-import { AddressMini, Button, Expander, LinkExternal, Tag } from '@polkadot/react-components';
+import { Button, Expander, LinkExternal, Tag } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { FormatBalance, BlockToTime } from '@polkadot/react-query';
 import { formatNumber, isBoolean } from '@polkadot/util';
@@ -15,6 +15,7 @@ import { formatNumber, isBoolean } from '@polkadot/util';
 import { useTranslation } from '../translate';
 import PreImageButton from './PreImageButton';
 import ProposalCell from './ProposalCell';
+import ReferendumVote from './ReferendumVote';
 import Voting from './Voting';
 
 interface Props {
@@ -55,20 +56,20 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
       </td>
       <td className='number'>
         <Expander summary={<><FormatBalance value={votedAye} />{voteCountAye ? ` (${formatNumber(voteCountAye)})` : '' }</>}>
-          {allAye.map(({ accountId }) =>
-            <AddressMini
-              key={accountId.toString()}
-              value={accountId}
+          {allAye.map((vote) =>
+            <ReferendumVote
+              key={vote.accountId.toString()}
+              vote={vote}
             />
           )}
         </Expander>
       </td>
       <td className='number'>
         <Expander summary={<><FormatBalance value={votedNay} />{voteCountNay ? ` (${formatNumber(voteCountNay)})` : '' }</>}>
-          {allNay.map(({ accountId }) =>
-            <AddressMini
-              key={accountId.toString()}
-              value={accountId}
+          {allNay.map((vote) =>
+            <ReferendumVote
+              key={vote.accountId.toString()}
+              vote={vote}
             />
           )}
         </Expander>

packages/page-democracy/src/Overview/ReferendumVote.tsx

@@ -0,0 +1,32 @@
+// Copyright 2017-2020 @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.
+
+import { DeriveReferendumVote } from '@polkadot/api-derive/types';
+import { Vote } from '@polkadot/types/interfaces';
+
+import React from 'react';
+import { AddressMini } from '@polkadot/react-components';
+
+interface Props {
+  vote: DeriveReferendumVote;
+}
+
+const sizing = ['0.1x', '1x', '2x', '3x', '4x', '5x'];
+
+function voteLabel (vote: Vote): string {
+  return `${sizing[vote.conviction.toNumber()]} - `;
+}
+
+function ReferendumVote ({ vote: { accountId, balance, vote } }: Props): React.ReactElement<Props> {
+  return (
+    <AddressMini
+      balance={balance}
+      labelBalance={voteLabel(vote)}
+      value={accountId}
+      withBalance
+    />
+  );
+}
+
+export default React.memo(ReferendumVote);

packages/page-explorer/src/BlockInfo/ByHash.tsx

@@ -35,7 +35,7 @@ function BlockByHash ({ className, value }: Props): React.ReactElement<Props> {
     <div className={className}>
       <Table isFixed>
         <Table.Head>
-          <th className='start' colSpan={getHeader ? 1 : 6}><h1>{formatNumber(blockNumber)}</h1></th>
+          <th className='start' colSpan={getHeader ? 1 : 6}><h1>{blockNumber ? formatNumber(blockNumber) : '...'}</h1></th>
           {getHeader && (
             <>
               <th className='start'>{t('hash')}</th>

packages/react-components/src/AddressMini.tsx

@@ -25,6 +25,7 @@ interface Props extends BareProps {
   isPadded?: boolean;
   isShort?: boolean;
   label?: React.ReactNode;
+  labelBalance?: React.ReactNode;
   type?: KeyringItemType;
   value?: AccountId | AccountIndex | Address | string | null | Uint8Array;
   withAddress?: boolean;
@@ -35,7 +36,7 @@ interface Props extends BareProps {
   withShrink?: boolean;
 }
 
-function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, label, style, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false }: Props): React.ReactElement<Props> | null {
+function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, label, labelBalance, style, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false }: Props): React.ReactElement<Props> | null {
   if (!value) {
     return null;
   }
@@ -74,6 +75,7 @@ function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded
         {withBalance && (
           <BalanceDisplay
             balance={balance}
+            label={labelBalance}
             params={value}
           />
         )}

packages/react-components/src/Expander.tsx

@@ -83,7 +83,6 @@ export default React.memo(styled(Expander)`
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 100%;
 
   &:not(.isExpanded) .ui--Expander-content {
     display: none;