fixed issues with the scrolly part of the post trends visualization

updated insights to use section-header modified stats-module to use sectionheader css fixes to module sectionheaders module text padding updated insights to use section-header css fixes to module sectionheaders module text padding fixed issues with the scrolly part of the post trends visualization
Automattic · Feb 18, 2016 · 700568b · 700568b
1 parent 923645b
commit 700568b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/calypso b/calypso
@@ -0,0 +1 @@
+calypso
diff --git a/client/my-sites/stats/post-trends/index.jsx b/client/my-sites/stats/post-trends/index.jsx
@@ -136,14 +136,16 @@ export default React.createClass( {
 		} );
 
 		if( touchDetect.hasTouch() ) {
-			return;
+			return null;
 		}
 
 		return (
 
-			<div>
+			<div className="post-trends">
 				<SectionHeader label={ this.translate( 'Posting Activity' ) }></SectionHeader>
 				<Card>
+					<div className={ leftClass } onClick={ this.scrollLeft }><span className="left-arrow"></span></div>
+					<div className={ rightClass } onClick={ this.scrollRight }><span className="right-arrow"></span></div>
 					<div ref="wrapper" className="post-trends__wrapper">
 						<div className={ leftClass } onClick={ this.scrollLeft }><span className="left-arrow"></span></div>
 						<div className={ rightClass } onClick={ this.scrollRight }><span className="right-arrow"></span></div>

diff --git a/client/my-sites/stats/post-trends/style.scss b/client/my-sites/stats/post-trends/style.scss
@@ -33,33 +33,35 @@
 
 .post-trends__wrapper {
 	position: relative;
-	height: 100px;
+	height: 130px;
 	max-width: 660px;	// necessary for fluid width mode
 	margin: 0 auto;
+	overflow: hidden;
 }
 
 .post-trends__scroll-left,
 .post-trends__scroll-right {
 	position: absolute;
-		top: 0;
+		top: 0px;
 	width: 30px;
 	height: 130px;
-	background: linear-gradient(to right, $gray-light , rgba( $gray-light, .92 ), $transparent );
+	background: linear-gradient(to right, $white , rgba( $white, .92 ), $transparent );
 	text-align: left;
+	z-index: 100;
 
 	.left-arrow,
 	.right-arrow {
 		width: 30px;
 		height: 100px;
 		display: block;
-		background: url( '/calypso/images/stats/left-arrow.svg') no-repeat -4px 63px;
-		background-size: 25px 25px;
+		background: url( '/calypso/images/stats/left-arrow.svg') no-repeat 4px 48px;
+		background-size: 18px 18px;
 		opacity: .15;
 	}
 
 	.right-arrow {
-		background: url( '/calypso/images/stats/right-arrow.svg') no-repeat 5px 63px;
-		background-size: 25px 25px;
+		background: url( '/calypso/images/stats/right-arrow.svg') no-repeat 4px 48px;
+		background-size: 18px 18px;
 	}
 
 	&.is-active {
@@ -75,16 +77,16 @@
 }
 
 .post-trends__scroll-right {
-	background: linear-gradient(to left, $gray-light , rgba( $gray-light, .92 ), $transparent );
+	background: linear-gradient(to left, $white , rgba( $white, .92 ), $transparent );
 	text-align: right;
 }
 
 .post-trends__scroll-left {
-	left: 0;
+	left: 0px;
 }
 
 .post-trends__scroll-right {
-	right: 0;
+	right: 0px;
 }
 
 .post-trends__month {
@@ -125,6 +127,7 @@
 .post-trends__key-day {
 	&.is-outside-month {
 		background-color: $transparent;
+		border-color: $white;
 	}
 
 	&.is-today {
@@ -168,10 +171,10 @@
 	}
 }
 
-@include breakpoint( "<960px" ) {
+@include breakpoint( "<1040px" ) {
 
 	.post-trends__year {
-		margin: 0 40px 0;
+
 	}
 }
 

diff --git a/client/my-sites/stats/stats-module/index.jsx b/client/my-sites/stats/stats-module/index.jsx
@@ -103,6 +103,7 @@ module.exports = React.createClass( {
 
 		return (
 			<div>
+
 				<SectionHeader label={ this.props.moduleStrings.title }>
 					{ this.hasSummaryPage()
 					 	? ( <Button