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 && }
+
-
' +
' ',
- tooltipClass: 'wide',
+ tooltipClass: 'wide first-step',
},
{
element: TRENDS.STEP_2.selector,
diff --git a/src/components/Trends/TrendsPanel.js b/src/components/Trends/TrendsPanel.js
index a1f638a09..57b2e33a2 100644
--- a/src/components/Trends/TrendsPanel.js
+++ b/src/components/Trends/TrendsPanel.js
@@ -176,8 +176,8 @@ export class TrendsPanel extends React.Component {
/>
)}
{!!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,
});
});