Page MenuHomePhabricator

Improve infobox legibility
Closed, ResolvedPublic

Description

Problem

  1. Infoboxes on mobilefrontend does not have enough padding around tablecells making the text difficult to read.
  2. The table row does not take up the width of the table [BUG]
  3. Infobox does not have a bounding box

Solution

  1. increase padding by few pixels
  2. make width of the row 100% to the infobox.table
  3. add border to infobox

CSS

content table.infobox {
  border:1px solid #EAECF0;
}
.content table.infobox th, .content table.infobox td {
  padding:7px 10px; 
  font-size:13px;
  border-bottom: 1px solid #EAECF0;
  // this is just a color change to match wikimedia color palette 
}

.content table.infobox td {
  width:100%;
}

Event Timeline

Nirzar removed Jdlrobson as the assignee of this task.Apr 13 2017, 4:20 PM
Nirzar created this task.
Nirzar updated the task description. (Show Details)
bmansurov moved this task from To Do to Doing on the Reading-Web-Sprint-95 board.

@Nirzar can you share links/screenshots where I can observe the following from the description?

The table row does not take up the width of the table [BUG]

I've checked the Moon article and didn't see the problem. Here is a screenshot.

Nirzar added a comment.EditedApr 13 2017, 8:41 PM

The Row doesn't span the full width of the table.infobox

Nirzar updated the task description. (Show Details)Apr 13 2017, 8:55 PM
Nirzar updated the task description. (Show Details)
Nirzar updated the task description. (Show Details)Apr 13 2017, 9:04 PM

Change 348146 had a related patch set uploaded (by Bmansurov):
[mediawiki/extensions/MobileFrontend@master] Improved infobox style hacks

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

I've pulled the above patch to the staging server and enabled wgMinervaApplyKnownTemplateHacks for testing.

Change 348183 had a related patch set uploaded (by Jdlrobson; owner: Bmansurov):
[mediawiki/extensions/MobileFrontend@printstyles] Improved infobox style hacks

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

Change 348146 abandoned by Jdlrobson:
Improved infobox style hacks

Reason:
Moved to printstyles branch https://gerrit.wikimedia.org/r/#/c/348183/

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

Change 348183 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] Improved infobox style hacks

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

bmansurov removed bmansurov as the assignee of this task.Apr 17 2017, 7:20 PM
Jdlrobson closed this task as Resolved.Apr 18 2017, 11:46 PM
Jdlrobson claimed this task.

The new styles for infoboxes and quotes will ride the train in production from Tuesday 25th. Note all other print style changes are restricted to beta (see T159857 for further details).

Since there are no infoboxes on mediawiki.org and test.wikipedia doesn't have enough articles to verify this on, we should verify it on Wednesday on Hebrew and Catalan. I've added a calendar invite for several stakeholders involved in this change to verify this change in production.

checked on catalan wikipedia.

Macro votecat: Design Approves