diff --git a/packages/app-democracy/src/Summary.tsx b/packages/app-democracy/src/Summary.tsx index 1b5e9630bc..3301bcf8c6 100644 --- a/packages/app-democracy/src/Summary.tsx +++ b/packages/app-democracy/src/Summary.tsx @@ -38,7 +38,7 @@ class Summary extends React.PureComponent { {formatNumber(democracy_referendumCount.sub(democracy_nextTally))} -
+
{ return ( -
+
@@ -68,7 +68,7 @@ class Summary extends React.PureComponent { }
-
+
{ info.extrinsics diff --git a/packages/app-explorer/src/Summary.tsx b/packages/app-explorer/src/Summary.tsx index 561b368097..295dd629c1 100644 --- a/packages/app-explorer/src/Summary.tsx +++ b/packages/app-explorer/src/Summary.tsx @@ -15,14 +15,11 @@ type Props = I18nProps & {}; class Summary extends React.PureComponent { render () { - const { className, style, t } = this.props; + const { t } = this.props; return ( - -
+ +
@@ -30,7 +27,7 @@ class Summary extends React.PureComponent {
-
+
diff --git a/packages/app-staking/src/Overview/Summary.tsx b/packages/app-staking/src/Overview/Summary.tsx index 98335207ef..b7578f655a 100644 --- a/packages/app-staking/src/Overview/Summary.tsx +++ b/packages/app-staking/src/Overview/Summary.tsx @@ -39,7 +39,7 @@ class Summary extends React.PureComponent { {intentions.length}
-
+
{this.renderBalances()} diff --git a/packages/ui-app/src/CardSummary.tsx b/packages/ui-app/src/CardSummary.tsx index ea3ba6630e..08f340ec9b 100644 --- a/packages/ui-app/src/CardSummary.tsx +++ b/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 { 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 { } return ( -
+ -
- {children}{ - progress && !progress.hideValue && ( - !left || isUndefined(progress.total) - ? '-' - : `${left}${progress.isPercent ? '' : '/'}${ - progress.isPercent - ? '%' - : progress.total.toString() - }` - ) - } -
- { - progress && ( - + {children}{ + progress && !progress.hideValue && ( + !left || isUndefined(progress.total) + ? '-' + : `${left}${progress.isPercent ? '' : '/'}${ + progress.isPercent + ? '%' + : progress.total.toString() + }` ) } + { progress && } -
+ ); } } diff --git a/packages/ui-app/src/SummaryBox.tsx b/packages/ui-app/src/SummaryBox.tsx index 2b62aea4ac..623d2004e6 100644 --- a/packages/ui-app/src/SummaryBox.tsx +++ b/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 { render () { + return ( {this.props.children} diff --git a/packages/ui-app/src/styles/components.css b/packages/ui-app/src/styles/components.css index 44e8154f08..874e464d65 100644 --- a/packages/ui-app/src/styles/components.css +++ b/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; +} \ No newline at end of file