diff --git a/src/shared/actions/challenge-listing/index.js b/src/shared/actions/challenge-listing/index.js index bce1df1e32..e7a3a775a7 100644 --- a/src/shared/actions/challenge-listing/index.js +++ b/src/shared/actions/challenge-listing/index.js @@ -184,6 +184,7 @@ function getMyPastChallengesInit(uuid, page, frontFilter) { */ function getActiveChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = {}) { const { sorts } = frontFilter; + const sortObj = SORT[sorts[BUCKETS.ONGOING]]; const filter = { backendFilter, frontFilter: { @@ -193,8 +194,8 @@ function getActiveChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter registrationEndDateEnd: new Date().toISOString(), perPage: PAGE_SIZE, page: page + 1, - sortBy: sorts[BUCKETS.ONGOING], - sortOrder: SORT[sorts[BUCKETS.ONGOING]].order, + sortBy: sortObj.field ? sortObj.field : sorts[BUCKETS.ONGOING], + sortOrder: sortObj.order, }, }; delete filter.frontFilter.sorts; @@ -245,7 +246,7 @@ function getActiveChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter function getOpenForRegistrationChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = {}, recommended = false, handle) { const { sorts } = frontFilter; - const sortOrder = SORT[sorts[BUCKETS.OPEN_FOR_REGISTRATION]]; + const sortObj = SORT[sorts[BUCKETS.OPEN_FOR_REGISTRATION]]; const filter = { backendFilter, frontFilter: { @@ -254,8 +255,8 @@ function getOpenForRegistrationChallengesDone(uuid, page, backendFilter, currentPhaseName: 'Registration', perPage: PAGE_SIZE, page: page + 1, - sortBy: sorts[BUCKETS.OPEN_FOR_REGISTRATION], - sortOrder: sortOrder ? sortOrder.order : 'asc', + sortBy: sortObj && sortObj.field ? sortObj.field : sorts[BUCKETS.OPEN_FOR_REGISTRATION], + sortOrder: sortObj ? sortObj.order : 'asc', }, }; delete filter.frontFilter.sorts; @@ -280,6 +281,7 @@ function getOpenForRegistrationChallengesDone(uuid, page, backendFilter, function getMyChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = {}) { const userId = decodeToken(tokenV3).userId.toString(); const { sorts } = frontFilter; + const sortObj = SORT[sorts[BUCKETS.MY]]; const filter = { backendFilter, frontFilter: { @@ -288,8 +290,8 @@ function getMyChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = { memberId: userId, perPage: PAGE_SIZE, page: page + 1, - sortBy: sorts[BUCKETS.MY], - sortOrder: SORT[sorts[BUCKETS.MY]].order, + sortBy: sortObj.field ? sortObj.field : sorts[BUCKETS.MY], + sortOrder: sortObj.order, }, }; delete filter.frontFilter.sorts; @@ -304,6 +306,7 @@ function getMyChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = { function getAllChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = {}) { const { sorts } = frontFilter; + const sortObj = SORT[sorts[BUCKETS.ALL]]; const filter = { backendFilter, frontFilter: { @@ -311,8 +314,8 @@ function getAllChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = status: 'Active', perPage: PAGE_SIZE, page: page + 1, - sortBy: sorts[BUCKETS.ALL], - sortOrder: SORT[sorts[BUCKETS.ALL]].order, + sortBy: sortObj.field ? sortObj.field : sorts[BUCKETS.ALL], + sortOrder: sortObj.order, }, }; delete filter.frontFilter.sorts; @@ -328,6 +331,7 @@ function getAllChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = function getMyPastChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = {}) { const userId = decodeToken(tokenV3).userId.toString(); const { sorts } = frontFilter; + const sortObj = SORT[sorts[BUCKETS.MY_PAST]]; const filter = { backendFilter, frontFilter: { @@ -336,8 +340,8 @@ function getMyPastChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter memberId: userId, perPage: PAGE_SIZE, page: page + 1, - sortBy: sorts[BUCKETS.MY_PAST], - sortOrder: SORT[sorts[BUCKETS.MY_PAST]].order, + sortBy: sortObj.field ? sortObj.field : sorts[BUCKETS.MY_PAST], + sortOrder: sortObj.order, }, }; delete filter.frontFilter.sorts; @@ -436,6 +440,7 @@ function getPastChallengesInit(uuid, page, frontFilter) { */ function getPastChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = {}) { const { sorts } = frontFilter; + const sortObj = SORT[sorts[BUCKETS.ALL_PAST]]; const filter = { backendFilter, frontFilter: { @@ -443,8 +448,8 @@ function getPastChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = status: 'Completed', perPage: PAGE_SIZE, page: page + 1, - sortBy: sorts[BUCKETS.ALL_PAST], - sortOrder: SORT[sorts[BUCKETS.ALL_PAST]].order, + sortBy: sortObj.field ? sortObj.field : sorts[BUCKETS.ALL_PAST], + sortOrder: sortObj.order, }, }; delete filter.frontFilter.sorts; @@ -546,6 +551,7 @@ export default createActions({ DROP_MY_CHALLENGES: _.noop, DROP_ALL_CHALLENGES: _.noop, DROP_PAST_CHALLENGES: _.noop, + DROP_MY_PAST_CHALLENGES: _.noop, DROP_RECOMMENDED_CHALLENGES: _.noop, // GET_ALL_ACTIVE_CHALLENGES_INIT: getAllActiveChallengesInit, diff --git a/src/shared/components/SortingSelectBar/style.scss b/src/shared/components/SortingSelectBar/style.scss index 178ed2c1ae..cf7694c388 100644 --- a/src/shared/components/SortingSelectBar/style.scss +++ b/src/shared/components/SortingSelectBar/style.scss @@ -52,10 +52,8 @@ $down-arrow-size: $base-unit; // 'Sort by' dropdown .Select { @include roboto-regular; - } - .is-focused { - font-weight: 700; + border-color: #b3b3b3 !important; } .Select-control { @@ -88,8 +86,9 @@ $down-arrow-size: $base-unit; overflow: visible; } - .Select.is-focused:not(.is-open) > .Select-control { - border-color: #137d60 !important; + .Select.is-focused > .Select-control { + outline: none; + box-shadow: none; } .Select-value-label { @@ -120,51 +119,41 @@ $down-arrow-size: $base-unit; .Select-menu-outer { width: 100%; color: $tc-gray-90; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; font-weight: 400; font-size: 12px; background-color: $tc-white; box-sizing: border-box; - margin-top: 2px; - padding: 4px 0; + border: 1px solid #ccc; + max-height: 200px; position: absolute; + left: 0; + height: fit-content; top: 100%; - right: 0; - z-index: 1000; - -webkit-overflow-scrolling: touch; - border: none !important; } .Select-menu { - max-height: none; overflow-y: visible; - height: 22px; font-size: 14px; } .Select-option { box-sizing: border-box; - color: rgba(51, 51, 51, 0.8); + color: #2a2a2b; cursor: pointer; display: block; - padding: 6px 16px; - border-left: 1px solid #aaa; - border-right: 1px solid #aaa; - } - - .Select-option:last-child { - border-bottom-right-radius: 5px !important; - border-bottom-left-radius: 5px !important; - border-bottom: 1px solid #aaa; + padding: 8px 15px; } - .Select-option:first-child { - border-top: 1px solid #aaa; - border-top-left-radius: $base-unit; - border-top-right-radius: $base-unit; + .Select-option:hover { + color: #fff !important; + font-weight: 400 !important; + background-color: #229173 !important; } - .Select-option:hover { - color: $tc-black; + .Select.is-focused:not(.is-open) > .Select-control { + border-color: #b3b3b3 !important; } .Select-option.is-selected { diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss b/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss index 9dfcc95352..ed5bd2e130 100644 --- a/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss +++ b/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss @@ -587,16 +587,29 @@ hr.hr { .Select.is-focused > .Select-control { outline: none; box-shadow: none; - border-color: #151516 !important; } .Select-menu-outer { - margin-top: 1px; font-size: 14px; + .Select-option { + color: #2a2a2b !important; + padding: 8px 15px; + } + + .Select-option.is-focused { + background-color: #fff !important; + } + .Select-option.is-selected { - background-color: #137d60 !important; - color: $tc-white !important; + font-weight: 700; + color: #2a2a2b !important; + background-color: #fff !important; + } + + .Select-option:hover { + background-color: #229173 !important; + color: #fff !important; } } } diff --git a/src/shared/utils/challenge-listing/buckets.js b/src/shared/utils/challenge-listing/buckets.js index b498a8451e..ca85e0572a 100644 --- a/src/shared/utils/challenge-listing/buckets.js +++ b/src/shared/utils/challenge-listing/buckets.js @@ -30,6 +30,8 @@ export const BUCKET_DATA = { name: 'All Challenges', sorts: [ SORTS.MOST_RECENT_START_DATE, + SORTS.PRIZE_HIGH_TO_LOW, + SORTS.PRIZE_LOW_TO_HIGH, SORTS.TITLE_A_TO_Z, ], }, @@ -46,6 +48,7 @@ export const BUCKET_DATA = { // SORTS.NUM_REGISTRANTS, // SORTS.NUM_SUBMISSIONS, SORTS.PRIZE_HIGH_TO_LOW, + SORTS.PRIZE_LOW_TO_HIGH, SORTS.TITLE_A_TO_Z, ], }, @@ -65,6 +68,7 @@ export const BUCKET_DATA = { // SORTS.NUM_REGISTRANTS, // SORTS.NUM_SUBMISSIONS, SORTS.PRIZE_HIGH_TO_LOW, + SORTS.PRIZE_LOW_TO_HIGH, SORTS.TITLE_A_TO_Z, ], }, @@ -82,6 +86,7 @@ export const BUCKET_DATA = { SORTS.CURRENT_PHASE, SORTS.TITLE_A_TO_Z, SORTS.PRIZE_HIGH_TO_LOW, + SORTS.PRIZE_LOW_TO_HIGH, ], }, [BUCKETS.UPCOMING]: { diff --git a/src/shared/utils/challenge-listing/sort.js b/src/shared/utils/challenge-listing/sort.js index c7d7256ef6..089cd519a7 100644 --- a/src/shared/utils/challenge-listing/sort.js +++ b/src/shared/utils/challenge-listing/sort.js @@ -7,13 +7,16 @@ import { sumBy } from 'lodash'; import { calculateScore } from './helper'; // import { phaseStartDate, phaseEndDate } from './helper'; +const PRIZE = 'overview.totalPrizes'; + export const SORTS = { CURRENT_PHASE: 'current-phase', MOST_RECENT: 'updated', MOST_RECENT_START_DATE: 'startDate', // NUM_REGISTRANTS: 'num-registrants', // NUM_SUBMISSIONS: 'num-submissions', - PRIZE_HIGH_TO_LOW: 'overview.totalPrizes', + PRIZE_HIGH_TO_LOW: 'overview.totalPrizes-high-to-low', + PRIZE_LOW_TO_HIGH: 'overview.totalPrizes-low-to-high', // TIME_TO_REGISTER: 'registrationEndDate', // TIME_TO_SUBMIT: 'submissionEndDate', TITLE_A_TO_Z: 'name', @@ -40,6 +43,13 @@ export default { func: (a, b) => b.totalPrize - a.totalPrize, name: 'Prize high to low', order: 'desc', + field: PRIZE, + }, + [SORTS.PRIZE_LOW_TO_HIGH]: { + func: (a, b) => b.totalPrize - a.totalPrize, + name: 'Prize low to high', + order: 'asc', + field: PRIZE, }, // [SORTS.TIME_TO_REGISTER]: { // func: (a, b) => {