FS#46697 - {wiki} Mobile friendly/responsive theme for the wiki (and possibly other sites)
Attached to Project:
Arch Linux
Opened by Bastien Traverse (Neitsab) - Tuesday, 13 October 2015, 16:49 GMT
Last edited by Eli Schwartz (eschwartz) - Friday, 15 September 2017, 13:53 GMT
Opened by Bastien Traverse (Neitsab) - Tuesday, 13 October 2015, 16:49 GMT
Last edited by Eli Schwartz (eschwartz) - Friday, 15 September 2017, 13:53 GMT
|
Details
I'd like to suggest an update to Arch wiki's skin so as to
make it more mobile friendly/responsive.
Argumentation outline: - The current skin is really ill-adapted to mobile navigation, as we need to zoom in to view text, move focus around to read paragraphs etc. - Mobile browsers' article/reading mode and dedicated app like [1] are helpful, but are dependent on client configuration and require an additional step, breaking firsthand experience; a unified look and feel would benefit the experience across devices and consolidate the high level of satisfaction the wiki currently enjoys. - Inspiration can be taken from Gentoo's official wiki and site [2] which uses their own Bootstrap-based theme and Mediawiki skin called Tyrian [3], published under GPLv2 [4] and which provides them with a unified and modern look and feel across all devices. I believe such a move would be highly beneficial for the Arch community, helping one of its most highly praised achievement come up to speed with the current state of web browsing and the increasingly mobile landscape. Be it a quick glance on one's phone or tablet while troubleshooting a desktop/laptop or more thorough reading and editing while on the go, a more responsive design may only improve things for users of the Arch web sites. [1]: https://bbs.archlinux.org/viewtopic.php?id=150538 [2]: https://wiki.gentoo.org/ [3]: https://wiki.gentoo.org/wiki/Gentoo_Wiki:About#Setup [4]: https://gitweb.gentoo.org/proj/gentoo-wiki-tyrian.git/tree/COPYING Additional info: Forum thread where the initial suggestion was made: https://bbs.archlinux.org/viewtopic.php?pid=1569997, garnering forum moderator fukawi2's support. Steps to reproduce: - browse to the Arch wiki from a mobile device and be faced with the necessity to zoom in to read the articles; - browse to the official page from a phone to read the latest news before upgrading the system, and struggle to read it. |
This task depends upon
Closed by Eli Schwartz (eschwartz)
Friday, 15 September 2017, 13:53 GMT
Reason for closing: Fixed
Additional comments about closing: https://bbs.archlinux.org/viewtopic.php? id=229523 should be a fairly comprehensive fix
Friday, 15 September 2017, 13:53 GMT
Reason for closing: Fixed
Additional comments about closing: https://bbs.archlinux.org/viewtopic.php? id=229523 should be a fairly comprehensive fix
FS#46699with request for enabling user-stylesheets, which would make it much easier for users to contribute.[1] https://wiki.archlinux.org/index.php/User:Lahwaacz/LocalArchWiki
P.S.: If anybody has the rights to do so, please prepend "{wiki}" to the task title to make the categorization of wiki bugs more clear.
https://bugs.archlinux.org/index.php?string={wiki}&project=1
[1] https://wiki.archlinuxjp.org/
[2] https://gitweb.gentoo.org/proj/gentoo-wiki-tyrian.git/tree/Tyrian.php
FS#46699...[1] https://www.mediawiki.org/wiki/Extension:MobileFrontend
Here is my pull request to be included in the archwiki project. Patches are
also attached, in case somebody doesn't want to visit another site.
The following changes since commit 8a8f184693946343aee7194f6a2ccd5580a35bf3:
Add menu entry to security.archlinux.org (2017-02-18 21:34:23 +0100)
are available in the git repository at:
https://bitbucket.org/alive4ever/wiki.archlinux.org/branch/mobile-friendly
for you to fetch changes up to 151c1c6a1d06cc07a4feff87be38af9471d6f51b:
skins/Archlinux: make use of mobile.css (2017-03-19 02:05:11 +0700)
----------------------------------------------------------------
Alif (2):
skins/ArchLinux: import mobile.css
skins/Archlinux: make use of mobile.css
skins/ArchLinux/SkinArchLinux.php | 2 +
skins/ArchLinux/arch.css | 8 +++
skins/ArchLinux/mobile.css | 127 ++++++++++++++++++++++++++++++++++++++
3 files changed, 137 insertions(+)
create mode 100644 skins/ArchLinux/mobile.css
Less modification means less breakage when something is updated.
https://wiki.archlinux.de/title/MediaWiki:Mobile.css
Without customization, expect plain Wikipedia look n style on mobile devices.
It's been quite reliable performance-wise in my very quick testing. However, the change to a default/non-Arch theme is very destabilizing. I'm afraid user reports will start pouring soon (if it hasn't already, I haven't checked the mailing list). I'd highly recommend changing the colors to match the regular/desktop theme, which will preserve the visual context and provide some familiarity.
adding meta viewport and style sheet rule to load mobile.css on devices less than 790px width.
The changes are available under 'mobile-friendly' branch on my repository[2].
Patches are attached, which can be applied using 'git am $PATCHFILES'
[1] https://github.com/ArchLinuxJP/archbbs-jp
[2] https://bitbucket.org/alive4ever/bbs.archlinux.org