From 6535c78b62cb48f43128d4f26078560b94924cc3 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Wed, 21 Jun 2017 22:53:04 +0300
Subject: [PATCH] Mobile design changes for SearchPage

---
 src/containers/SearchPage/SearchPage.css      | 15 +++++++++--
 src/containers/SearchPage/SearchPage.js       | 25 +++++++++++++------
 .../__snapshots__/SearchPage.test.js.snap     |  4 +--
 src/translations/en.json                      |  3 ++-
 4 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/containers/SearchPage/SearchPage.css b/src/containers/SearchPage/SearchPage.css
index e8a1585d..1a98b6ea 100644
--- a/src/containers/SearchPage/SearchPage.css
+++ b/src/containers/SearchPage/SearchPage.css
@@ -1,12 +1,23 @@
+@import '../../marketplace.css';
+
 .container {
+  /* Layout */
   width: 100%;
 }
 
 .searchResultSummary {
-  margin: 0 1rem;
+  /* Layout */
+  margin: 18px 24px;
+}
+
+.searchString {
+  /* Font color */
+  color: var(--marketplaceColor);
+  white-space: nowrap;
 }
 
 .listings {
+  /* Layout */
   display: block;
-  padding: 0 24px;
+  padding: 0 24px 24px 24px;
 }
diff --git a/src/containers/SearchPage/SearchPage.js b/src/containers/SearchPage/SearchPage.js
index a1ef221d..ec9a5b3c 100644
--- a/src/containers/SearchPage/SearchPage.js
+++ b/src/containers/SearchPage/SearchPage.js
@@ -50,22 +50,31 @@ export const SearchPageComponent = props => {
     </p>
   );
 
-  const resultsFound = (
-    <p>
+  const resultsFoundNoAddress = (
+    <h3>
       <FormattedMessage id="SearchPage.foundResults" values={{ count: totalItems }} />
-    </p>
+    </h3>
   );
+  const address = searchInURL && searchInURL.address
+    ? <span className={css.searchString}>{searchInURL.address.split(', ')[0]}</span>
+    : null;
+  const resultsFoundWithAddress = (
+    <h3>
+      <FormattedMessage id="SearchPage.foundResultsWithAddress" values={{ count: totalItems, address }} />
+    </h3>
+  );
+  const resultsFound = address ? resultsFoundWithAddress : resultsFoundNoAddress;
 
   const noResults = (
-    <p>
+    <h3>
       <FormattedMessage id="SearchPage.noResults" />
-    </p>
+    </h3>
   );
 
   const loadingResults = (
-    <p>
+    <h3>
       <FormattedMessage id="SearchPage.loadingResults" />
-    </p>
+    </h3>
   );
 
   const searchParamsForPagination = parse(location.search);
@@ -83,7 +92,7 @@ export const SearchPageComponent = props => {
           <SearchResultsPanel
             currencyConfig={config.currencyConfig}
             listings={listingsAreLoaded ? listings : []}
-            pagination={pagination}
+            pagination={listingsAreLoaded ? pagination : null}
             search={searchParamsForPagination}
           />
         </div>
diff --git a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap b/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap
index 5892dd52..0ec67c0e 100644
--- a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap
+++ b/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap
@@ -2,7 +2,7 @@ exports[`SearchPageComponent matches snapshot 1`] = `
 <Connect(withRouter(PageLayout))
   title="Search page: listings">
   <div>
-    <p>
+    <h3>
       <FormattedMessage
         id="SearchPage.foundResults"
         values={
@@ -10,7 +10,7 @@ exports[`SearchPageComponent matches snapshot 1`] = `
             "count": 22,
           }
         } />
-    </p>
+    </h3>
   </div>
   <div>
     <div>
diff --git a/src/translations/en.json b/src/translations/en.json
index 93cf7078..2f7b6768 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -140,7 +140,8 @@
   "SalePage.loadingData": "Loading sale data.",
   "SalePage.rejectButton": "Reject request",
   "SalePage.title": "Sale details for ${title}.",
-  "SearchPage.foundResults": "{count, number} {count, plural, one {listing} other {listings}} found.",
+  "SearchPage.foundResults": "{count, number} {count, plural, one {sauna} other {saunas}} found",
+  "SearchPage.foundResultsWithAddress": "{count, number} {count, plural, one {sauna} other {saunas}} around {address}",
   "SearchPage.loadingResults": "Loading search results...",
   "SearchPage.loadingResults": "Loading search results...",
   "SearchPage.noResults": "Could not find any listings.",