RE: All The Tropes Wiki Project, Part XX
07-23-2021, 12:39 AM (This post was last modified: 07-23-2021, 02:45 AM by GethN7.)
07-23-2021, 12:39 AM (This post was last modified: 07-23-2021, 02:45 AM by GethN7.)
Okay, before I do anything on the actual wiki, here is the new home and community pages optimized for both desktop and mobile view, so people on their computer and on their phone and tablets will see nothing too broken when they look at pages using any tabs
They were recreated using the Tabs extension with MobileTagsPlugin for the mobile view pages and TabberNeue, the fork of Tabber with support for mobile view, as default Tabber does not have mobile support and is entirely broken.
The mockups I'm linking are not perfect, but these should at least have minimal issues switching between desktop and mobile skins, compared to the original versions, which were working on desktop but completely broken on mobile:
https://allthetropes.org/wiki/File:Deskt...e_Page.jpg
I had to change a few section headers to plain wikitext and use a few hardline templates to keep things separated in mobile view while still looking good in desktop view.
https://allthetropes.org/wiki/File:Mobil...e_Page.jpg
In mobile view, the tabs are changed to an accordion-style dropdown that expands to let you read each section without spilling over other text or the dividers.
https://allthetropes.org/wiki/File:Deskt...Portal.jpg
Here I used TabberNeue for the parts using Tabber, which looks only slightly different from the classic Tabber look in desktop. Note the dropdown menu in desktop view for the page list of red links, this will not be visible until moused over and can be condensed if need be. This functionality already exists for the use of Tabs for those not aware.
https://allthetropes.org/wiki/File:Mobil...Portal.jpg
Here is the important part. All the TabberNeue tabs, you'll notice have a scroll bar for what goes off screen and will scroll over to what is off screen and back so mobile viewers can see all Tabber sections on mobile phones and tablets.
There were some minor issues with Tabs on the mobile view Community Portal (I'm on localhost, so this may not be the case on the actual wiki, but aside from some minor issues, it looks fine in mobile except for the fact the list does not condense for the list using Tabs up top), but it no longer shows raw extension code breakage like it did before.
It's not perfect, but compared to the horror show of broken Tabs/Tabber markup we had before, this looks a lot better for mobile users.
TabberNeue will replace Tabber, but they use the same syntax, so it will be an easy drop-in replacement. Tabs augmented with MobileTagsPlugin allows the Tabs extension to work better on mobile and at the very least prevents them from breaking to the point of splaying ugly extension code everywhere at worst.
I look forward to any comments before I make any changes, as I also plan to write up a new policy page for best practices so all pages can look good on mobile and desktop platforms going forward.
Note: TabberNeue may require about 24 hours even after a cache purge for the Miraheze servers to catch up, but given it will primarily affect the Community Portal and then only in the short term, this is the only possible downside of the switchover from Tabber to TabberNeue.
They were recreated using the Tabs extension with MobileTagsPlugin for the mobile view pages and TabberNeue, the fork of Tabber with support for mobile view, as default Tabber does not have mobile support and is entirely broken.
The mockups I'm linking are not perfect, but these should at least have minimal issues switching between desktop and mobile skins, compared to the original versions, which were working on desktop but completely broken on mobile:
https://allthetropes.org/wiki/File:Deskt...e_Page.jpg
I had to change a few section headers to plain wikitext and use a few hardline templates to keep things separated in mobile view while still looking good in desktop view.
https://allthetropes.org/wiki/File:Mobil...e_Page.jpg
In mobile view, the tabs are changed to an accordion-style dropdown that expands to let you read each section without spilling over other text or the dividers.
https://allthetropes.org/wiki/File:Deskt...Portal.jpg
Here I used TabberNeue for the parts using Tabber, which looks only slightly different from the classic Tabber look in desktop. Note the dropdown menu in desktop view for the page list of red links, this will not be visible until moused over and can be condensed if need be. This functionality already exists for the use of Tabs for those not aware.
https://allthetropes.org/wiki/File:Mobil...Portal.jpg
Here is the important part. All the TabberNeue tabs, you'll notice have a scroll bar for what goes off screen and will scroll over to what is off screen and back so mobile viewers can see all Tabber sections on mobile phones and tablets.
There were some minor issues with Tabs on the mobile view Community Portal (I'm on localhost, so this may not be the case on the actual wiki, but aside from some minor issues, it looks fine in mobile except for the fact the list does not condense for the list using Tabs up top), but it no longer shows raw extension code breakage like it did before.
It's not perfect, but compared to the horror show of broken Tabs/Tabber markup we had before, this looks a lot better for mobile users.
TabberNeue will replace Tabber, but they use the same syntax, so it will be an easy drop-in replacement. Tabs augmented with MobileTagsPlugin allows the Tabs extension to work better on mobile and at the very least prevents them from breaking to the point of splaying ugly extension code everywhere at worst.
I look forward to any comments before I make any changes, as I also plan to write up a new policy page for best practices so all pages can look good on mobile and desktop platforms going forward.
Note: TabberNeue may require about 24 hours even after a cache purge for the Miraheze servers to catch up, but given it will primarily affect the Community Portal and then only in the short term, this is the only possible downside of the switchover from Tabber to TabberNeue.