diff --git a/src/components/Filters/FilterPanel.js b/src/components/Filters/FilterPanel.js index 4245141bf..407e688f6 100644 --- a/src/components/Filters/FilterPanel.js +++ b/src/components/Filters/FilterPanel.js @@ -29,17 +29,6 @@ export class FilterPanel extends React.Component { return (
- {!!this.props.hasFilterToggle && ( -
- -
- )} {!!this.props.hasFilters && (
{!!this.props.hasButton && ( @@ -111,7 +100,6 @@ export class FilterPanel extends React.Component { export const mapStateToProps = (state) => ({ hasButton: state.view.width < 750, - hasFilterToggle: state.view.width < 600 && !state.view.hasFilters, hasFilters: state.view.hasFilters, }); @@ -129,7 +117,6 @@ FilterPanel.defaultProps = { }; FilterPanel.propTypes = { - hasFilterToggle: PropTypes.bool.isRequired, onFilterToggle: PropTypes.func.isRequired, hasFilters: PropTypes.bool, hasButton: PropTypes.bool.isRequired, diff --git a/src/components/Filters/FilterPanelToggle.less b/src/components/Filters/FilterPanelToggle.less index a3b4b70d9..accfa2649 100644 --- a/src/components/Filters/FilterPanelToggle.less +++ b/src/components/Filters/FilterPanelToggle.less @@ -1,5 +1,14 @@ .filter-panel-toggle { - @media @desktop, @tablet-lg, @phone { + @media @superwide, @desktop, @tablet-lg { display: none; } + @media @tablet-sm, @phone { + display: block; + width: 90vw; + margin-left: auto; + margin-right: auto; + & .a-btn { + width: 100%; + } + } } diff --git a/src/components/List/ListPanel/ListPanel.js b/src/components/List/ListPanel/ListPanel.js index 4156bdee4..1e43d0f5a 100644 --- a/src/components/List/ListPanel/ListPanel.js +++ b/src/components/List/ListPanel/ListPanel.js @@ -94,8 +94,8 @@ export const ListPanel = () => { {!!hasMobileFilters && } +
- ); @@ -88,7 +87,7 @@ describe('mapDispatchToProps', () => { expect(dispatch.mock.calls.length).toEqual(1); }); - it('allows the user to trigger Filter Panel', () => { + it('allows the user to toggle Filter Panel', () => { const { target, props } = setupEnzyme(); const button = target.find('.filter-button button'); @@ -108,7 +107,6 @@ describe('mapStateToProps', () => { const actual = mapStateToProps(state); expect(actual).toEqual({ hasButton: false, - hasFilterToggle: false, hasFilters: true, }); });