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 Filter update #5247
• Topcoder React Lib filter update topcoder-react-lib#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.

[maxceem]

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

New items 1-3 #5068 (comment) and #5068 (comment) 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 update filtering UI on challenge listing #5068 (comment)
• update filtering UI on challenge listing #5068 (comment)
• update filtering UI on challenge listing #5068 (comment)

[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