Page MenuHomePhabricator

Indicators are unclickable on huwiki
Open, Needs TriagePublicBUG REPORT

Description

Steps to Reproduce:

  1. Go to https://hu.wikipedia.org/wiki/Sablon:Userinfo
  2. Click on the “felhasználó szerkesztéseinek száma” link in the upper right corner (unfortunately partly overlapped by the FlaggedRevs box, but some parts are still visible)

Actual Results:
Nothing happens.

Expected Results:
The link works.

Additional Details:
#firstHeading has position:relative set in Common.css Vector.css, which is needed to get the FlaggedRevs box positioned at the right place until T197912 is fixed. The links still worked a few weeks or months ago. (Common.css has not been changed since January.)

Prototype

DEMO 1 (deleted) (without huwiki repositioning, patch 605300)
DEMO 2 (flex layout)
DEMO 3 (float layout)

Related Objects

StatusSubtypeAssignedTask
ResolvedGoalovasileva
OpenNone
Resolvedovasileva
ResolvedSpikeovasileva
ResolvedSpikephuedx
Resolvedovasileva
OpenSpikeNone
ResolvedSpikeovasileva
Resolvedovasileva
ResolvedBUG REPORTmatmarex
Resolvedovasileva
ResolvedJdlrobson
Resolvedphuedx
Resolvednray
ResolvedMayakp.wiki
ResolvedMayakp.wiki
Stalledovasileva
OpenNone
ResolvedEdtadros
OpenNone
OpenNone
OpenNone
OpenNone
OpenSpikeNone
OpenBUG REPORTNone

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 6 2020, 7:25 PM

#firstHeading has position:relative set in Common.css,

@Tacsipacsi: I don't see any firstHeading string in https://hu.wikipedia.org/w/index.php?title=MediaWiki:Common.css&oldid=22198345 ?

Demian added a subscriber: Demian.Jun 7 2020, 8:19 AM

Possibly, depending on implementation. The implementation I've proposed in T248761#6041051 works, but flaggedrevs needs changes too.

Flaggedrevs and indicators are competing for screen space. Flaggedrevs has position:absolute, thus it's not too considerate towards indicators.
This concern should be taken into account in T248761 and flaggedrevs updated accordingly.
There aren't many wikis with flaggedrevs, so keeping this ticket in mind and testing on huwiki would be beneficial for that move.

Tacsipacsi updated the task description. (Show Details)Jun 7 2020, 10:28 AM

#firstHeading has position:relative set in Common.css,

@Tacsipacsi: I don't see any firstHeading string in https://hu.wikipedia.org/w/index.php?title=MediaWiki:Common.css&oldid=22198345 ?

Sorry, it’s Vector.css. That has been changed recently, but not that part, so I don’t this on-wiki change causes the issue.

Flaggedrevs and indicators are competing for screen space.

But only on huwiki. The box is normally just below the first heading (see https://hu.wikipedia.org/wiki/Sablon:Userinfo?safemode=1), it’s moved upwards by on-wiki Vector.js. The biggest concern for which I haven’t changed this JavaScript to make use of the indicators was that when the page title is wrapped into several lines, the indicators are currently on the top, while this box needs to be at the bottom to look nice. So if the layout is as it was implemented (and rolled back), I can simply move the box next to the indicators and get rid of the absolute positioning. Your flexbox proposal, however, leaves the indicators at the top, so in that case it’s not a viable solution. (But the long-term solution should be T197912 with appropriate UI design, so much effort should be put in that, not in making this local hack work.)

Demian updated the task description. (Show Details)EditedJun 12 2020, 9:47 PM

@Tacsipacsi I've put together a demo, see how it works for you:
DEMO 1 (without huwiki repositioning, patch 605300)

@Tacsipacsi Out of curiousity: what was the reason to move up the revflagged dropdown?

Demian updated the task description. (Show Details)Jun 12 2020, 11:41 PM

@Tacsipacsi I've put together a demo, see how it works for you:

This report is about indicators conflicting with the FR box. I don’t see any indicators on the test page, so naturally there isn’t any conflict. But that’s not very interesting… (I tried to add some, but I don’t want to reveal my IP, and I couldn’t manage to actually log in. Same complaints in the login form about potential session hijacking as on production wikis yesterday.)

@Tacsipacsi Out of curiousity: what was the reason to move up the revflagged dropdown?

It happened in the first version of Vector.js, which was about three years before my registration. Therefore I don’t know, but I think I heard something about the FR box conflicting with coordinates like the ones in https://hu.wikipedia.org/wiki/Budapest. I also think it’s more aesthetic, but that’s my personal opinion.

I don’t see any indicators on the test page

Yes, I've added that in DevTools... ;-) If you know how to add them, please tell.

I couldn’t manage to actually log in.

Use name IndicatorTest, pass IndicatorTest1

Demian updated the task description. (Show Details)Jun 13 2020, 12:50 AM

I don’t see any indicators on the test page

Yes, I've added that in DevTools... ;-) If you know how to add them, please tell.

Probably that’s not the way indicators added most of the time. ;) I added it the traditional way, by editing the page. It looks great on medium screen where the article title is broken into two lines, but otherwise there’s plenty of place. On wide screen where everything fits in one line, it’s a little bit ugly that the indicator is somewhat above the FR box. Where things can get quite bad is (unsurprisingly) narrow screen. The FR box is not worse than the current production version (i.e. the production version is bad as well), but the indicator is worse: in the current production version, it’s a floating element, which means it occupies horizontal space only in the line it’s in, leaving subsequent lines of the title full-width (they are not full-width on huwiki because of the FR styling, but they are on all other wikis), and if there’s really little place, the indicators can become full-width as well, pushing the article title in the next line; in extreme case (when the indicators alone don’t fit in one line), they can even wrap. I’m not sure if that much flexibility can be reproduced with flexbox.

