Allow filtering by role on Team page

[JordanMussi]

[JordanMussi]

Live example on my fork: https://jordanmussi.github.io/mybb.com/about/team/

[euantorano]

I think the selected filter could do with some more distinction - perhaps apply a background using the border colour to the button? At the moment, I can barely tell that it's selected on my external monitor.

[JordanMussi]

@euantorano I didn't want to confuse with the team leader styling which has the team's colour as a solid background.

I've put some concepts in my fork:

• https://jordanmussi.github.io/mybb.com/about/team-background/ - selected role badge has background color (with a bit of transparency)
• https://jordanmussi.github.io/mybb.com/about/team-border/ - a border below the role badges before the members with the team's color (with a bit of transparency)
• https://jordanmussi.github.io/mybb.com/about/team-label/ - display the selected role next to the main heading
• https://jordanmussi.github.io/mybb.com/about/team-underline/ - a border below the active role

[JordanMussi]

Would be good to get some thoughts from @justinsoltesz too 😄

[justinsoltesz]

How about using a 2px border instead of 1px for the active role?

My only other thought is would it be possible to highlight the role description on the side (or possibly hide the other roles)? They currently only get highlighted if you click on one of someone's roles.

[JordanMussi]

How about using a 2px border instead of 1px for the active role?

Wouldn't that create a shift of the role buttons when changing?

Edit: I suppose if using two spans the outside could have a transparent border of 1px and then change colour to then give appearance of 2px?

My only other thought is would it be possible to highlight the role description on the side (or possibly hide the other roles)? They currently only get highlighted if you click on one of someone's roles.

That's quite far down the page and on mobile would definitely be out of view.

[justinsoltesz]

How about using a 2px border instead of 1px for the active role?

Wouldn't that create a shift of the role buttons when changing?

Edit: I suppose if using two spans the outside could have a transparent border of 1px and then change colour to then give appearance of 2px?

You can adjust the margin as well (margin: 5px 1px to override the margin: 6px 2px) to account for that.

My only other thought is would it be possible to highlight the role description on the side (or possibly hide the other roles)? They currently only get highlighted if you click on one of someone's roles.

That's quite far down the page and on mobile would definitely be out of view.

If you hide the other roles, the active role would be in view on desktop. Just a thought.

[dvz]

How about using a 2px border instead of 1px for the active role?

It may be too hard to notice.

How about displaying the member count (if not 0) in the legend that points to the filter (instead of repeating roles above the list)?

Language can be corrected for consistency (#role-* points to definition, maybe #role-members-* for the list?).

As noted earlier, a JS solution would likely be more clear, and the CSS would be static so we could move it to CSS files.

[JordanMussi]

How about displaying the member count (if not 0) in the legend that points to the filter (instead of repeating roles above the list)?

Was aiming for a more discoverable and "tabbed" feel but a link to show members from the roles legend would be fine too.

Language can be corrected for consistency (#role-* points to definition, maybe #role-members-* for the list?).

Happy to make that change - intention was eg "team members with role development" not "development team members"

As noted earlier, a JS solution would likely be more clear, and the CSS would be static so we could move it to CSS files.

Will possibly be better but was trying to avoid JS.

[JordanMussi]

How about displaying the member count (if not 0) in the legend that points to the filter (instead of repeating roles above the list)?

This actually doesn't feel as good on mobile as the controls are far from where the changes are happening.

https://jordanmussi.github.io/mybb.com/about/team-legend/

[dvz]

Doesn't the auto-scroll help? Should role members be browseable like tabs when they can appear in multiple places?

[euantorano]

In my opinion https://jordanmussi.github.io/mybb.com/about/team-background/#team-members-editorial is th most obvious as to which is selected.

[JordanMussi]

Doesn't the auto-scroll help? Should role members be browseable like tabs when they can appear in multiple places?

To switch between teams you have to scroll to the legend each time which feels clunky.