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

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?

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

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!

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

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

Screen Shot 2017-12-06 at 15.28.41.png (476×679 px, 134 KB)

  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.
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 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