Last modified: 2014-02-12 23:53:19 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T38076, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 36076 - Inline Styles: Template:Track_listing is unreadable on mobile view
Inline Styles: Template:Track_listing is unreadable on mobile view
Status: RESOLVED FIXED
Product: MobileFrontend
Classification: Unclassified
stable (Other open bugs)
unspecified
All All
: Low normal
: ---
Assigned To: Nobody - You can work on this!
:
: 36740 (view as bug list)
Depends on:
Blocks: inline-styles
  Show dependency treegraph
 
Reported: 2012-04-18 19:48 UTC by Tomasz Finc
Modified: 2014-02-12 23:53 UTC (History)
12 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments
Truncated track listing (20.94 KB, image/png)
2012-04-18 19:48 UTC, Tomasz Finc
Details

Description Tomasz Finc 2012-04-18 19:48:03 UTC
Created attachment 10434 [details]
Truncated track listing

1) Load http://en.m.wikipedia.org/wiki/Celebrity_Ski 
2) Expand track listing

The track listing table is horribly mangled for mobile web. It's even worse in the app https://twitter.com/#!/felibb/status/192694935043047425. Lets fix the mobile web versin first and if that doesn't fix the app we'll open a second bug.
Comment 1 Tomasz Finc 2012-04-18 19:48:55 UTC
#1 should have been http://en.m.wikipedia.org/wiki/Celebrity_Skin
Comment 2 Chad H. 2012-04-18 19:49:37 UTC
Is this browser-dependent? It looks fine for me.
Comment 3 Jon 2012-04-18 19:59:53 UTC
You can see this in Chrome if you shrink your browser window. This is another example of inline styles playing havoc - see bug 35704

This one in particular is caused by the following inline style on div class='tracklist'
margin: -1px 21em 0 0; padding:4px and is very specific to this page

The problem lies here:
http://en.wikipedia.org/wiki/Template:Track_listing
Comment 4 Chad H. 2012-04-18 20:01:38 UTC
(In reply to comment #3)
> You can see this in Chrome if you shrink your browser window. This is another
> example of inline styles playing havoc - see bug 35704
> 

Ah ok, I see it now.
Comment 5 Jon 2012-05-03 11:21:15 UTC
A solution on the talk page was suggested from Happy Melon: http://en.wikipedia.org/wiki/Template_talk:Track_listing#Width_issue_on_mobile_browsers

"All we need to do is use the box-flow model developed for the mbox templates: remove the wrapping <div> and the 100% width from the table, and add mbox-text class to the table header. "

Can someone with rights to edit the template fix that?
(or find someone else who can)
Comment 6 Jon 2012-05-11 14:30:38 UTC
*** Bug 36740 has been marked as a duplicate of this bug. ***
Comment 7 Patrick Reilly 2012-05-11 19:06:13 UTC
(In reply to comment #6)
> *** Bug 36740 has been marked as a duplicate of this bug. ***

This didn't seem to fix the issue.
See http://en.wikipedia.org/w/index.php?title=Template:Track_listing&diff=prev&oldid=491919718
Comment 8 Jon 2012-05-11 19:59:25 UTC
The margin needs to be thrown away as well or if kept changed to a %
e.g.
margin: -1px 10% 0 0; padding:4px
Comment 9 Jon 2012-05-15 10:47:03 UTC
Margin has been thrown away from template so closing:

http://en.wikipedia.org/w/index.php?title=Template%3ATrack_listing&diff=492073736&oldid=491920196

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links