wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-11-23 23:44:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix badge icons in Monobook

Browse source 
In c86a1a5cf, the structure of the badge was changed, and the hack for
hiding the screenreader text in the badge was updated accordingly.
However, the Monobook styles were not updated, and this caused the badge
icons to be positioned off-screen.

Update the Monobook styles for the new badge structure, and use a
different hack for hiding the screenreader text because the one used for
other skins doesn't work in Monobook.

Bug: T226503
Change-Id: I190d2719addfbe50a7108193848bf23eef54bccf
This commit is contained in:
Roan Kattouw 2019-06-25 13:37:40 -07:00
parent 506aa9d425
commit ea856105f2
3 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
modules/echo.variables.less
View file

@ -22,7 +22,6 @@
@badge-padding: 0.12em;
@badge-icon-size: 1.1em;
@badge-distance-adjustment: 1em;
@badge-offscreen-offset: 1000px;
@notification-item-background-read: #eaecf0;

2
modules/nojs/mw.echo.badge.less
View file

@ -14,8 +14,8 @@
// Hide the text, but keep accessible for screen-readers
// Later we put the counter back onscreen with a zero text-indent
top: -5px;
border-radius: 2px;
text-indent: -9999px;
border-radius: 2px;
cursor: pointer;
text-decoration: none;
line-height: normal;

14
modules/nojs/mw.echo.badge.monobook.less
View file

@ -7,14 +7,16 @@
display: inline-block;
width: 16px;
height: 16px;
top: -@badge-offscreen-offset - 1px;
&:before {
background-size: 16px 16px;
}
background-size: 16px 16px;
top: -1px;
// HACK: text-indent: -9999px doesn't work with display: inline-block, so hide the text
// using a positive text-indent instead (T226503). Also make the text transparent so that
// it doesn't show up even if someone does somehow have a 10k-pixel-wide monitor.
text-indent: 9999px;
color: transparent;
&:after {
top: @badge-offscreen-offset + 3px;
top: 3px;
}
}
}