Reader: Add back button to Search (Automattic#13510)

solarsoft0 · Apr 28, 2017 · 2278e4a · 2278e4a
1 parent 3e17f08
commit 2278e4a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/client/reader/search-stream/index.jsx b/client/reader/search-stream/index.jsx
@@ -14,13 +14,13 @@ import CompactCard from 'components/card/compact';
 import DocumentHead from 'components/data/document-head';
 import Stream from 'reader/stream';
 import EmptyContent from './empty';
-import HeaderBack from 'reader/header-back';
 import SearchInput from 'components/search';
 import { recordAction, recordTrack } from 'reader/stats';
 import SuggestionProvider from './suggestion-provider';
 import Suggestion from './suggestion';
 import { RelatedPostCard } from 'blocks/reader-related-card-v2';
 import { SEARCH_RESULTS, } from 'reader/follow-button/follow-sources';
+import MobileBackToSidebar from 'components/mobile-back-to-sidebar';
 
 class SearchStream extends Component {
 	static propTypes = {
@@ -126,7 +126,7 @@ class SearchStream extends Component {
 	}
 
 	render() {
-		const { query, suggestions } = this.props;
+		const { query, suggestions, translate } = this.props;
 		const emptyContent = <EmptyContent query={ query } />;
 		const sortOrder = this.props.postsStore && this.props.postsStore.sortOrder;
 		const transformStreamItems = ( ! query || query === '' )
@@ -176,9 +176,12 @@ class SearchStream extends Component {
 				transformStreamItems={ transformStreamItems }
 			>
 				{ this.props.showBack && <HeaderBack /> }
-				<DocumentHead title={ documentTitle } />
 				<div ref={ this.handleStreamMounted } />
 				<div className="search-stream__fixed-area" ref={ this.handleSearchBoxMounted }>
+				<DocumentHead title={ documentTitle } />
+				<MobileBackToSidebar>
+					<h1>{ translate( 'Search' ) }</h1>
+				</MobileBackToSidebar>
 					<CompactCard className="search-stream__input-card">
 						<SearchInput
 							onSearch={ this.updateQuery }

diff --git a/client/reader/search-stream/style.scss b/client/reader/search-stream/style.scss
@@ -11,7 +11,7 @@
 .search-stream__fixed-area-separator {
 	margin-top: 31px;
 	margin-bottom: 0;
-	background: #c8d7e1;
+	background: lighten( $gray, 20% );
 }
 
 .is-reader-page .search-stream .reader-post-card.card {
@@ -21,9 +21,13 @@
 .is-reader-page .search-stream__fixed-area {
 	background-color: $white;
 	position: fixed;
-	top: 0px;
-	padding-top: 77px;
+	top: 0;
+	padding-top: 47px;
 	z-index: 20;
+
+	@include breakpoint( ">660px" ) {
+		padding-top: 77px;
+	}
 }
 
 // Custom breakpoints needed to match Related Posts
@@ -34,7 +38,7 @@ $reader-related-card-v2-breakpoint-small: "( max-width: 535px )";
 .is-reader-page .search-stream .reader__content {
 	display: flex;
 	flex-flow: wrap;
-	margin-top: 80px;
+	margin-top: 100px;
 
 	@include breakpoint( ">660px" ) {
 		margin-top: 133px;