Make filters box collapsible in React competitions overview

[gregorbg]

[kr-matthews]

1. The "Hide Filters" and "Reset Filters" text (with icons) look like 2 tabs that you can switch between. I don't really have a better suggestion off the top of my head though.
2. My cursor doesn't change to pointer when hovering over "Hide Filters" (which contributes to making it feel like one of 2 tabs).
3. I don't think the reset option needs to be visible when filters are hidden. It could go inside the filters box. Which would help address the first point.
4. The animation is a little weird because the filter box itself is animating the size change, but the content below is not animating when filling the space, it's just jumping up/down after/before the filter box animation.

[gregorbg]

Thank you for the feedback, I've tried to address all of your concerns!
The only thing that I cannot change is (4), because that's how SemUI internally handles its animations.

Desktop

Tablet

Mobile

[dunkOnIT]

Changes

• Move "Show cancelled competitions" into the filters box
• Reduce the size of "Show filters" button so that it is on the same line as the "Competitions" header on 320x480 resolution (see Fig 1)
• Always show the registration icon in the new UI, and remove "Show registration status icon" option
• Change "Competitons in progress" to "In Progress", and ensure that the number of competitions in progress appears on the same line on 320x480 resolution
• Change "Upcoming competitions" to "Upcoming", and ensure that the number of competitions appears on the same line as it in 320x480 res (Fig 3)

Nits

• The header for the different year ("2025") has no padding before/after it, making it look like another row - make it more of a visually distinct separation (Fig 2)
• "When" filters look a bit weird with no padding between them - one button has no distinct separation from the next. Perhaps we could add some padding? (Fig 4)

Fig 1:

Fig 2:

Fig 3:

Fig 4:

[gregorbg]

Changes

• Move "Show cancelled competitions" into the filters box

Won't fix right now, see below

• Reduce the size of "Show filters" button so that it is on the same line as the "Competitions" header on 320x480 resolution (see Fig 1)

This only works to a degree. If you make the screen narrow enough, you can always find a breakpoint where it "doesn't quite fit" anymore, and as pointed out elsewhere 320px is already quite a stretch. Even the iPhone SE has 375px.

• Always show the registration icon in the new UI, and remove "Show registration status icon" option

Out of the scope of this PR, although I will be happy to create a follow-up. When that is done, it will also make much more sense to move the "Show cancelled competitions" into the filter (see above).

• Change "Competitons in progress" to "In Progress", and ensure that the number of competitions in progress appears on the same line on 320x480 resolution
• Change "Upcoming competitions" to "Upcoming", and ensure that the number of competitions appears on the same line as it in 320x480 res (Fig 3)

Won't fix. First off, it reuses the exact same wording as the current legacy page. Second, it really always depends on the translation and how long the term "Upcoming" is until the line wraps and the counter breaks.

I am open for more creative ideas about label placement, though.

Nits

• The header for the different year ("2025") has no padding before/after it, making it look like another row - make it more of a visually distinct separation (Fig 2)

Done ✔️

• "When" filters look a bit weird with no padding between them - one button has no distinct separation from the next. Perhaps we could add some padding? (Fig 4)

Done ✔️ That is, they are more compact now and should need less line breaks. I won't dig much deeper than this, because it pretty much imitates the legacy layout where they are also quite "squeezed-together".

[dunkOnIT]

Re sizing issues: I naively assumed that the default resolution in dev tools' mobile view was representative of the average user's phone size, but that turns out is quite false :D Happy with the spacing at 360px - the most common screen width according to Google

Otherwise happy with the changes, and have opened issues for the out-of-scope ones

If you can resolve the conflicts - I tried, but CompetitionsView is nontrivial - then I'll give it a final spin before approving and deploying to staging for feedback

[gregorbg]

Merge conflicts resolved!