diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap index 30cbf6a86e..c5a8a3f5e5 100644 --- a/__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap +++ b/__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap @@ -5,7 +5,7 @@ exports[`Matches shallow shapshot 1`] = ` className="src-shared-components-Leaderboard-Podium-themes-___default__Podium___1qIZm" >
@@ -50,7 +49,6 @@ exports[`Matches shallow shapshot 1`] = ` isCopilot={false} isTopGear={false} onUsernameClick={null} - podiumPlaces={4} themeName="Default" /> @@ -71,7 +69,6 @@ exports[`Matches shallow shapshot 1`] = ` isCopilot={false} isTopGear={false} onUsernameClick={null} - podiumPlaces={4} themeName="Default" /> @@ -92,7 +89,6 @@ exports[`Matches shallow shapshot 1`] = ` isCopilot={false} isTopGear={false} onUsernameClick={null} - podiumPlaces={4} themeName="Default" /> 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/Leaderboard/Podium/index.jsx b/src/shared/components/Leaderboard/Podium/index.jsx index 5a6cf54310..d1df45fb36 100644 --- a/src/shared/components/Leaderboard/Podium/index.jsx +++ b/src/shared/components/Leaderboard/Podium/index.jsx @@ -64,13 +64,12 @@ export default function Podium(props) { isTopGear={isTopGear} isAlgo={isAlgo} themeName={themeName} - podiumPlaces={comps.length} /> )); return ( -
3 ? 'PodiumWrapCondense' : 'PodiumWrap'}`} style={comps.length === 4 ? { 'justify-content': 'space-between' } : {}}> +
{podiumSpots}
); diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx index 99d73216ab..4321d7e7c1 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx +++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx @@ -25,7 +25,7 @@ */ import React from 'react'; -import PT, { number } from 'prop-types'; +import PT from 'prop-types'; import { Avatar } from 'topcoder-react-ui-kit'; import { config } from 'topcoder-react-utils'; import _ from 'lodash'; @@ -127,7 +127,6 @@ export default function PodiumSpot(props) { isTopGear, isAlgo, themeName, - podiumPlaces, } = props; const stylesName = THEME[themeName]; @@ -141,7 +140,7 @@ export default function PodiumSpot(props) { if (photoUrl) { photoUrl = `${config.CDN.PUBLIC}/avatar/${encodeURIComponent(photoUrl)}?size=160`; } - let rootStyle = `${stylesName}.${podiumPlaces > 3 ? 'PodiumSpotCondense' : 'PodiumSpot'}`; + let rootStyle = `${stylesName}.${themeName === 'TCO23' ? 'PodiumSpotCondense' : 'PodiumSpot'}`; if (PODIUM_ITEM_MODIFIER[competitor.rank]) rootStyle += ` ${stylesName}.PodiumSpot--${PODIUM_ITEM_MODIFIER[competitor.rank]}`; const fulfillment = competitor['tco_leaderboard.fulfillment'] ? (parseFloat(competitor['tco_leaderboard.fulfillment']) * 100).toFixed(2).replace(/[.,]00$/, '') @@ -175,24 +174,15 @@ export default function PodiumSpot(props) {
4 ? 4 : competitor.rank]}`}> 3 ? 200 : 392} - height={podiumPlaces > 3 ? 16 : 25} + width={200} + height={16} fill="none" - viewBox={`0 0 ${podiumPlaces > 3 ? 200 : 392} ${podiumPlaces > 3 ? 16 : 25}`} + viewBox="0 0 200 16" > - { - podiumPlaces > 3 ? ( - - ) : ( - - ) - } + { @@ -376,7 +366,6 @@ PodiumSpot.propTypes = { isTopGear: PT.bool, isAlgo: PT.bool, themeName: PT.string, - podiumPlaces: number, }; PodiumSpot.defaultProps = { @@ -385,5 +374,4 @@ PodiumSpot.defaultProps = { isTopGear: false, isAlgo: false, themeName: 'Default', - podiumPlaces: 1, }; diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss index facff2d8c8..863313ffab 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss @@ -217,6 +217,8 @@ $podium-border-color: #ededf2; text-transform: uppercase; margin-bottom: 8px; color: #000; + border: none; + padding: 0; } .handle-link { 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) => {