update filtering UI on challenge listing

Oanh-and-only-Oanh commented 4 years ago

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 commented 4 years ago

Design f2f copiloted by eriantoongko

eriantoongko commented 4 years ago

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 commented 4 years ago

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

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

eriantoongko commented 4 years ago

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

eriantoongko commented 4 years ago

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

maxceem commented 4 years ago

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 commented 4 years ago

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

eriantoongko commented 4 years ago

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

eriantoongko commented 4 years ago

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

Oanh-and-only-Oanh commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

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.
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?
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 commented 4 years ago

@maxceem,

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.

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

Oanh-and-only-Oanh commented 4 years ago

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

maxceem commented 3 years ago

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 commented 3 years ago

@SathyaJayabal deployed to Stag env

SathyaJayabal commented 3 years ago

@maxceem

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
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

@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 ?
My Past Challenges: There is no "View More Challenges" link nor auto loading of more challenges on scrolling.
My Past challenges : The same 10 challenges are repeated. (see user: customeruser/appirio123)

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

Oanh-and-only-Oanh commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

sandhiyakavi commented 3 years ago

@maxceem

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

Can we increase the space between challenge type filter and challenge type checkboxes ?
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 commented 3 years ago

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

maxceem commented 3 years ago

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.

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

maxceem commented 3 years ago

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 commented 3 years ago

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

I'll let you know when deployed.

luizrrodrigues commented 3 years ago

@maxceem Deployed to Stag.

maxceem commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

luizrrodrigues commented 3 years ago

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

SathyaJayabal commented 3 years ago

@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 commented 3 years ago

@SathyaJayabal @luizrrodrigues

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

SathyaJayabal commented 3 years ago

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

maxceem commented 3 years ago

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

SathyaJayabal commented 3 years ago

Thanks @maxceem

SathyaJayabal commented 3 years ago

verified on prod

topcoder-platform / community-app

update filtering UI on challenge listing #5068