Demian added a comment.EditedJun 13 2020, 10:29 AM

Thanks for the feedback! I've made some adjustments to better address these cases: diff.
Result: DEMO 2.

The wide-screen scenario definitely improved, but the narrow-screen is not much better, simply because the inidicators and the article title are forced to be next to each other, even if there’s hardly any horizontal space. The other issue can be seen on https://patchdemo.wmflabs.org/wikis/a56e70b03f135c240403c3a1c1568766/w/index.php/Rinderkennzeichnungs-_und_Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz when zoomed in: the star is vertically in the middle, which looks quite strange for me.

Demian updated the task description. (Show Details)EditedJun 17 2020, 3:34 AM

the narrow-screen is not much better, simply because the inidicators and the article title are forced to be next to each other, even if there’s hardly any horizontal space.

Yes, that was an intentional choice. With flex-wrap the indicators would wrap below the title, but then it's always on the left side. I've enable wrapping below 600px to address this use-case.

The other issue can be seen on https://patchdemo.wmflabs.org/wikis/ae53c6c3ee01d1c4b32b01482a887782/w/index.php/Rinderkennzeichnungs-_und_Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz when zoomed in: the star is vertically in the middle, which looks quite strange for me.

Thanks for making the example. That's unfortunately caused by the align-items: flex-end; rule necessary to line up the icon with the bottom-border when the title is one line only, which is the most common case. The vertical centering occurs with very-very long titles. CSS cannot check for that circumstance, so I've tried a rough approximation with max-width: 600px. Other than that I have no idea for that use-case and I think it's so rare it's not worth more effort. Do you have any other idea?

New DEMO (deleted)

I just pressed Random three times at huwiki, and all three titles (Szocshon kogurjói király, (18231) 3286 T-1, Noyant-et-Aconin) wrap on my ~650px half-screen, so the breakpoint should probably be at least 720px.

My idea is throwing away this flexbox solution and keeping the float-based one—that’s so much simpler and more adaptive than this one. By the way, all these tries are basically about T248761, not this regression; this one probably can be fixed by introducing a z-index at some place. (That won’t be perfect, but not worse than a few months ago. I believe that the perfect solution for huwiki’s local issue is T197912, not adapting MediaWiki’s infrastructure to the local hack.)

Demian added a comment.EditedJun 22 2020, 4:04 PM

the breakpoint should probably be at least 720px.

Ok, updated.

By the way, all these tries are basically about T248761, not this regression; this one probably can be fixed by introducing a z-index at some place. (That won’t be perfect, but not worse than a few months ago. I believe that the perfect solution for huwiki’s local issue is T197912, not adapting MediaWiki’s infrastructure to the local hack.)

Yes, I wanted to adapt the solution of T248761 to suit your purpose too.

My idea is throwing away this flexbox solution and keeping the float-based one—that’s so much simpler and more adaptive than this one.

I've uploaded a simpler solution for T248761. I'll be focusing on that task and leave this for you. Feel free to experiment with it and change the stylesheets, js in the new DEMO 2.

@Tacsipacsi new testbench up with float layout for the title and indicators: DEMO 3.
As usual feel free to experiment with flaggedrevs.

Demian updated the task description. (Show Details)Jun 24 2020, 5:09 PM