Merge pull request #238 from sharetribe/searchpage-mobile-design

Mobile design changes for SearchPage

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;
 }

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>

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>

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.",