Merge pull request #954 from sharetribe/fix-price-filter-styles

Fix price filter styles

CHANGELOG.md

@@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2018-11-XX
 
+* [fix] PriceFilter styles
+  [#954](https://github.com/sharetribe/flex-template-web/pull/954)
+
 ## v2.3.1 2018-11-16
 
 * [fix] Don't set currentUserHasListings if fetched listing is in draft state.

src/components/PriceFilter/PriceFilterPlain.css

@@ -34,6 +34,10 @@
   cursor: pointer;
 }
 
+.formWrapper {
+  padding-left: 20px;
+}
+
 .clearButton {
   @apply --marketplaceH5FontStyles;
   font-weight: var(--fontWeightMedium);

src/components/PriceFilter/PriceFilterPlain.js

@@ -73,20 +73,22 @@ class PriceFilterPlainComponent extends Component {
             <FormattedMessage id={'PriceFilter.clear'} />
           </button>
         </div>
-        <PriceFilterForm
-          id={id}
-          initialValues={hasInitialValues ? initialValues : { minPrice: min, maxPrice: max }}
-          onChange={this.handleChange}
-          intl={intl}
-          contentRef={node => {
-            this.filterContent = node;
-          }}
-          min={min}
-          max={max}
-          step={step}
-          liveEdit
-          isOpen={this.state.isOpen}
-        />
+        <div className={css.formWrapper}>
+          <PriceFilterForm
+            id={id}
+            initialValues={hasInitialValues ? initialValues : { minPrice: min, maxPrice: max }}
+            onChange={this.handleChange}
+            intl={intl}
+            contentRef={node => {
+              this.filterContent = node;
+            }}
+            min={min}
+            max={max}
+            step={step}
+            liveEdit
+            isOpen={this.state.isOpen}
+          />
+        </div>
       </div>
     );
   }

src/forms/PriceFilterForm/PriceFilterForm.css

@@ -106,7 +106,13 @@
 }
 
 .priceSeparator {
-  margin: 0 8px;
+  margin: 4px 8px 0 8px;
+}
+
+@media (--viewportMedium) {
+  .priceSeparator {
+    margin: 2px 8px 0 8px;
+  }
 }
 
 .sliderWrapper {