New Competition UI Feedback & Changes

[dunkOnIT]

See CF thread here: https://www.facebook.com/groups/cyoubxfriends/posts/9026899190669787/

Further Research

• Search by announcement date may be broken?

General Comments

• The new view significantly reduces the number of comps you can see without scrolling, and this is highly undesirable
  • Too much spacing in table rows
  • The filters take up too much space
• On mobile, competition rows take up too much space, but also their text is too small/flag icons are too small [compare old and new mobile views to see that old mobile view definitely is more compact and readable]
• Infinite scroll doesn't load very many new entries at once - perhaps we want to do some testing around the sweet spot of # competitions returned vs loading times? I think a higher number of competitions returned [50?] is worth considering

Suggested Changes

UI Simplifications

• [x] Remove "search by delegate" entirely, or only have it available in Admin View
• [ ] Remove "show cancelled competitions", or only have it available in Admin View
• [ ] Display the registration icon by default, and remove the toggle [perhaps we want to consider returning the registration status in the API call we're making]

Other

• [x] Reduce padding/wasted space in mobile and desktop views
• [x] Make comp information more readable/larger in mobile view [use old mobile view as a reference]
• [x] Sort years in descending order [so that most recent years are closest to the top]
• [x] BUG: If you've already selected a region, clicking the dropdown arrow to see the list again (but NOT picking anything), resets the region to "All regions" but displays a blank in the region box.

Feature Requests

• [ ] Show events that the comp is hosting in the competition table [perhaps consider using the event toggle that we have in the Registration Admin list?]
• [ ] Consider improved defaults around what competitions are displayed - eg, allow the user to select a region to display comps from and remember that in localstorage
• [ ] Add a true search feature that doesn't just filter loaded competitions, but hits the backend with an API request to return all comps that might match the search criteria

[kr-matthews]

I'll start working on some of these.

[kr-matthews]

• Search by announcement date may be broken?

The legacy search-by-announcement omits competitions which are over, whereas the new one includes all competitions. Besides that, they function the same as far as I can tell when playing around with it.

Is that a problem? Seems fine to me.

[kr-matthews]

We can save some space by putting the "All" and "Clear" buttons in the same row as all the other buttons, and also shrinking the event boxes a bit.

But before doing any of that, why do we have separate event selectors for this vs the rest of the website (e.g. selecting events in registration). I don't want to make changes to this selector, just to have it removed and replaced with the other one. This one is much clearer about which events are selected vs not selected.

[kr-matthews]

• BUG: If you've already selected a region, clicking the dropdown arrow to see the list again (but NOT picking anything), resets the region to "All regions" but displays a blank in the region box.

The dropdown is 'clearable', so when something is selected, there should be an "x" icon to clear it. The component does this via class="dropdown icon clear". For some reason, that's not working, and the dropdown arrow icon is still showing up. Possibly we're missing semantic-ui-css, or need to update semantic-ui-react? I'm stuck here.

But the value showing up as blank after clearing is not the correct behaviour when clearing - it should revert to 'All Regions'. I'll fix that.

[dunkOnIT]

Thanks for picking this up Kevin!

But before doing any of that, why do we have separate event selectors for this vs the rest of the website (e.g. selecting events in registration). I don't want to make changes to this selector, just to have it removed and replaced with the other one. This one is much clearer about which events are selected vs not selected.

Is this selector different to the one in the new registration system? They look the same to me although it is possible they are different for subtle reasons such as slightly different functionality needed in the registration system.

[FinnIckler]

yeah, this uses the same selector. Why is it different than the one in V1? Because that one is written in jquery!