Merge branch 'issue-375' into develop

Author: birdofpreyru

__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap

@@ -115,7 +115,7 @@ exports[`Matches shallow shapshot 1`] = `
         />
       </div>
       <div
-        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c"
+        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hidetwomonthdatepicker___OurWT"
       >
         <label
           htmlFor="date-range-picker"
@@ -125,6 +125,23 @@ exports[`Matches shallow shapshot 1`] = `
         <DateRangePicker
           endDate={undefined}
           id="date-range-picker"
+          numberOfMonths="1"
+          onDatesChange={[Function]}
+          startDate={undefined}
+        />
+      </div>
+      <div
+        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hideonemonthdatepicker___2zdTb"
+      >
+        <label
+          htmlFor="date-range-picker"
+        >
+          Date range
+        </label>
+        <DateRangePicker
+          endDate={undefined}
+          id="date-range-picker"
+          numberOfMonths="2"
           onDatesChange={[Function]}
           startDate={undefined}
         />
@@ -245,7 +262,23 @@ exports[`Matches shallow shapshot 2`] = `
         />
       </div>
       <div
-        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c"
+        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hidetwomonthdatepicker___OurWT"
+      >
+        <label
+          htmlFor="date-range-picker"
+        >
+          Date range
+        </label>
+        <DateRangePicker
+          endDate={undefined}
+          id="date-range-picker"
+          numberOfMonths="1"
+          onDatesChange={[Function]}
+          startDate={undefined}
+        />
+      </div>
+      <div
+        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hideonemonthdatepicker___2zdTb"
       >
         <label
           htmlFor="date-range-picker"
@@ -255,6 +288,7 @@ exports[`Matches shallow shapshot 2`] = `
         <DateRangePicker
           endDate={undefined}
           id="date-range-picker"
+          numberOfMonths="2"
           onDatesChange={[Function]}
           startDate={undefined}
         />

src/shared/components/challenge-listing/Filters/DateRangePicker.jsx

@@ -28,6 +28,7 @@ class DateRangePicker extends React.Component {
   render() {
     return (
       <WrappedDateRangePicker
+        numberOfMonths={this.props.numberOfMonths}
         focusedInput={this.state.focusedInput}
         isOutsideRange={() => false}
         onDatesChange={this.props.onDatesChange}

src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx

@@ -107,9 +107,28 @@ export default function FiltersPanel({
               }
             />
           </div>
-          <div styleName="filter dates">
+          <div styleName="filter dates hidetwomonthdatepicker">
             <label htmlFor="date-range-picker">Date range</label>
             <DateRangePicker
+              numberOfMonths={1}
+              endDate={filterState.endDate && moment(filterState.endDate)}
+              id="date-range-picker"
+              onDatesChange={(dates) => {
+                let d = dates.endDate ? dates.endDate.toISOString() : null;
+                let state = Filter.setEndDate(filterState, d);
+                d = dates.startDate ? dates.startDate.toISOString() : null;
+                state = Filter.setStartDate(state, d);
+                setFilterState(state);
+              }}
+              startDate={
+                filterState.startDate && moment(filterState.startDate)
+              }
+            />
+          </div>
+          <div styleName="filter dates hideonemonthdatepicker">
+            <label htmlFor="date-range-picker">Date range</label>
+            <DateRangePicker
+              numberOfMonths={2}
               endDate={filterState.endDate && moment(filterState.endDate)}
               id="date-range-picker"
               onDatesChange={(dates) => {

src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss

@@ -87,6 +87,7 @@ $panel-radius-4: $corner-radius * 2;
       padding-left: 0;
       margin-bottom: $panel-space-100;
       border-left: none;
+      margin-bottom: $panel-space-100;
     }
 
     button {
@@ -199,6 +200,18 @@ $panel-radius-4: $corner-radius * 2;
       @include xxs-to-sm {
         margin-top: 20px;
       }
+
+      &.hidetwomonthdatepicker {
+        @media screen and (min-width: $screen-md) {
+          display: none;
+        }
+      }
+
+      &.hideonemonthdatepicker {
+        @media screen and (max-width: $screen-md - 1px) {
+          display: none;
+        }
+      }
     }
   }
 }