#1774: Fedora Wiki's stylesheet is screwey on small screen high DPI devices
---------------------+------------------------------------------------------
Reporter: ynemoy | Owner: webmaster
Type: bug | Status: new
Priority: major | Milestone:
Component: General | Version:
Severity: Normal | Keywords:
---------------------+------------------------------------------------------
= phenomenon =
Multiple issues here: Tables go beyond the page but the page isn't told
about being wider than the screen, so horizontal scrolling is not
possible. Embedded pictures and headers aren't formatted properly so text
can flow around it, even in extreme situations. The sidebar takes up too
much space at high DPIs leaving only half the page for the body.
In the above order:
http://ynemoy.fedorapeople.org/wikixofail/IMAG0016.jpg
http://ynemoy.fedorapeople.org/wikixofail/IMAG0018.jpg
http://ynemoy.fedorapeople.org/wikixofail/IMAG0013.jpg
http://ynemoy.fedorapeople.org/wikixofail/IMAG0014.jpg
http://ynemoy.fedorapeople.org/wikixofail/IMAG0015.jpg
Resizing the text and page zoom fixes some problems, but my opinion is
that this is non obvious to many people.
http://ynemoy.fedorapeople.org/wikixofail/IMAG0017.jpg
= reason =
I'm not much of a CSS guy, but i have a few ideas. First of all, the
sidebar is strictly set to a hard size in relation to the rest of the
page. Second of all, horizontal scrolling is (and rightly so) disabled at
all costs. Third of all, something is not set properly when formatting
embedded inline pictures, so that the sidebar can wrap around it, or so
that it's left justified instead of right justified so it runs off the
page rather than running into the sidebar.
= recommendation =
Wikipedia has a pretty decent mobile interface that works very nicely on
the Android devices, and presumably on others as well. It avoids using a
sidebar and TOC by replacing it with expandable fields. I think that at
least having that stylesheet available would be a start. The tricky part
is detecting the actual dimensions *and* DPI of a screen and switching to
the appropriate stylesheet. In this particular example, the screenshots
were taken on an XO using mostly stock settings and Firefox.
Another and more costly and time consuming solution is to redesign the
page more comprehensively so that it is a general purpose page for both
mobile, small screen, and normal devices.
--
Ticket URL: <https://fedorahosted.org/fedora-infrastructure/ticket/1774>
Fedora Infrastructure <http://fedoraproject.org/wiki/Infrastructure>
Fedora Infrastructure Project for Bugs, feature requests and access to our source code.
--
Fedora-websites-list mailing list
Fedora-websites-list@xxxxxxxxxx
https://www.redhat.com/mailman/listinfo/fedora-websites-list
