Page MenuHomePhabricator

Babel CSS styles missing on mobile version
Closed, ResolvedPublic

Description

When visiting https://meta.m.wikimedia.org/w/index.php?title=User:Thiemo_M%C3%A4ttig_(WMDE)&mobileaction=toggle_view_mobile or https://en.m.wikipedia.org/w/index.php?title=User:Iniquity/sandbox&mobileaction=toggle_view_mobile the box appears unstyled.

It is ResourceLoader problem: mobile version switch off by default.

We should limit the floating and fixed width styles to deviceWidthTablet and make font size relative to containing element and enable them.

Event Timeline

Iniquity created this task.Oct 22 2017, 7:19 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 22 2017, 7:19 PM
Jdlrobson moved this task from Needs triage to Triaged on the Mobile board.Oct 24 2017, 1:02 PM

Please can we take the time to make this task more readable to others?
What is the URL of the page you do not need the styles on? How does it look (can you post a screenshot)? How does not loading the css break the page?

Jdlrobson updated the task description. (Show Details)Oct 24 2017, 5:41 PM
Iniquity added a comment.EditedOct 24 2017, 7:12 PM

Thanks for update!:) But I think we need to stick to the style (floating) of other wikimedia's userboxes.

Iniquity updated the task description. (Show Details)Oct 25 2017, 5:41 PM

Sure but let's not enable something broke. The whole point of the targets system is to revise styles for mobile before enabling them. Luckily this one looks trivial as it just involves restricting certain styles inside media queries! Yay!

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptOct 27 2017, 1:14 PM

Fix widht and floating :)

Framawiki moved this task from Backlog to Doing on the good first bug board.Dec 2 2017, 1:28 PM

Change 395669 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/Babel@master] Enable Babel on mobile

https://gerrit.wikimedia.org/r/395669

Iniquity added a comment.EditedDec 6 2017, 12:26 PM

@Jdlrobson Hello, about @deviceWidthTablet. I do not think that this is good way to support it in Babelbox:

  1. If we use 720 breakpoint our boxes will be really long,
  2. If we use this breakpoint only for min-device-width than we will have the same problem with landscape orientation: boxes will be really long.
Iniquity triaged this task as High priority.Dec 13 2017, 12:20 PM
Krinkle renamed this task from CSS styles does not work in mobile version to Babel CSS styles missing on mobile version .May 30 2018, 7:53 PM

Change 395669 abandoned by Jdlrobson:
Enable Babel on mobile

https://gerrit.wikimedia.org/r/395669

Iniquity raised the priority of this task from High to Needs Triage.Jun 1 2018, 7:48 AM

@Iniquity I left some feedback on https://gerrit.wikimedia.org/r/#/c/385852/
I think the proposed patch is a big improvement and I'd like to see us iterate off of it rather than leave things in the broken state. A rebase and correcting the version number would be enough for me to merge it.

Change 385852 merged by Jdlrobson:
[mediawiki/extensions/Babel@master] Adaptive design for babel-box and turning on CSS for mobile version

https://gerrit.wikimedia.org/r/385852

Jdlrobson closed this task as Resolved.Jun 14 2018, 7:24 PM
Jdlrobson claimed this task.

As a next step we'll probably want to get the media queries working on desktop resolutions, ideally through rewriting babel as a non-table based layout.

Change 442824 had a related patch set uploaded (by Iniquity; owner: Iniquity):
[mediawiki/extensions/Babel@master] Fix for Minerva margin of tables

https://gerrit.wikimedia.org/r/442824

@Jdlrobson can you review this patch please? :)

@Jdlrobson I have changed something because of !important ban, can you look it again?

Change 442824 merged by jenkins-bot:
[mediawiki/extensions/Babel@master] Fix for Minerva margin of tables, update forgotten version number

https://gerrit.wikimedia.org/r/442824