Node info & explorer info density adj. (#635)

* Poll for system_health (keep-alive)

* Node info & exp,orer info density adj.

packages/app-explorer/src/BlockByHash/Extrinsics.tsx

@@ -67,7 +67,10 @@ class Extrinsics extends React.PureComponent<Props> {
             }</div>
             {this.renderSigner(extrinsic)}
           </div>
-          <Call value={extrinsic} />
+          <Call
+            className='details'
+            value={extrinsic}
+          />
         </article>
       </div>
     );

packages/app-explorer/src/BlockByHash/Logs.tsx

@@ -58,7 +58,7 @@ class Logs extends React.PureComponent<Props> {
             </h3>
             <div className='description' />
           </div>
-          <div className='value'>
+          <div className='details'>
             {content}
           </div>
         </article>

packages/app-explorer/src/BlockHeader/BlockHeader.css

@@ -15,15 +15,44 @@
     overflow: hidden;
   }
 
+  &.summary {
+    .header .hash {
+      /* 0.5 * 0.5 */
+      opacity: 0.5625;
+    }
+
+    &.summary {
+      .details > .contains {
+        height: 0;
+        transition: none;
+        transform: scale(0);
+      }
+    }
+
+    &:hover {
+      .details > .contains {
+        height: auto;
+        margin-top: 0.5rem;
+        transform: scale(1);
+        transition: all 200ms ease-in;
+      }
+    }
+  }
+
   .author {
     font-size: 1rem;
-    margin-top: 0.5rem;
     text-align: right;
+    vertical-align: middle;
+
+    > .ui--AddressMini.padded {
+      padding: 0;
+    }
   }
 
   .header {
     color: rgba(0, 0, 0, 0.6);
-    margin-bottom: 0.25rem;
+    display: flex;
+    line-height: 2.25rem;
     overflow: hidden;
     text-align: left;
     text-overflow: ellipsis;
@@ -33,19 +62,16 @@
     > div {
       display: inline-block;
       font-weight: 100;
-      margin-bottom: 0.25rem;
       vertical-align: middle;
       white-space: nowrap;
     }
 
     > .number {
-      font-size: 2.75rem;
-      line-height: 1;
+      font-size: 2.25rem;
     }
 
     .hash {
-      font-size: 1.5em;
-      line-height: 1;
+      font-size: 1.5rem;
     }
   }
 

packages/app-explorer/src/BlockHeader/index.tsx

@@ -15,6 +15,7 @@ import numberFormat from '@polkadot/ui-reactive/util/numberFormat';
 import Extrinsics from './Extrinsics';
 
 type Props = BareProps & {
+  isSummary?: boolean,
   value?: HeaderExtended,
   withExtrinsics?: boolean,
   withLink?: boolean
@@ -22,7 +23,7 @@ type Props = BareProps & {
 
 export default class BlockHeader extends React.PureComponent<Props> {
   render () {
-    const { value, withExtrinsics = false, withLink = false } = this.props;
+    const { isSummary, value, withExtrinsics = false, withLink = false } = this.props;
 
     if (!value) {
       return null;
@@ -31,16 +32,22 @@ export default class BlockHeader extends React.PureComponent<Props> {
     const { author, blockNumber, extrinsicsRoot, parentHash, stateRoot } = value;
     const parentHex = parentHash.toHex();
     const hashHex = value.hash.toHex();
+    const textNumber = numberFormat(blockNumber);
 
     return (
-      <article className='explorer--BlockHeader'>
+      <article className={['explorer--BlockHeader', isSummary ? 'summary' : ''].join(' ')}>
         <div className='details'>
           <div className='header'>
-            <div className='number'>{numberFormat(blockNumber)}&nbsp;</div>
-            <div className='hash'>{
+            <div className='number'>{
               withLink
-                ? <Link to={`/explorer/hash/${hashHex}`}>{hashHex}</Link>
-                : hashHex
+              ? <Link to={`/explorer/hash/${hashHex}`}>{textNumber}</Link>
+              : textNumber
+            }&nbsp;</div>
+            <div className='hash'>{hashHex}</div>
+            <div className='author'>{
+              author
+                ? <AddressMini value={author} />
+                : undefined
             }</div>
           </div>
           <div className='contains'>
@@ -65,11 +72,6 @@ export default class BlockHeader extends React.PureComponent<Props> {
               : undefined
             }
           </div>
-          <div className='author'>{
-            author
-              ? <AddressMini value={author} />
-              : undefined
-          }</div>
         </div>
       </article>
     );

packages/app-explorer/src/BlockHeaders.tsx

@@ -47,6 +47,7 @@ class BlockHeaders extends React.PureComponent<Props> {
       <div className='explorer--BlockHeaders'>
         {headers.map((header) => (
           <BlockHeader
+            isSummary
             key={header.blockNumber.toString()}
             value={header}
             withLink={!header.blockNumber.isZero()}
@@ -57,4 +58,4 @@ class BlockHeaders extends React.PureComponent<Props> {
   }
 }
 
-export default withCall('rpc.chain.subscribeNewHead', { propName: 'headers', transform })(BlockHeaders);
+export default withCall('derive.chain.subscribeNewHead', { propName: 'headers', transform })(BlockHeaders);

packages/app-explorer/src/Events.tsx

@@ -71,7 +71,10 @@ class Events extends React.PureComponent<Props> {
             }
           </div>
         </div>
-        <EventDisplay value={event} />
+        <EventDisplay
+          className='details'
+          value={event}
+        />
       </article>
     );
   }

packages/app-explorer/src/index.css

@@ -24,8 +24,8 @@
 }
 
 .explorer--BestNumber {
-  font-size: 2.75rem;
-  line-height: 2.75rem;
+  font-size: 2.25rem;
+  line-height: 2.25rem;
   position: relative;
   text-align: right;
 }
@@ -44,6 +44,13 @@
 .explorer--Container {
   color: inherit;
 
+  &:hover > .details {
+    height: auto;
+    opacity: 1;
+    transform: scale(1);
+    transition: all 200ms ease-in;
+  }
+
   .header {
     position: relative;
 
@@ -56,7 +63,11 @@
     }
   }
 
-  .value {
+  > .details {
+    height: 0;
+    opacity: 0;
+    transition: none;
+    transform: scale(0);
     word-break: break-all;
   }
 }

packages/ui-app/src/styles/app.css

@@ -19,6 +19,7 @@ body {
 
 h1, h2, h3, h4, h5 {
   color: rgba(0, 0, 0, .6);
+  font-family: sans-serif;
   font-weight: 100;
 }
 

packages/ui-app/src/styles/components.css

@@ -169,9 +169,9 @@ header .ui--Button-Group {
 }
 
 .ui--CardSummary-large {
-  font-size: 2.75rem;
+  font-size: 2.25rem;
   font-weight: 100;
-  line-height: 2.75rem;
+  line-height: 2.25rem;
   text-align: right;
 }