update filtering UI on challenge listing

[Oanh-and-only-Oanh]

Currently, the calendar interface on the challenge listings page is not user friendly. See below

Update: We'd like to update the calendar UI so that it is easier for members to input dates without having to click though the calendar.

[Oanh-and-only-Oanh]

Design f2f copiloted by eriantoongko

[eriantoongko]

F2F Challenge: https://www.topcoder.com/challenges/cb13249a-48f2-4465-9e68-0a49ba5deac9 Desktop handoff: https://marvelapp.com/prototype/f70187e/screen/73550299/handoff Tablet handoff: https://marvelapp.com/prototype/ba511cg/screen/73550331/handoff Mobile handoff: https://marvelapp.com/prototype/9440hbh/screen/73550357/handoff Source file: https://drive.google.com/drive/folders/1kcUbIpo5i0LExa_kfSSuyt1io8JBAeSc?usp=sharing

[maxceem]

@Oanh-and-only-Oanh in general the task looks clear.

The only question is there UI for choosing month and year?

[eriantoongko]

@maxceem @Oanh-and-only-Oanh I will ask the winner to provide the UI and keep you guys updated.

[eriantoongko]

@maxceem @Oanh-and-only-Oanh month and year interaction added to the previous link.

[maxceem]

Thanks, @eriantoongko.

Is it desired to implement a custom scrollbar for a month and year dropdowns, or we can use standard browser scrollbars? (I would recommend going with the standard ones).

[Oanh-and-only-Oanh]

@eriantoongko, would it be possible to see what a standard browser scrollbar look like

[eriantoongko]

@Oanh-and-only-Oanh actually what the designer using right now is a mac version scroll bar. I attach my chrome scroll bar.

[eriantoongko]

@maxceem I think that is fine. We should use the native scrollbar provided by the OS.

[Oanh-and-only-Oanh]

@eriantoongko, I don't think it's clear in the design that it's 2 separate calendars for choosing 2 dates (start and end). When user opens calendar for start date, only the exact date should be highlighted. Is it not a range like shown below.

I also think it could still be clearer to the user that the calendar is for the "start" date field.

[maxceem]

Ah, yes, I did think that this calendar is for choosing a range because it is highlighting a range and it also suggests choosing several predefined ranges on the left:

Another note from a non-USA citizen. I can see that the date format has been changed from Nov 12 2000 to 11/12/2000 so it can be entered from the keyboard. Just would like to note, that outside USA the date has another format: DD/MM/YYYY instead of MM/DD/YYYY. So non-USA citizens cannot be sure what date is shown as 11/12/2000 as it looks ambiguous.

[maxceem]

@Oanh-and-only-Oanh just would like to confirm, that we also require that all the functionality should be accessible from the keyword:

• Calendar should be accessible using the keyword. We should be able to choose any date using keys <Tab>/<Shift>+<Tab>/<Enter> as it's implemented in the current calendar.

• We should also be able to enter dates from the keyword directly to the inputs using the input mask.

  

  It should automatically move the cursor during input, allow us to put the cursor in any place and allow using keyboard arrows to navigate between digits, something like in this demo.

[Oanh-and-only-Oanh]

@maxceem that's correct. All functionality should be accessible from keyboard. @eriantoongko, can we update the style to fit the 2018 look and feel - more on the blue colors than green. Thank you.

[eriantoongko]

Updated style back to blue: https://marvelapp.com/prototype/f70187e/

Custom date range: https://marvelapp.com/prototype/f70187e/screen/73620859, https://marvelapp.com/prototype/f70187e/screen/73620860

[maxceem]

@Oanh-and-only-Oanh let me confirm the workflow:

