When viewing Special:GlobalWatchlist?uselang=he, the collapse button is on the left always, smooshed next to the mark site as seen button for LTR wikis but correctly placed for RTL wikis. For viewing with uselang=en, the collapse button is always on the right, which is correct for the wikis that are LTR but wrong for RTL
Description
Details
Project | Branch | Lines +/- | Subject | |
---|---|---|---|---|
mediawiki/extensions/GlobalWatchlist | master | +10 -31 | Clean up RTL handling for SiteDisplay |
Related Objects
Event Timeline
Probably a better solution to T274313 would have been adding .mw-content-ltr and .mw-content-rtl, which jquery.makeCollapsible.styles.less takes into account when choosing which side to float on.
Will need to add similar handling to the collapsible wrapper Vue component
Trying to test this out in a browser manipulating the CSS proved complicated, since we need to delete the existing rules. I figured it out, but for future reference:
1) get current CSS: mw.loader.moduleRegistry['ext.globalwatchlist.specialglobalwatchlist'].style.css[0] 2) set CSS rules to an updated version that does not include the rule we want to eliminate: mw.loader.moduleRegistry['ext.globalwatchlist.specialglobalwatchlist'].style.css[0] = `...`; 3) delete stored version: delete mw.loader.store.items['ext.globalwatchlist.specialglobalwatchlist@1msei'] 4) tell store to save a new copy, now with the updated css: mw.loader.store.add( 'ext.globalwatchlist.specialglobalwatchlist' ) 5) refresh the tab, or open in a new window, and verify that the cached version of the module that we manually changed is used (would probably also work for manually testing out javascript changes...)
after removing the existing rules, which set (with @noflip annotations) .ext-globalwatchlist-feed-site to be text-align left and direction ltr, and then the custom overrides based on language codes, I then ran
$( '.ext-globalwatchlist-feed-site' ).addClass( 'mw-content-ltr' ) $( '.ext-globalwatchlist-feed-site[id^=ext-globalwatchlist-feed-site-ar]' ).removeClass( 'mw-content-ltr' ).addClass( 'mw-content-rtl' )
to set mw-content-rtl on the arabic wikipedia entry (only rtl wiki I was testing with) and mw-content-ltr on the rest. Viewing the page in English, this produced the intended result.
Switching to uselang=he, I repeated the css changes, and ran the same command, and it also rendered correctly. Will send a patch to do this.
This does not apply to the Vue version, which will be handled separately in T274603 and currently has no rtl handling
Just a thought. Can you put the collapse button on the line center, nevermind what is the uselang and what is the wiki? It should be much easier.
The collapsible wrapper location is based on jquery.makeCollapsible.styles.less and is either on the left or right, I think it would look odd in the middle
Change 665171 had a related patch set uploaded (by DannyS712; owner: DannyS712):
[mediawiki/extensions/GlobalWatchlist@master] Clean up RTL handling for SiteDisplay
As you wish. For me, it will look wierd if it "jumps" from side to side on the same page.
It would match the "jumps" of the content for the side being shown (enwiki is on the left, arwiki jumps to the right)...
Change 665171 merged by jenkins-bot:
[mediawiki/extensions/GlobalWatchlist@master] Clean up RTL handling for SiteDisplay