niwanetwork / niwa-website

The official website for the Nintendo Independent Wiki Alliance
https://niwanetwork.org
9 stars 15 forks source link

Redesign Members page tabbing system #126

Open dkpat12 opened 1 year ago

dkpat12 commented 1 year ago

Currently the Members page uses a series of tabs for the different language members of NIWA. Unfortuantely the current design of these tabs makes them quite long and doesn't easily allow for future expansion into other languages without breaking the design on desktop.

Additionally though, the current design actually breaks on mobile devices, with the third tab overflowing below the first two. image

A solution for this needs to be implemented.

Lakelimbo commented 1 year ago

I see two possible solutions:

  1. make the tables always horizontal, so they should get overflow-x, kinda like the GH tabs here. Easiest one, but depending on how you look at it, it may be less intuitive for users
  2. transform the tabs into a dropdown when the screen is small. More intuitive (and future-proof I'd say), but it adds some JS that might be seen as unnecessary for such a small part of the UI.
Elaeagnifolia commented 1 year ago

Another approach might be to display all the members on one page and converting the current tabs to be language filters that show/hide the specific language Wikis based on your selection.