Page MenuHomePhabricator

CX2: Styling adjustments for paragraph highlighting
Closed, ResolvedPublic

Description

As users hover paragraphs to add to the translations those are highlighted (T187525). When paragraphs in the translation are empty, the highlighted paragraph in the source article appears next to the "Add translation" placeholder in the translation. However, there is a style mismatch between these two elements:

  • Their size is different. The yellow highlight uses box-shadow to expand their size 4px outside of the content area, which is good for the highlight not to start at the very edge of the text. However, that makes the highlight area to be bigger than the "Add translation" placeholder next to it.
  • The corner style is different. Highlight uses 2px radius corner while the "Add translation" placeholder has no rounded corners.

Differences are illustrated bellow:

Proposed adjustments

  • Expand the "Add translation" placeholder 4px to align in size with the highlight areas next to it.
  • Remove the border radius from the paragraph highlight. Note that this should not affect the sentence highlighting, which would keep the 2px rounded corners.

Event Timeline

Petar.petkovic updated the task description. (Show Details)

Change 424340 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Adjust section and sentence highlight

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

You may want to address the unbalanced padding caused by paragraphs only having bottom-margin:

You may want to address the unbalanced padding caused by paragraphs only having bottom-margin:

This ticket looks like the right place to deal with unbalanced highlight. However, trying to balance the bottom margin by halving and adding other half to the top margin can break section alignment. Giving bottom margins to sections and removing margins from individual elements (like paragraphs) breaks section alignment as well.

There are some tickets to deal with section alignment, and this problem can be tackled at that point. There is also a suggestion to change how section alignment works at T158435.
I don't want to make job harder for T190917 while trying to do simple style changes.

The unbalanced hghlight(extra at bottom) is originating from

section[ rel='cx:Section' ] > p { margin: 0 0 1.5em; }

The reason for this margin was mainly height based section alignment in CX1. In CX2, since the alignment is not based on seciton heights, but based on offsetTop, trying to distribute this margin at top and bottom might work

Change 424340 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Adjust section and sentence highlight

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

@Pginer-WMF - can you take a quick look? If all is ok - then the ticket may be closed as Resolved.

Comparing cx-testing and cx2-testing (for the same article)
(1) cx-testing

  • highlighted paragraph and 'Add translation' do not match in size
  • the bottom padding for highlighted paragraph is present


(2) cx2-testing

  • highlighted paragraph and 'Add translation' match in size
  • the bottom padding for highlighted paragraph is not present

@Pginer-WMF - can you take a quick look? If all is ok - then the ticket may be closed as Resolved.

I think we want to get both of these issues fixed. For CX1 we don't want to cause regressions, and for CX2 this does not look as intended. I think @Petar.petkovic had some ideas on how to adjust the highlight to solve this.

I think we want to get both of these issues fixed. For CX1 we don't want to cause regressions, and for CX2 this does not look as intended. I think @Petar.petkovic had some ideas on how to adjust the highlight to solve this.

If you're referring to the discussion two of us had during recent daily meeting, then I was talking about how these highlights relate to section issue indicator, which is about to be introduced for T189488.

Comparing cx-testing and cx2-testing (for the same article)
(1) cx-testing

  • highlighted paragraph and 'Add translation' do not match in size

(2) cx2-testing

  • highlighted paragraph and 'Add translation' match in size

Proposed solution in the description of this ticket says: "Expand the "Add translation" placeholder 4px to align in size with the highlight areas next to it". @Pginer-WMF, did you change your mind about this? Or there is a regression in CX1? Not sure what's wrong here.

Comparing cx-testing and cx2-testing (for the same article)
(1) cx-testing

  • the bottom padding for highlighted paragraph is present

(2) cx2-testing

  • the bottom padding for highlighted paragraph is not present

This is already pointed out in T190907#4110421. I advise to create new ticket for this, although it looks related to what was the scope of this ticket.

Proposed solution in the description of this ticket says: "Expand the "Add translation" placeholder 4px to align in size with the highlight areas next to it". @Pginer-WMF, did you change your mind about this? Or there is a regression in CX1? Not sure what's wrong here.

That was written as an example solution. I have no preference on which elements get expanded/reduced and which technique is used for doing so (box shadow or expanding the padding), the key aspects for the solution are:

  • Paragraph highlight and "Add translation" placeholder should have the same size.
  • Paragraph highlight should have some room around the text to avoid the text start to touch the highlight edge, and such room should be balanced (e.g., avoiding to extend too much at the bottom of the paragraph as shown above).

This is the intention of the ticket from the beginning so I'm more inclined to clarify the description and move it to the right column rather than creating a new ticket, but feel free to do so if a new ticket seems more helpful.

  • Paragraph highlight and "Add translation" placeholder should have the same size.

In T190907#4141717, @Etonkovidova wrote:
cx2-testing: Highlighted paragraph and 'Add translation' match in size.

So, that part is done.

  • Paragraph highlight should have some room around the text to avoid the text start to touch the highlight edge, and such room should be balanced (e.g., avoiding to extend too much at the bottom of the paragraph as shown above).

New ticket created to track this issue at T193016.

This is the intention of the ticket from the beginning so I'm more inclined to clarify the description and move it to the right column rather than creating a new ticket, but feel free to do so if a new ticket seems more helpful.

The reason new ticket is preferred is that two changes that were initially requested by this ticket (match source and target highlight in size and remove border radius) are style changes, not affecting box model. The change in padding around the sections will change the box model of sections and potentially cause section misalignment. We already have the problem with misaligned sections that is tracked in T190917 and we don't want more problems there.

Etonkovidova closed this task as Resolved.Apr 26 2018, 4:20 PM

Re-checked, and since T190917: CX2: Fix issues in paragraph alignment is a separate ticket now, I close this ticket as Resolved.