1. When the user selects the first date, there are 3 ways to go:

   1. Let the user select the second date immediately after selecting the first date (as it's done now).
   2. Keep the calendar open so the user can select another first date.
   3. Close calendar immediately after selecting the first date.

   

2. To make the calendar accessible from the keyboard we have to highlight a selected element when the user uses the keyboard, see demo:

   

   We can use the same blue square as we do now, or would you like to highlight it another way in the new UI?

3. To confirm. Previously, we show a calendar widget when we click at any place in the input field:

   

   As now we can enter the date from the keyboard, to open the calendar we have to click on the calendar icon only:

   

[Oanh-and-only-Oanh]

@maxceem,

1. When the user selects the first date, let the user select the second date immediately after selecting the first date (as it's done now).

2.The same blue square is fine. I just want to ensure it is keyword accessible.

3. Correct. user can enter the exact date or use the calendar feature by clicking on the calendar icon.

[Oanh-and-only-Oanh]

Challenge link: https://www.topcoder.com/challenges/a4cf3c44-1944-4e90-aa37-e969e5ab6038

[maxceem]

One more challenge is done to update the challenge filter UI in general https://www.topcoder.com/challenges/4d9f86b5-f492-4b31-bad0-521098798037?tab=details

There are 2 PRs:

• Community App https://github.com/topcoder-platform/community-app/pull/5247
• Topcoder React Lib https://github.com/topcoder-platform/topcoder-react-lib/pull/287

Submission is almost perfect, there are only a few minor issues:

• Avoid overflow in “specification review” https://gyazo.com/0577dd6ad940c3af5386f42249c3371b and https://monosnap.com/file/gmAv2m0T9Y91GE9x8Nv9caoZ3wi0EX
• Click on "Clear filters" should clear the search box name as well.
• Search field disappears on the smaller screens https://monosnap.com/file/5SI9gi1zGGckSasf1WojLvfRCWwDSD

We would fix these issues after QA together with other issues found during QA.

[luizrrodrigues]

@SathyaJayabal deployed to Stag env

[SathyaJayabal]

@maxceem

1. Once user accesses My Past Challenges, and then accesses any other bucket, or applies any other filter, the challenge list is not updated. My Past Challenges.mov.zip

2. On clear filter,

• the date range selection must also be cleared.

• the custom date range fields must not be displayed. Clear filter date.mov.zip

3. @Oanh-and-only-Oanh, for the Open for review bucket, the sub communities filter do not apply (even in prod). Can we hide that filter ?

4. My Past Challenges: There is no "View More Challenges" link nor auto loading of more challenges on scrolling.

5. My Past challenges : The same 10 challenges are repeated. (see user: customeruser/appirio123)

5. Past Challenges: If the number of results is less than 10, the View more challenges must not be displayed.

[Oanh-and-only-Oanh]

@SathyaJayabal, 3) For the Open for review bucket, the sub communities filter do not apply (even in prod). Yes, we can hide that filter.

Please test thoroughly on the performance of this. We do not want listings performance to be negatively impacted.

[maxceem]

Here are also 3 more issues:

6) Avoid overflow in “specification review” https://gyazo.com/0577dd6ad940c3af5386f42249c3371b and https://monosnap.com/file/gmAv2m0T9Y91GE9x8Nv9caoZ3wi0EX

7) Click on "Clear filters" should clear the search box name as well.

8) Search field disappears on the smaller screens https://monosnap.com/file/5SI9gi1zGGckSasf1WojLvfRCWwDSD. But it should be visible for non-mobile screens.

[maxceem]

@Oanh-and-only-Oanh @luizrrodrigues I've asked the winner of the challenge to make these final fixes.

[sandhiyakavi]

@maxceem

1. Keyword filter is missing and no challenge is displayed if a technology is clicked in Challenge listings/challenge details page.

2. Can we increase the space between challenge type filter and challenge type checkboxes ?

   

3. If a past challenge is clicked and from challenge details page if we click back button or technology/challenge type tag,The open for registration challenges are listed under Past challenges tab in challenge listings page.

   

   from past_challenge_details_page.zip

[SathyaJayabal]

@Oanh-and-only-Oanh , the keywords filter option is missing in the design. Is this intentional? https://marvelapp.com/prototype/96cb17f/screen/74488185

[maxceem]

1. Keyword filter is missing and no challenge is displayed if a technology is clicked in Challenge listings/challenge details page.

We didn't have it per design. @Oanh-and-only-Oanh Could you, please, clarify if we have to add it or no.

2. Can we increase the space between challenge type filter and challenge type checkboxes ?

Sure, will do.

3 If a past challenge is clicked and from challenge details page if we click back button or technology/challenge type tag,The open for registration challenges are listed under Past challenges tab in challenge listings page.

The thing is, that "back" button and "technology/challenge type tag" on the Challenge Details page lead to the open for registration challenges, not to the previous filter. So it show open for registration challenges correctly. But we have to fix and show "Acitve" tab not, "Past Challenges" tab.

[sandhiyakavi]

