Skip to content

Reskin challenge listing #6630

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 1, 2022
Merged

Reskin challenge listing #6630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
97906ac
fix: sort by prize
dedywahyudi Aug 18, 2022
7e5751b
fix: dropdown consistency style
dedywahyudi Aug 24, 2022
f60ebd8
fix: hover out dropdown
dedywahyudi Aug 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 19 additions & 13 deletions src/shared/actions/challenge-listing/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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;
Expand Down Expand Up @@ -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: {
Expand All @@ -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;
Expand All @@ -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: {
Expand All @@ -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;
Expand All @@ -304,15 +306,16 @@ 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: {
...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;
Expand All @@ -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: {
Expand All @@ -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;
Expand Down Expand Up @@ -436,15 +440,16 @@ 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: {
...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;
Expand Down Expand Up @@ -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,
Expand Down
47 changes: 18 additions & 29 deletions src/shared/components/SortingSelectBar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
21 changes: 17 additions & 4 deletions src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions src/shared/utils/challenge-listing/buckets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
],
},
Expand All @@ -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,
],
},
Expand All @@ -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,
],
},
Expand All @@ -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]: {
Expand Down
12 changes: 11 additions & 1 deletion src/shared/utils/challenge-listing/sort.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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) => {
Expand Down