From b4739567059419c8eb9f673aaac374dedf7182e2 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Thu, 8 Feb 2018 17:29:42 +0200
Subject: [PATCH] Fix layout and dom structure

---
 .../SearchFiltersMobile.css                   |  7 ++++++-
 .../SearchFiltersMobile.js                    |  6 ++++--
 .../SelectMultipleFilterMobile.css            |  1 +
 .../SelectMultipleFilterMobile.js             | 19 +++++++++----------
 .../SelectMultipleFilterMobileForm.css        |  4 ----
 .../SelectMultipleFilterMobileForm.js         |  9 ++++++---
 .../SelectSingleFilterMobile.css              |  1 +
 7 files changed, 27 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobileForm.css

diff --git a/src/components/SearchFiltersMobile/SearchFiltersMobile.css b/src/components/SearchFiltersMobile/SearchFiltersMobile.css
index d5ec8ccf..06621cfa 100644
--- a/src/components/SearchFiltersMobile/SearchFiltersMobile.css
+++ b/src/components/SearchFiltersMobile/SearchFiltersMobile.css
@@ -65,7 +65,6 @@
 .modalHeadingWrapper {
   padding-bottom: 31px;
   border-bottom: 1px solid var(--matterColorNegative);
-  margin-bottom: 27px;
 }
 
 .modalHeading {
@@ -95,6 +94,12 @@
   }
 }
 
+.filtersWrapper {
+  /* add bottom margin so that the last filter won't be hidden
+   * under the bottom bar */
+  margin-bottom: 160px;
+}
+
 .showListingsContainer {
   position: fixed;
   bottom: 0;
diff --git a/src/components/SearchFiltersMobile/SearchFiltersMobile.js b/src/components/SearchFiltersMobile/SearchFiltersMobile.js
index 54c5f6b6..18a93f7e 100644
--- a/src/components/SearchFiltersMobile/SearchFiltersMobile.js
+++ b/src/components/SearchFiltersMobile/SearchFiltersMobile.js
@@ -211,8 +211,10 @@ class SearchFiltersMobileComponent extends Component {
               <FormattedMessage id={'SearchFiltersMobile.resetAll'} />
             </button>
           </div>
-          {categoryFilter}
-          {featuresFilter}
+          <div className={css.filtersWrapper}>
+            {categoryFilter}
+            {featuresFilter}
+          </div>
           <div className={css.showListingsContainer}>
             <Button className={css.showListingsButton} onClick={this.closeFilters}>
               {showListingsLabel}
diff --git a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css
index ef55f96e..777e23b0 100644
--- a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css
+++ b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css
@@ -2,6 +2,7 @@
 
 .root {
   padding-bottom: 16px;
+  margin-top: 30px;
   border-bottom: 1px solid var(--matterColorNegative);
 }
 
diff --git a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.js b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.js
index 4ee78b42..91225872 100644
--- a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.js
+++ b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.js
@@ -65,16 +65,15 @@ class SelectMultipleFilterMobileComponent extends Component {
             <FormattedMessage id={'SelectMultipleFilterMobileForm.clear'} />
           </button>
         </div>
-        <div className={optionsContainerClass}>
-          <SelectMultipleFilterMobileForm
-            name={name}
-            options={options}
-            initialValues={namedInitialValues}
-            onChange={this.handleSelect}
-            enableReinitialize={true}
-            keepDirtyOnReinitialize={true}
-          />
-        </div>
+        <SelectMultipleFilterMobileForm
+          className={optionsContainerClass}
+          name={name}
+          options={options}
+          initialValues={namedInitialValues}
+          onChange={this.handleSelect}
+          enableReinitialize={true}
+          keepDirtyOnReinitialize={true}
+        />
       </div>
     );
   }
diff --git a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobileForm.css b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobileForm.css
deleted file mode 100644
index 93adba15..00000000
--- a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobileForm.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@import '../../marketplace.css';
-
-.root {
-}
diff --git a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobileForm.js b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobileForm.js
index d8ea3d66..dd0015a3 100644
--- a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobileForm.js
+++ b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobileForm.js
@@ -5,19 +5,22 @@ import { reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { FieldGroupCheckbox, Form } from '../../components';
 
 const SelectMultipleFilterMobileFormComponent = props => {
-  const { form, name, options } = props;
+  const { form, className, name, options } = props;
 
   return (
-    <Form>
+    <Form className={className}>
       <FieldGroupCheckbox name={name} id={`${form}.${name}`} options={options} />
     </Form>
   );
 };
 
-SelectMultipleFilterMobileFormComponent.defaultProps = {};
+SelectMultipleFilterMobileFormComponent.defaultProps = {
+  className: null,
+};
 
 SelectMultipleFilterMobileFormComponent.propTypes = {
   ...formPropTypes,
+  className: string,
   name: string.isRequired,
   options: arrayOf(
     shape({
diff --git a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css
index 7cc9f1a1..e2f281d2 100644
--- a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css
+++ b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css
@@ -2,6 +2,7 @@
 
 .root {
   padding-bottom: 16px;
+  margin-top: 30px;
   border-bottom: 1px solid var(--matterColorNegative);
 }