@maxceem Also If we minimize the screen, The track filter and close button is hiding behind the submenus of header, but displaying after scroll down.

Track_filter_hided.zip

[maxceem]

Also If we minimize the screen, The track filter and close button is hiding behind the submenus of header, but displaying after scroll down.

Yeah, I can reproduce it. This is an existent issue

Would also ask to fix this it as a part of the final fixes.

[maxceem]

@luizrrodrigues could you, please, help me to merge PR for the Topcoder React Lib https://github.com/topcoder-platform/topcoder-react-lib/pull/289 as a part of the final fixes.

[luizrrodrigues]

@maxceem Sure, I'll merge and create test release now.

[maxceem]

Thanks, @luizrrodrigues. Should I just redeploy stagging Community App, or should I update the version for topcoder-react-lib to another number first? https://github.com/topcoder-platform/community-app/blob/feature/filter-update/package.json#L146

[luizrrodrigues]

@maxceem I'll create new version, merge community-app and update the version.

I'll let you know when deployed.

[luizrrodrigues]

@maxceem Deployed to Stag.

[maxceem]

Note, final fixes are now done for items 1-8.

New items 1-3 https://github.com/topcoder-platform/community-app/issues/5068#issuecomment-741596441 and https://github.com/topcoder-platform/community-app/issues/5068#issuecomment-741600474 are not yet fixed.

[Oanh-and-only-Oanh]

@Oanh-and-only-Oanh , the keywords filter option is missing in the design. Is this intentional? https://marvelapp.com/prototype/96cb17f/screen/74488185

@maxceem and @SathyaJayabal, this is intentional. we've condensed the functionality of the search bar so it can be used to search keyword, tags, and title. This was an enhancement of search feature made by @rootelement

[SathyaJayabal]

@Oanh-and-only-Oanh , the keywords filter option is missing in the design. Is this intentional? https://marvelapp.com/prototype/96cb17f/screen/74488185

@maxceem and @SathyaJayabal, this is intentional. we've condensed the functionality of the search bar so it can be used to search keyword, tags, and title. This was an enhancement of search feature made by @rootelement

@maxceem , in this case, when a user clicks on any of the challenge tags, the url should be (example user clicks on tag swagger) https://staging-community-app.topcoder.com/challenges?search=swagger&tracks[DS]=true&tracks[Des]=true&tracks[Dev]=true&tracks[QA]=true&types[]=CH&types[]=F2F&types[]=TSK Instead of tags[]=Swagger.

[maxceem]

in this case, when a user clicks on any of the challenge tags, the url should be (example user clicks on tag swagger) https://staging-community-app.topcoder.com/challenges?search=swagger&tracks[DS]=true&tracks[Des]=true&tracks[Dev]=true&tracks[QA]=true&types[]=CH&types[]=F2F&types[]=TSK Instead of tags[]=Swagger.

Great catch @SathyaJayabal.

We should apply tag in URL as search=<tag> instead of tags[]=<tag>. When we are clicking any tag on the challenge details page:

or in the challenge listing page:

This is because since recent changes, searching by tag should be done using a search field:

[SathyaJayabal]

Note, final fixes are now done for items 1-8.

@maxceem , I dont see #3 in the final fixes We still have sub communities filter for Open for review bucket

[maxceem]

Thanks, @SathyaJayabal. Will ensure it's fixed with other issues that are left.

[luizrrodrigues]

@maxceem I'll use Stag env to deploy a new feature, please let me know when ready to redeploy this one.

[SathyaJayabal]

@maxceem I'll use Stag env to deploy a new feature, please let me know when ready to redeploy this one.

@luizrrodrigues , not completed qa yet on this deployment. But we will complete it along with the rest of the fixes.

[maxceem]

@SathyaJayabal @luizrrodrigues

All fixes are done now and pushed to the feature/filter-update branch:

• 2 and 3 in https://github.com/topcoder-platform/community-app/issues/5068#issuecomment-741596441
• https://github.com/topcoder-platform/community-app/issues/5068#issuecomment-741600474
• https://github.com/topcoder-platform/community-app/issues/5068#issuecomment-741904592

[SathyaJayabal]

@maxceem , everything is good except for the "Specification Review" text overlap

[maxceem]

@SathyaJayabal fixed and pushed to feature/filter-update branch:

[SathyaJayabal]

Thanks @maxceem

[SathyaJayabal]

verified on prod