Page MenuHomePhabricator

CX2: Adjust style for the introduction card
Closed, ResolvedPublic

Description

The initial card shown in the translator editor describes the basic steps to use the tool. Currently it needs some small styling adjustments:

  • The lines that separe each section should go across the card from edge to edge.
  • The vertical space for the "View translation guidelines" link should be balanced.
Current statusProposed adjustments

A possible set of CSS adjustments to support these changes are included below for reference:

.card-instructions-guidelines {
	margin-top: 8px;
}

.card-instructions-section {
	width: auto !important;
	margin-left: -16px;
	margin-right: -16px;
}

Related Objects

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 23 2018, 10:13 AM
Pginer-WMF renamed this task from CX2: Adjust style fro the introduction card to CX2: Adjust style for the introduction card.Feb 23 2018, 10:14 AM
Pginer-WMF triaged this task as Low priority.
Pginer-WMF moved this task from Backlog to Maintenance backlog on the Language-2018-Jan-Mar board.

Change 414718 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Visually balance instructions tool

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

@Pginer-WMF, here are some shots for you to check:

BeforeAfter

Why style guide from T168280 isn't requested here, but paddings shown much bigger in "proposed adjustments" screenshot?

It may be better to reduce the number of font sizes in the card. For the link at the bottom it is 14px, and for the card-instructions-description it is 0.9em, that is calculated as 14.4px.

It may be better to reduce the number of font sizes in the card. For the link at the bottom it is 14px, and for the card-instructions-description it is 0.9em, that is calculated as 14.4px.

Yes, makes sense. For the card instructions descriptions we can:

  • Adjust the font size to 14px;
  • Adjust the top padding to 8px instead of the current 10px

Other layout adjustments may be needed later, but I think these adjustments should be enough for the purpose of this ticket.

Change 414718 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Visually balance instructions tool

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

Tested in cx2-testing.wmflabs.org and looks good!

KartikMistry moved this task from QA to Done on the Language-2018-Jan-Mar board.Mar 6 2018, 12:10 PM
Petar.petkovic closed this task as Resolved.Mar 6 2018, 1:21 PM