From 6df904674305ff7212a75b6eda0970b984e3632a Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Mon, 23 Mar 2020 15:10:11 +0200 Subject: [PATCH 1/4] Add search results sorting to the search page --- src/components/SearchFilters/SearchFilters.js | 27 +++- .../SearchFiltersMobile.js | 27 ++++ src/components/SortBy/SortBy.js | 45 ++++++ src/components/SortBy/SortByPlain.css | 102 ++++++++++++ src/components/SortBy/SortByPlain.js | 98 ++++++++++++ src/components/SortBy/SortByPopup.css | 150 ++++++++++++++++++ src/components/SortBy/SortByPopup.js | 120 ++++++++++++++ src/components/index.js | 1 + src/containers/SearchPage/MainPanel.js | 4 + src/containers/SearchPage/SearchPage.js | 3 +- src/marketplace-custom-config.js | 21 +++ src/translations/en.json | 1 + 12 files changed, 597 insertions(+), 2 deletions(-) create mode 100644 src/components/SortBy/SortBy.js create mode 100644 src/components/SortBy/SortByPlain.css create mode 100644 src/components/SortBy/SortByPlain.js create mode 100644 src/components/SortBy/SortByPopup.css create mode 100644 src/components/SortBy/SortByPopup.js diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js index c9bb3ab29d..4a262d2f90 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -6,7 +6,8 @@ import classNames from 'classnames'; import { withRouter } from 'react-router-dom'; import omit from 'lodash/omit'; -import { BookingDateRangeFilter, PriceFilter, KeywordFilter } from '../../components'; +import config from '../../config'; +import { BookingDateRangeFilter, PriceFilter, KeywordFilter, SortBy } from '../../components'; import routeConfiguration from '../../routeConfiguration'; import { parseDateFromISO8601, stringifyDateToISO8601 } from '../../util/dates'; import { createResourceLocatorString } from '../../util/routes'; @@ -53,6 +54,7 @@ const SearchFiltersComponent = props => { rootClassName, className, urlQueryParams, + sort, listingsAreLoaded, resultsCount, searchInProgress, @@ -85,6 +87,8 @@ const SearchFiltersComponent = props => { ? initialValue(urlQueryParams, keywordFilter.paramName) : null; + const isKeywordFilterActive = !!initialKeyword; + const handlePrice = (urlParam, range) => { const { minPrice, maxPrice } = range || {}; const queryParams = @@ -172,6 +176,25 @@ const SearchFiltersComponent = props => { /> ) : null; + + const handleSortBy = (urlParam, values) => { + const queryParams = values + ? { ...urlQueryParams, [urlParam]: values } + : omit(urlQueryParams, urlParam); + + history.push(createResourceLocatorString('SearchPage', routeConfiguration(), {}, queryParams)); + }; + + const sortBy = config.custom.sortConfig.active ? ( + + ) : null; + return (
@@ -181,6 +204,8 @@ const SearchFiltersComponent = props => { {toggleSearchFiltersPanelButton}
+ {sortBy} + {listingsAreLoaded && resultsCount > 0 ? (
diff --git a/src/components/SearchFiltersMobile/SearchFiltersMobile.js b/src/components/SearchFiltersMobile/SearchFiltersMobile.js index 4a4fba3b75..361e255c92 100644 --- a/src/components/SearchFiltersMobile/SearchFiltersMobile.js +++ b/src/components/SearchFiltersMobile/SearchFiltersMobile.js @@ -5,6 +5,8 @@ import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl'; import { withRouter } from 'react-router-dom'; import omit from 'lodash/omit'; +import config from '../../config'; + import routeConfiguration from '../../routeConfiguration'; import { parseDateFromISO8601, stringifyDateToISO8601 } from '../../util/dates'; import { createResourceLocatorString } from '../../util/routes'; @@ -15,6 +17,7 @@ import { PriceFilter, SelectSingleFilter, SelectMultipleFilter, + SortBy, BookingDateRangeFilter, } from '../../components'; import { propTypes } from '../../util/types'; @@ -36,6 +39,7 @@ class SearchFiltersMobileComponent extends Component { this.handlePrice = this.handlePrice.bind(this); this.handleDateRange = this.handleDateRange.bind(this); this.handleKeyword = this.handleKeyword.bind(this); + this.handleSortBy = this.handleSortBy.bind(this); this.initialValue = this.initialValue.bind(this); this.initialValues = this.initialValues.bind(this); this.initialPriceRangeValue = this.initialPriceRangeValue.bind(this); @@ -129,6 +133,15 @@ class SearchFiltersMobileComponent extends Component { history.push(createResourceLocatorString('SearchPage', routeConfiguration(), {}, queryParams)); } + handleSortBy(urlParam, sort) { + const { urlQueryParams, history } = this.props; + const queryParams = urlParam + ? { ...urlQueryParams, [urlParam]: sort } + : omit(urlQueryParams, urlParam); + + history.push(createResourceLocatorString('SearchPage', routeConfiguration(), {}, queryParams)); + } + // Reset all filter query parameters resetAll(e) { const { urlQueryParams, history, filterParamNames } = this.props; @@ -185,6 +198,7 @@ class SearchFiltersMobileComponent extends Component { const { rootClassName, className, + sort, listingsAreLoaded, resultsCount, searchInProgress, @@ -297,6 +311,16 @@ class SearchFiltersMobileComponent extends Component { /> ) : null; + const isKeywordFilterActive = !!initialKeyword; + + const sortBy = config.custom.sortConfig.active ? ( + + ) : null; + return (
@@ -334,6 +358,7 @@ class SearchFiltersMobileComponent extends Component { {amenitiesFilterElement} {priceFilterElement} {dateRangeFilterElement} + {sortBy}
) : null} @@ -351,6 +376,7 @@ class SearchFiltersMobileComponent extends Component { SearchFiltersMobileComponent.defaultProps = { rootClassName: null, className: null, + sort: null, resultsCount: null, searchingInProgress: false, selectedFiltersCount: 0, @@ -365,6 +391,7 @@ SearchFiltersMobileComponent.propTypes = { rootClassName: string, className: string, urlQueryParams: object.isRequired, + sort: string, listingsAreLoaded: bool.isRequired, resultsCount: number, searchingInProgress: bool, diff --git a/src/components/SortBy/SortBy.js b/src/components/SortBy/SortBy.js new file mode 100644 index 0000000000..254d1ce723 --- /dev/null +++ b/src/components/SortBy/SortBy.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { string, bool } from 'prop-types'; +import { intlShape, injectIntl } from '../../util/reactIntl'; + +import config from '../../config'; + +import SortByPlain from './SortByPlain'; +import SortByPopup from './SortByPopup'; + +const SortBy = props => { + const { sort, showAsPopup, isKeywordFilterActive, intl, ...rest } = props; + + const { relevanceKey } = config.custom.sortConfig; + + const options = config.custom.sortConfig.options.map(option => { + const isRelevance = option.key === relevanceKey; + return { + ...option, + disabled: (isRelevance && !isKeywordFilterActive) || (!isRelevance && isKeywordFilterActive), + }; + }); + const defaultValue = 'createdAt'; + const componentProps = { + urlParam: 'sort', + label: intl.formatMessage({ id: 'SortBy.heading' }), + options, + initialValue: isKeywordFilterActive ? relevanceKey : sort || defaultValue, + ...rest, + }; + return showAsPopup ? : ; +}; + +SortBy.defaultProps = { + sort: null, + showAsPopup: false, +}; + +SortBy.propTypes = { + sort: string, + showAsPopup: bool, + isKeywordFilterActive: bool.isRequired, + intl: intlShape.isRequired, +}; + +export default injectIntl(SortBy); diff --git a/src/components/SortBy/SortByPlain.css b/src/components/SortBy/SortByPlain.css new file mode 100644 index 0000000000..1900af7b0b --- /dev/null +++ b/src/components/SortBy/SortByPlain.css @@ -0,0 +1,102 @@ +@import '../../marketplace.css'; + +.root { + padding-top: 24px; + padding-bottom: 17px; + border-bottom: 1px solid var(--matterColorNegative); +} + +.filterLabel, +.filterLabelSelected { + @apply --marketplaceH3FontStyles; + + /* Baseline adjustment for label text */ + margin-top: 0; + margin-bottom: 12px; + padding: 4px 0 2px 0; +} + +.filterLabel { + color: var(--matterColorDark); +} + +.filterLabelSelected { + color: var(--marketplaceColor); +} + +.labelButton { + /* Override button styles */ + outline: none; + text-align: left; + border: none; + padding: 0; + cursor: pointer; +} + +.optionsContainerOpen { + height: auto; + padding-bottom: 30px; +} + +.optionsContainerClosed { + height: 0; + overflow: hidden; +} + +.optionBorder, +.optionBorderSelected { + position: absolute; + height: calc(100% - 12px); + top: 4px; + left: -24px; + transition: width var(--transitionStyleButton); +} + +/* left animated "border" like hover element */ +.optionBorder { + width: 0; + background-color: var(--matterColorDark); +} + +/* left static border for selected element */ +.optionBorderSelected { + width: 8px; + background-color: var(--matterColorDark); +} + +.option { + @apply --marketplaceH4FontStyles; + font-weight: var(--fontWeightMedium); + font-size: 18px; + color: var(--matterColor); + + /* Layout */ + display: block; + position: relative; + margin: 0; + padding: 4px 0 8px 20px; + + /* Override button styles */ + outline: none; + border: none; + cursor: pointer; + + &:focus, + &:hover { + color: var(--matterColorDark); + } + + &:hover .menuItemBorder { + width: 6px; + } + + &:disabled { + color: var(--matterColorAnti); + cursor: default; + } +} + +.optionSelected { + composes: option; + color: var(--matterColorDark); +} diff --git a/src/components/SortBy/SortByPlain.js b/src/components/SortBy/SortByPlain.js new file mode 100644 index 0000000000..0563a0b1ff --- /dev/null +++ b/src/components/SortBy/SortByPlain.js @@ -0,0 +1,98 @@ +import React, { Component } from 'react'; +import { arrayOf, func, shape, string } from 'prop-types'; +import classNames from 'classnames'; + +import css from './SortByPlain.css'; + +class SortByPlain extends Component { + constructor(props) { + super(props); + this.state = { isOpen: true }; + this.selectOption = this.selectOption.bind(this); + this.toggleIsOpen = this.toggleIsOpen.bind(this); + } + + selectOption(option, e) { + const { urlParam, onSelect } = this.props; + onSelect(urlParam, option); + + // blur event target if event is passed + if (e && e.currentTarget) { + e.currentTarget.blur(); + } + } + + toggleIsOpen() { + this.setState({ isOpen: !this.state.isOpen }); + } + + render() { + const { rootClassName, className, label, options, initialValue } = this.props; + + const labelClass = initialValue ? css.filterLabelSelected : css.filterLabel; + + const optionsContainerClass = classNames({ + [css.optionsContainerOpen]: this.state.isOpen, + [css.optionsContainerClosed]: !this.state.isOpen, + }); + + const classes = classNames(rootClassName || css.root, className); + + return ( +
+
+ +
+
+ {options.map(option => { + // check if this option is selected + const selected = initialValue === option.key; + const optionClass = selected ? css.optionSelected : css.option; + // menu item selected or border class + const optionBorderClass = classNames({ + [css.optionBorderSelected]: selected, + [css.optionBorder]: !selected, + }); + return ( + + ); + })} +
+
+ ); + } +} + +SortByPlain.defaultProps = { + rootClassName: null, + className: null, + initialValue: null, +}; + +SortByPlain.propTypes = { + rootClassName: string, + className: string, + urlParam: string.isRequired, + label: string.isRequired, + onSelect: func.isRequired, + + options: arrayOf( + shape({ + key: string.isRequired, + label: string.isRequired, + }) + ).isRequired, + initialValue: string, +}; + +export default SortByPlain; diff --git a/src/components/SortBy/SortByPopup.css b/src/components/SortBy/SortByPopup.css new file mode 100644 index 0000000000..a60a4a9dd4 --- /dev/null +++ b/src/components/SortBy/SortByPopup.css @@ -0,0 +1,150 @@ +@import '../../marketplace.css'; + +.root { + display: inline-block; + margin-left: auto; + margin-right: 8px; + + &:last-of-type { + padding-right: 0; + } +} + +.icon { + position: relative; + font-size: 10px; + margin-right: 15px; + color: var(--matterColor); +} + +.iconUp { + position: absolute; + left: 0; + top: -9px; +} + +.iconDown { + position: absolute; + left: 0; + top: -0px; +} + +.menuLabel { + @apply --marketplaceButtonStylesSecondary; + @apply --marketplaceSearchFilterLabelFontStyles; + + padding: 9px 16px 10px 16px; + width: auto; + height: auto; + min-height: 0; + border-radius: 4px; + + white-space: nowrap; + + &:focus { + outline: none; + background-color: var(--matterColorLight); + border-color: transparent; + text-decoration: none; + box-shadow: var(--boxShadowFilterButton); + } +} + +.menuContent { + margin-top: 7px; + padding-top: 13px; + padding-bottom: 24px; + min-width: 300px; + border-radius: 4px; +} + +/* left animated "border" like hover element */ +.menuItemBorder { + position: absolute; + top: 2px; + left: 0px; + height: calc(100% - 4px); + width: 0; + background-color: var(--marketplaceColor); + transition: width var(--transitionStyleButton); +} + +/* left static border for selected element */ +.menuItemBorderSelected { + position: absolute; + top: 2px; + left: 0px; + height: calc(100% - 7px); + width: 6px; + background-color: var(--matterColorDark); +} + +.menuHeading { + /* @apply --marketplaceListingAttributeFontStyles; */ + font-weight: var(--fontWeightSemiBold); + color: var(--matterColor); + margin-left: 30px; + margin-right: 30px; + margin-bottom: 24px; +} + +.menuItem { + @apply --marketplaceListingAttributeFontStyles; + color: var(--matterColor); + + /* Layout */ + position: relative; + min-width: 300px; + margin: 0; + padding: 4px 30px; + + /* Override button styles */ + outline: none; + text-align: left; + border: none; + + cursor: pointer; + + &:focus, + &:hover { + color: var(--matterColorDark); + } + + &:hover .menuItemBorder { + width: 6px; + } + + &:disabled { + color: var(--matterColorAnti); + cursor: default; + } + &:disabled:hover .menuItemBorder { + width: 0; + } +} + +.clearMenuItem { + @apply --marketplaceH4FontStyles; + font-weight: var(--fontWeightMedium); + color: var(--matterColorAnti); + + /* Layout */ + position: relative; + min-width: 300px; + margin: 0; + padding: 32px 30px 18px 30px; + + /* Override button styles */ + outline: none; + text-align: left; + border: none; + + cursor: pointer; + transition: width var(--transitionStyleButton); + + &:focus, + &:hover { + color: var(--matterColor); + transition: width var(--transitionStyleButton); + } +} diff --git a/src/components/SortBy/SortByPopup.js b/src/components/SortBy/SortByPopup.js new file mode 100644 index 0000000000..1f43fb665b --- /dev/null +++ b/src/components/SortBy/SortByPopup.js @@ -0,0 +1,120 @@ +import React, { Component } from 'react'; +import { string, func, arrayOf, shape, number } from 'prop-types'; +import classNames from 'classnames'; + +import { Menu, MenuContent, MenuItem, MenuLabel } from '..'; +import css from './SortByPopup.css'; + +const optionLabel = (options, key) => { + const option = options.find(o => o.key === key); + return option ? option.label : key; +}; + +const SortByIcon = () => { + return ( + + + + + ); +}; + +class SortByPopup extends Component { + constructor(props) { + super(props); + + this.state = { isOpen: false }; + this.onToggleActive = this.onToggleActive.bind(this); + this.selectOption = this.selectOption.bind(this); + } + + onToggleActive(isOpen) { + this.setState({ isOpen: isOpen }); + } + + selectOption(urlParam, option) { + this.setState({ isOpen: false }); + this.props.onSelect(urlParam, option); + } + + render() { + const { + rootClassName, + className, + urlParam, + label, + options, + initialValue, + contentPlacementOffset, + } = this.props; + + // resolve menu label text and class + const menuLabel = initialValue ? optionLabel(options, initialValue) : label; + + const classes = classNames(rootClassName || css.root, className); + + return ( + + + + {menuLabel} + + + +

{label}

+
+ {options.map(option => { + // check if this option is selected + const selected = initialValue === option.key; + // menu item border class + const menuItemBorderClass = selected ? css.menuItemBorderSelected : css.menuItemBorder; + + return ( + + + + ); + })} +
+
+ ); + } +} + +SortByPopup.defaultProps = { + rootClassName: null, + className: null, + initialValue: null, + contentPlacementOffset: 0, +}; + +SortByPopup.propTypes = { + rootClassName: string, + className: string, + urlParam: string.isRequired, + label: string.isRequired, + onSelect: func.isRequired, + options: arrayOf( + shape({ + key: string.isRequired, + label: string.isRequired, + }) + ).isRequired, + initialValue: string, + contentPlacementOffset: number, +}; + +export default SortByPopup; diff --git a/src/components/index.js b/src/components/index.js index 9e34a67ddb..09c2796952 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -143,6 +143,7 @@ export { default as SearchMapPriceLabel } from './SearchMapPriceLabel/SearchMapP export { default as SearchResultsPanel } from './SearchResultsPanel/SearchResultsPanel'; export { default as SelectMultipleFilter } from './SelectMultipleFilter/SelectMultipleFilter'; export { default as SelectSingleFilter } from './SelectSingleFilter/SelectSingleFilter'; +export { default as SortBy } from './SortBy/SortBy'; export { default as StripeConnectAccountStatusBox } from './StripeConnectAccountStatusBox/StripeConnectAccountStatusBox'; export { default as StripePaymentAddress } from './StripePaymentAddress/StripePaymentAddress'; export { default as UserCard } from './UserCard/UserCard'; diff --git a/src/containers/SearchPage/MainPanel.js b/src/containers/SearchPage/MainPanel.js index 5f7ece6010..bd91649814 100644 --- a/src/containers/SearchPage/MainPanel.js +++ b/src/containers/SearchPage/MainPanel.js @@ -25,6 +25,7 @@ class MainPanel extends Component { className, rootClassName, urlQueryParams, + sort, listings, searchInProgress, searchListingsError, @@ -78,6 +79,7 @@ class MainPanel extends Component { this.setState({ isSearchFiltersPanelOpen: false })} filterParamNames={secondaryFilterParamNames} diff --git a/src/containers/SearchPage/SearchPage.js b/src/containers/SearchPage/SearchPage.js index 625f19a096..2279525752 100644 --- a/src/containers/SearchPage/SearchPage.js +++ b/src/containers/SearchPage/SearchPage.js @@ -158,7 +158,7 @@ export class SearchPageComponent extends Component { onActivateListing, } = this.props; // eslint-disable-next-line no-unused-vars - const { mapSearch, page, ...searchInURL } = parse(location.search, { + const { mapSearch, page, sort, ...searchInURL } = parse(location.search, { latlng: ['origin'], latlngBounds: ['bounds'], }); @@ -213,6 +213,7 @@ export class SearchPageComponent extends Component {
Date: Mon, 23 Mar 2020 16:11:48 +0200 Subject: [PATCH 2/4] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 71a467d4fa..5e2b80db33 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ way to update this template, but currently, we follow a pattern: ## Upcoming version 2020-XX-XX +- [add] Search result sorting [#1277](https://github.com/sharetribe/ftw-daily/pull/1277) - [change] Move category and amenities search filters from primary filters to secondary filters. [#1275](https://github.com/sharetribe/ftw-daily/pull/1275) ## [v4.3.0] 2020-03-16 From 62a31340df907f61096103c8375240133426fdcb Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Wed, 25 Mar 2020 11:13:16 +0200 Subject: [PATCH 3/4] Small fixes based on code review --- src/components/SortBy/SortByPopup.css | 1 - src/components/SortBy/SortByPopup.js | 2 +- src/marketplace-custom-config.js | 7 +++---- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/SortBy/SortByPopup.css b/src/components/SortBy/SortByPopup.css index a60a4a9dd4..a9cde4197b 100644 --- a/src/components/SortBy/SortByPopup.css +++ b/src/components/SortBy/SortByPopup.css @@ -80,7 +80,6 @@ } .menuHeading { - /* @apply --marketplaceListingAttributeFontStyles; */ font-weight: var(--fontWeightSemiBold); color: var(--matterColor); margin-left: 30px; diff --git a/src/components/SortBy/SortByPopup.js b/src/components/SortBy/SortByPopup.js index 1f43fb665b..ba5a661e59 100644 --- a/src/components/SortBy/SortByPopup.js +++ b/src/components/SortBy/SortByPopup.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { string, func, arrayOf, shape, number } from 'prop-types'; import classNames from 'classnames'; -import { Menu, MenuContent, MenuItem, MenuLabel } from '..'; +import { Menu, MenuContent, MenuItem, MenuLabel } from '../../components'; import css from './SortByPopup.css'; const optionLabel = (options, key) => { diff --git a/src/marketplace-custom-config.js b/src/marketplace-custom-config.js index 805cd6e9b3..248d02d9bf 100644 --- a/src/marketplace-custom-config.js +++ b/src/marketplace-custom-config.js @@ -65,13 +65,12 @@ export const keywordFilterConfig = { active: true, }; -const relevanceKey = 'relevance'; - export const sortConfig = { // Enable/disable the sorting control in the SearchPage active: true, - relevanceKey, + // Internal key for the relevance option, see notes below. + relevanceKey: 'relevance', options: [ { key: 'createdAt', label: 'Newest' }, @@ -82,6 +81,6 @@ export const sortConfig = { // The relevance is only used for keyword search, but the // parameter isn't sent to the Marketplace API. The key is purely // for handling the internal state of the sorting dropdown. - { key: relevanceKey, label: 'Relevance', longLabel: 'Relevance (Keyword search)' }, + { key: 'relevance', label: 'Relevance', longLabel: 'Relevance (Keyword search)' }, ], }; From eba47bd4a336e938bf4979f9adc0490a33f5c47d Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Wed, 25 Mar 2020 16:41:21 +0200 Subject: [PATCH 4/4] Fix filter UI responsiveness and ordering --- .../SearchFilters/SearchFilters.css | 9 ++++- src/components/SearchFilters/SearchFilters.js | 33 ++++++++++--------- src/components/SortBy/SortByPopup.css | 8 ----- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css index b0a0a125aa..31cd12c100 100644 --- a/src/components/SearchFilters/SearchFilters.css +++ b/src/components/SearchFilters/SearchFilters.css @@ -2,8 +2,13 @@ .root { display: flex; - justify-content: space-between; + flex-direction: column; background-color: var(--matterColorBright); +} + +.filterWrapper { + display: flex; + justify-content: space-between; position: relative; } @@ -24,6 +29,8 @@ line-height: 20px; margin-top: 9px; margin-bottom: 11px; + margin-left: auto; + margin-right: 8px; /* parent uses flexbox: this defines minimum width for text "6 results" */ flex-basis: 55px; diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js index 4a262d2f90..d0478147b6 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -69,7 +69,7 @@ const SearchFiltersComponent = props => { } = props; const hasNoResult = listingsAreLoaded && resultsCount === 0; - const classes = classNames(rootClassName || css.root, { [css.longInfo]: hasNoResult }, className); + const classes = classNames(rootClassName || css.root, className); const keywordLabel = intl.formatMessage({ id: 'SearchFilters.keywordLabel', @@ -197,22 +197,23 @@ const SearchFiltersComponent = props => { return (
-
- {priceFilterElement} - {dateRangeFilterElement} - {keywordFilterElement} - {toggleSearchFiltersPanelButton} -
- - {sortBy} - - {listingsAreLoaded && resultsCount > 0 ? ( -
- - - +
+
+ {priceFilterElement} + {dateRangeFilterElement} + {keywordFilterElement} + {toggleSearchFiltersPanelButton}
- ) : null} + + {listingsAreLoaded && resultsCount > 0 ? ( +
+ + + +
+ ) : null} + {sortBy} +
{hasNoResult ? (
diff --git a/src/components/SortBy/SortByPopup.css b/src/components/SortBy/SortByPopup.css index a9cde4197b..7970a600a7 100644 --- a/src/components/SortBy/SortByPopup.css +++ b/src/components/SortBy/SortByPopup.css @@ -1,13 +1,6 @@ @import '../../marketplace.css'; .root { - display: inline-block; - margin-left: auto; - margin-right: 8px; - - &:last-of-type { - padding-right: 0; - } } .icon { @@ -84,7 +77,6 @@ color: var(--matterColor); margin-left: 30px; margin-right: 30px; - margin-bottom: 24px; } .menuItem {