From 9305aa76e1250ee2001a027bd51b79778bf414e6 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Tue, 22 Aug 2017 14:20:23 +0300
Subject: [PATCH] mobile open map modal button as sticky (not compatible: Edge
 < 16)

---
 .../SearchResultsPanel/SearchResultsPanel.css |  1 +
 .../SearchResultsPanel/SearchResultsPanel.js  |  5 +++-
 src/containers/SearchPage/SearchPage.css      |  4 +++
 src/containers/SearchPage/SearchPage.js       | 25 ++++++++++---------
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.css b/src/components/SearchResultsPanel/SearchResultsPanel.css
index 5b31ec3e..0c529d4e 100644
--- a/src/components/SearchResultsPanel/SearchResultsPanel.css
+++ b/src/components/SearchResultsPanel/SearchResultsPanel.css
@@ -6,6 +6,7 @@
 }
 
 .listingCards {
+  flex-grow: 1;
   padding: 0 24px 24px 24px;
 
   @media (--viewportMedium) {
diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.js b/src/components/SearchResultsPanel/SearchResultsPanel.js
index 7dd0dfbd..666b2a02 100644
--- a/src/components/SearchResultsPanel/SearchResultsPanel.js
+++ b/src/components/SearchResultsPanel/SearchResultsPanel.js
@@ -28,6 +28,7 @@ const SearchResultsPanel = props => {
             currencyConfig={currencyConfig}
           />
         ))}
+        {props.children}
       </div>
       {paginationLinks}
     </div>
@@ -35,6 +36,7 @@ const SearchResultsPanel = props => {
 };
 
 SearchResultsPanel.defaultProps = {
+  children: null,
   className: null,
   listings: [],
   pagination: null,
@@ -42,9 +44,10 @@ SearchResultsPanel.defaultProps = {
   search: null,
 };
 
-const { array, object, string } = PropTypes;
+const { array, node, object, string } = PropTypes;
 
 SearchResultsPanel.propTypes = {
+  children: node,
   className: string,
   currencyConfig: propTypes.currencyConfig.isRequired,
   listings: array,
diff --git a/src/containers/SearchPage/SearchPage.css b/src/containers/SearchPage/SearchPage.css
index b9dc3cb2..a64174b9 100644
--- a/src/containers/SearchPage/SearchPage.css
+++ b/src/containers/SearchPage/SearchPage.css
@@ -117,6 +117,10 @@
   }
 }
 
+.openMobileMapSticky {
+  position: sticky;
+}
+
 .mapPanel {
 
   @media (--viewportMedium) {
diff --git a/src/containers/SearchPage/SearchPage.js b/src/containers/SearchPage/SearchPage.js
index 0e7593d4..24cf3abf 100644
--- a/src/containers/SearchPage/SearchPage.js
+++ b/src/containers/SearchPage/SearchPage.js
@@ -254,19 +254,20 @@ export class SearchPageComponent extends Component {
                 listings={listings}
                 pagination={listingsAreLoaded ? pagination : null}
                 search={searchParamsForPagination}
-              />
+              >
+                <button
+                  className={classNames(css.openMobileMap, { [css.openMobileMapSticky] : listings.length > 0 })}
+                  onClick={() => {
+                    this.useLocationSearchBounds = true;
+                    this.modalOpenedBoundsChange = true;
+                    this.setState({ isSearchMapOpenOnMobile: true });
+                  }}
+                >
+                  <MapIcon className={css.openMobileMapIcon} />
+                  <FormattedMessage id="SearchPage.openMapView" />
+                </button>
+              </SearchResultsPanel>
             </div>
-            <button
-              className={css.openMobileMap}
-              onClick={() => {
-                this.useLocationSearchBounds = true;
-                this.modalOpenedBoundsChange = true;
-                this.setState({ isSearchMapOpenOnMobile: true });
-              }}
-            >
-              <MapIcon className={css.openMobileMapIcon} />
-              <FormattedMessage id="SearchPage.openMapView" />
-            </button>
           </div>
           <ModalInMobile
             className={css.mapPanel}