Scrollable summary bar (#850)

* scrollable summary bar

* subtle outline

* subtle plus / article flex / centered labelling

* height -0.1rem

* inset shadow spread

* styled Card / tidy up

* tslint

* webkit scrollbar

* >

* nitpicking

packages/app-democracy/src/Summary.tsx

@@ -38,7 +38,7 @@ class Summary extends React.PureComponent<Props> {
             {formatNumber(democracy_referendumCount.sub(democracy_nextTally))}
           </CardSummary>
         </section>
-        <section className='ui--media-medium'>
+        <section>
           <CardSummary
             label={t('launch period')}
             progress={{

packages/app-explorer/src/NodeInfo/Summary.tsx

@@ -45,7 +45,7 @@ class Summary extends React.PureComponent<Props, State> {
 
     return (
       <SummaryBox>
-        <section className='ui--media-medium'>
+        <section>
           <CardSummary label={t('refresh in')}>
             <Elapsed value={nextRefresh} />
           </CardSummary>
@@ -68,7 +68,7 @@ class Summary extends React.PureComponent<Props, State> {
             }
           </CardSummary>
         </section>
-        <section className='ui--media-large'>
+        <section>
           <CardSummary label={t('queued tx')}>
             {
               info.extrinsics

packages/app-explorer/src/Summary.tsx

@@ -15,14 +15,11 @@ type Props = I18nProps & {};
 
 class Summary extends React.PureComponent<Props> {
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
 
     return (
-      <SummaryBox
-        className={className}
-        style={style}
-      >
-        <section className='ui--media-small'>
+      <SummaryBox>
+        <section>
           <CardSummary label={t('target')}>
             <TimePeriod />
           </CardSummary>
@@ -30,7 +27,7 @@ class Summary extends React.PureComponent<Props> {
             <TimeNow />
           </CardSummary>
         </section>
-        <section className='ui--media-large'>
+        <section>
           <SummarySession />
         </section>
         <section>

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

@@ -39,7 +39,7 @@ class Summary extends React.PureComponent<Props> {
             {intentions.length}
           </CardSummary>
         </section>
-        <section className='ui--media-medium'>
+        <section>
           <SummarySession withBroken={false} />
         </section>
         {this.renderBalances()}

packages/ui-app/src/CardSummary.tsx

@@ -9,10 +9,47 @@ import React from 'react';
 import { UInt } from '@polkadot/types';
 import { isUndefined } from '@polkadot/util';
 
-import { classes } from './util';
 import Progress, { Colors as ProgressColors } from './Progress';
 import Labelled from './Labelled';
 
+import styled from 'styled-components';
+
+const Card = styled.article`
+  align-items: center;
+  box-shadow: none;
+  background: none;
+  color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex: 0 1 auto;
+  flex-flow: row wrap;
+  justify-content: flex-end;
+  min-height: 5.7rem;
+  padding: 0.5rem 1.5rem;
+  text-align: left;
+
+  > div {
+    font-size: 2.2rem;
+    font-weight: 100;
+    line-height: 2.25rem;
+    text-align: right;
+
+    > * {
+      margin: 0.4rem 0;
+    }
+
+    > label {
+      line-height: 1rem;
+      min-width: 7rem !important;
+      font-size: 0.9rem;
+    }
+
+    .progress {
+      margin: 0.25rem 0 -0.5rem !important;
+      background: rgba(0,0,0,0.05);
+    }
+  }
+`;
+
 type ProgressProps = {
   color?: ProgressColors,
   hideValue?: boolean,
@@ -29,7 +66,7 @@ type Props = BareProps & {
 
 export default class CardSummary extends React.PureComponent<Props> {
   render () {
-    const { children, className, progress, label, style } = this.props;
+    const { children, progress, label } = this.props;
     const value = progress && progress.value;
     const total = progress && progress.total;
     const left = progress && !isUndefined(value) && !isUndefined(total) && value.gten(0) && total.gtn(0)
@@ -53,37 +90,25 @@ export default class CardSummary extends React.PureComponent<Props> {
     }
 
     return (
-      <article
-        className={classes('ui--CardSummary', className)}
-        style={style}
-      >
+      <Card>
         <Labelled
           isSmall
           label={label}
         >
-          <div className='ui--CardSummary-large'>
-            {children}{
-              progress && !progress.hideValue && (
-                !left || isUndefined(progress.total)
-                  ? '-'
-                  : `${left}${progress.isPercent ? '' : '/'}${
-                    progress.isPercent
-                      ? '%'
-                      : progress.total.toString()
-                  }`
-              )
-            }
-          </div>
-          {
-            progress && (
-              <Progress
-                className='ui--CardSummary-progress'
-                {...progress}
-              />
+          {children}{
+            progress && !progress.hideValue && (
+              !left || isUndefined(progress.total)
+                ? '-'
+                : `${left}${progress.isPercent ? '' : '/'}${
+                  progress.isPercent
+                    ? '%'
+                    : progress.total.toString()
+                }`
             )
           }
+          { progress && <Progress {...progress} /> }
         </Labelled>
-      </article>
+      </Card>
     );
   }
 }

packages/ui-app/src/SummaryBox.tsx

@@ -13,24 +13,39 @@ type Props = BareProps & {
 
 const StyledSummary = styled.div`
   align-items: stretch;
-  margin-bottom: 2em;
-  text-align: center;
+  background: rgba(255,255,255,0.65);
+  border: 1px solid rgba(0,0,0,0.03);
+  border-radius: 4px;
+  box-shadow: inset 0px -5px 12px rgba(0,0,0,0.035);
   display: flex;
+  flex-wrap: no-wrap;
   justify-content: space-between;
-  flex-wrap: wrap;
+  margin-bottom: 2.5em;
+  overflow-x: scroll;
+  padding-right: 1rem;
 
-	article {
-		color: rgba(0, 0, 0, 0.6);
-		flex: 0 1 auto;
-		text-align: left;
-	}
+  &::-webkit-scrollbar {
+    height: 2px;
+  }
 
-	> section {
+  &::-webkit-scrollbar-thumb {
+    background: #e1e1e1;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  > section {
 		display: flex;
 		flex: 0 1 auto;
 		text-align: left;
 	}
 
+  > section:first-child > article:first-child .label-small > label {
+    min-width: 4rem !important;
+  }
+
 	details & {
 		display: block;
 		margin: 0.5rem 0.25rem;
@@ -46,10 +61,17 @@ const StyledSummary = styled.div`
 			margin-top: 0.75rem;
 		}
 	}
-  `;
+
+  .ui.label {
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+  }
+`;
 
 export default class SummaryBox extends React.PureComponent<Props> {
   render () {
+
     return (
       <StyledSummary>
         {this.props.children}

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

@@ -190,12 +190,6 @@ header .ui--Button-Group {
   }
 }
 
-.ui--CardSummary .ui.label {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-}
-
 .ui--Chart {
   position: relative;
   display: inline-block;
@@ -204,17 +198,6 @@ header .ui--Button-Group {
   width: 15vw;
 }
 
-.ui--CardSummary-large {
-  font-size: 2.25rem;
-  font-weight: 100;
-  line-height: 2.25rem;
-  text-align: right;
-}
-
-.ui--CardSummary-progress {
-  margin: 0.25rem 0 -0.5rem !important;
-}
-
 .ui--CopyButton {
   cursor: copy !important;
   margin-left: 0.25rem !important;
@@ -377,3 +360,7 @@ header .ui--Button-Group {
     }
   }
 }
+
+.ui.tiny.progress {
+  font-size: .5rem;
+}