(Go: >> BACK << -|- >> HOME <<)

Page MenuHomePhabricator

CX2: Avoid the gap at the top of the tools column as the user scrolls
Closed, ResolvedPublic

Description

Currently, after scrolling down in the translation editor, the header where the publish button is becomes sticky in the main document. However the cards in the tools column do not move at all as the user scrolls, which generates a gap on top:

Screen Shot 2018-03-01 at 9.06.39 PM.png (332×1 px, 96 KB)

The tools should instead move up as the user scrolls until they are 20px to reach the top edge of the screen. At that point the tools panel becomes sticky. 20px is the separation between cards according to T158410 (although the editing card and the instruction card are not following it currently, which is reported as a separate ticket).

Screen Shot 2018-03-08 at 12.20.55.png (573×1 px, 212 KB)

Event Timeline

Change 418871 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Reduce the gap at the top of the tools column

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

When using 20px (in the merged patch) the space at the top looks bigger than in your second image. I assume this is because of your comment although the editing card and the instruction card are not following it currently.

image.png (216×1 px, 19 KB)

Change 418871 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Reduce the gap at the top of the tools column

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

Change 418890 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Use top:0 for the tools container and set margin for each tool

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

@Pginer-WMF in no sticky position, is this the desired output?

image.png (558×1 px, 87 KB)

@Pginer-WMF in no sticky position, is this the desired output?

image.png (558×1 px, 87 KB)

For no sticky position, the top card and the document should be vertically aligned. It's only in the sticky position where the top margin is preserved.

Both start aligned, and as the user scrolls up, the cards become sticky when they at 20px from the top edge, and the document header once it reaches 0px to the top edge.

Change 418890 abandoned by Santhosh:
Set margin for each tool card

Reason:
I will take a look later.

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