Page MenuHomePhabricator

AMC mobile history page layout messed up (FlaggedRevs)
Open, MediumPublic

Description

4E876282-AE8B-40DA-8373-540E5F49A23B.png (640×1,136 px, 146 KB)

The “oczekuje na przejrzenie” link (waiting for review) is blown up all over the place.
https://pl.m.wikipedia.org/w/index.php?title=Poland&action=history

Suggested changes

With a single change this looks a lot better (see screenshot) :

  • Move class onto li element and remove the span.

Screenshot 2024-04-01 at 8.44.04 AM.png (1,576×1,274 px, 225 KB)

Event Timeline

ovasileva triaged this task as Medium priority.Nov 26 2019, 11:25 AM
ovasileva moved this task from Incoming to Triaged but Future on the Web-Team-Backlog-Archived board.
Jdlrobson subscribed.

(MobileFrontend has nothing to do with this page)

Masumrezarock100 renamed this task from History page layout messed up on plwiki (FlaggedRevs) to AMC mobile history page layout messed up (FlaggedRevs).Dec 31 2019, 12:39 AM

Same thing happens on other wikis, I checked.

FlaggedRevs wraps revision lines in a span element with a class: <span class="flaggedrevs-pending">, <span class="flaggedrevs-color-1">, etc.

This makes the following native rule idle:

.mw-changeslist-line-inner > *,
ul.mw-contributions-list li > * {
  float: left;
  margin-right: 0.5em;
}
With wrapperWithout wrapper
image.png (1,121×237 px, 10 KB)
image.png (1,118×167 px, 9 KB)

To reproduce,

  1. make sure you have "Advanced mode" enabled at https://en.m.wikipedia.org/w/index.php?title=Special:MobileOptions;
  2. go to https://en.m.wikipedia.org/w/index.php?title=October_15&action=history.

Screenshot 2024-03-25 at 17.33.43.png (792×1,456 px, 176 KB)

This is less bad with the 'new' mobile page history.

Suggested changes

With a single change this looks a lot better (see screenshot) :

  • Move class onto li element and remove the span.

Screenshot 2024-04-01 at 8.44.04 AM.png (1,576×1,274 px, 225 KB)

This single change causes regression on desktop (Vector-2022): the review status of the selected two revisions is not visible, because the selection CSS overrides the FlaggedRevs CSS. (It also causes that the whole line is yellow/blue on desktop rather than just the part containing text, but which one is better is a matter of taste. Loss of information isn’t.)

BeforeAfter
Screenshot 2024-04-09 at 11-33-09 Kezdőlap Revision history - MediaWiki.png (977×218 px, 61 KB)
Screenshot 2024-04-09 at 11-24-10 Kezdőlap Revision history - MediaWiki.png (963×211 px, 59 KB)

This is occurring on anonymous page views too?
https://en.m.wikipedia.org/w/index.php?title=Paris&action=history
Can somebody please confirm?

If so, this is likely high/unbreak now IMO

As @Samwalton9-WMF noted in T238885#9658700, the rendering has significantly improved some time ago.

I don’t think it’s that broken that it would warrant UBN, but I do think there’s room for improvement even from the screenshots @Samwalton9-WMF shared. It’s not terrible, but not nice either.

This is occurring on anonymous page views too?

Yes, action=history of pages that have ever been reviewed (pending pages protected articles on enwiki, pretty much all pages on dewiki) shows the review status for all users – and has done so ever since I can remember.

This single change causes regression on desktop (Vector-2022)

Maybe the change should only be done on Minerva? Like this:

--- a/includes/frontend/FlaggedRevsUIHooks.php
+++ b/includes/frontend/FlaggedRevsUIHooks.php
@@ -715,7 +715,17 @@ class FlaggedRevsUIHooks implements
                }
                # Style the row as needed
                if ( $class ) {
-                       $s = "<span class='$class'>$s</span>";
+                       if ( $history->getSkin()->getSkinName() === 'minerva' ) {
+                               // On Minerva: the history is more like a table, so color the “row”.
+                               // This also avoids introducing a new “cell” (the <span>). (T238885)
+                               $liClasses[] = $class;
+                       } else {
+                               // On other skins: the history is a list, and the background color of
+                               // the list item itself is already used to highlight entries selected
+                               // for comparison. To avoid clashing, color only a <span> within the
+                               // list item.
+                               $s = "<span class='$class'>$s</span>";
+                       }
                }
                # Add stable old version link
                if ( $link ) {