Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Chart: Add styling needed to not be wrapped by card. (https://github.com/woocommerce/woocommerce-admin/pull/408) 

* Chart: Add styling needed to not be wrapped by card.

* Add negative top margin back

* Fix placeholder css.
This commit is contained in:
Timmy Crawford 2018-09-14 09:17:39 -07:00 committed by GitHub
parent 70bb1d28c8
commit 8eb0906287
2 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
plugins/woocommerce-admin/client/analytics/report/revenue/index.js
View File

@ -338,18 +338,16 @@ export class RevenueReport extends Component {
} ); } );
return ( return (
<Card title=""> <Chart
<Chart data={ chartData }
data={ chartData } title={ selectedChart.label }
title={ selectedChart.label } interval={ currentInterval }
interval={ currentInterval } allowedIntervals={ allowedIntervals }
allowedIntervals={ allowedIntervals } tooltipFormat={ formats.tooltipFormat }
tooltipFormat={ formats.tooltipFormat } xFormat={ formats.xFormat }
xFormat={ formats.xFormat } x2Format={ formats.x2Format }
x2Format={ formats.x2Format } dateParser={ '%Y-%m-%dT%H:%M:%S' }
dateParser={ '%Y-%m-%dT%H:%M:%S' } />
/>
</Card>
); );
} }

25
plugins/woocommerce-admin/client/components/chart/style.scss
View File

@ -1,15 +1,22 @@
/** @format */ /** @format */
.woocommerce-chart { .woocommerce-chart {
display: flex; margin-top: -$gap;
flex-direction: column; margin-bottom: $gap-large;
justify-content: flex-start; background: white;
align-items: flex-start; border: 1px solid $core-grey-light-700;
margin: -$gap; border-top: 0;
border-top: 1px solid $core-grey-light-700;
@include breakpoint( '<782px' ) {
margin-left: -16px;
margin-right: -16px;
margin-bottom: $gap-small;
border-left: none;
border-right: none;
width: auto;
}
.woocommerce-chart__header { .woocommerce-chart__header {
min-height: 50px; min-height: 50px;
border-top: 1px solid $core-grey-light-700;
border-bottom: 1px solid $core-grey-light-700; border-bottom: 1px solid $core-grey-light-700;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -181,13 +188,9 @@
&.is-placeholder { &.is-placeholder {
@include placeholder(); @include placeholder();
display: inline-block;
height: 200px; height: 200px;
width: 100%; width: 100%;
margin: 0;
padding: 0; padding: 0;
margin-bottom: $gap;
border: 1px solid $core-grey-light-700;
} }
} }