| Etonkovidova | |
| May 17 2017, 6:58 PM |
| F9564614: Screen Shot 2017-09-15 at 12.26.28 PM.png | |
| Sep 15 2017, 7:39 PM |
| F9564616: Screen Shot 2017-09-15 at 12.29.38 PM.png | |
| Sep 15 2017, 7:39 PM |
| F9564609: Screen Shot 2017-09-15 at 12.27.26 PM.png | |
| Sep 15 2017, 7:39 PM |
| F8798677: Screen Shot 2017-07-19 at 11.59.41 AM.png | |
| Jul 19 2017, 7:15 PM |
| F8798675: Screen Shot 2017-07-19 at 11.57.52 AM.png | |
| Jul 19 2017, 7:15 PM |
| F8798615: Screen Shot 2017-07-19 at 11.52.53 AM.png | |
| Jul 19 2017, 7:15 PM |
| F8798617: Screen Shot 2017-07-19 at 11.50.00 AM.png | |
| Jul 19 2017, 7:15 PM |
| F8112899: Screen Shot 2017-05-17 at 11.43.57 AM.png | |
| May 17 2017, 6:58 PM |
The following element is misaligned both in betalabs and wmf.30
<a class="oo-ui-buttonElement-button" role="button" tabindex="0" aria-disabled="false" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-image-progressive"></span><span class="oo-ui-labelElement-label">What's this?</span><span class="oo-ui-indicatorElement-indicator oo-ui-image-progressive"></span></a>
The most visible misalignment is in FF (FF 53 was tested).
Safari - the element has minimal misalignment:
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Align "What's this" vertically | mediawiki/core | master | +7 -12 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | SBisson | T162675 'Integrated filters'—add all RC Page filters into the new UI along with selected new functions | |||
| Open | None | T168826 Styling adjustments for the New filters for edit review | |||
| Resolved | Volker_E | T165627 RC filters - 'What's this?' element is misaligned. |
@Volker_E advice on this? The left part is a label, the right part is a frameless button, and I assume the alignment is off due to padding and line-height, which I can't immediately change.
My only idea here is to add a table layout whose cells are vertical-align:middle; ... ?
@Mooeypoo Both shouldn't feature a different computed height. Former 16px, latter 18px.
Vertical-align won't bring you much further as you'll consistently run into cross-browser rendering quirks.
There's currently no keyboard navigation via tab key possible?
Asking, as the border on .oo-ui-buttonElement-button is only there for tab focus, but by tabbing, currently you're actually tabbing out and hiding the overlay.
By setting it to 0 they are same height and I'd also not put too many line-height & vertical-align overrides on other selectors.
Change 357517 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Align "What's this" vertically
Checked the fix in betalabs - the label is aligned vertically now.
Both screenshots are for Chrome 59 (Safari looks fine too).
Firefox seems to be ok too:
However, monobook UI will need some adjustments (should be filed as a separate bug?) :
QA Recommendation: Product should weigh in
@Volker_E, do you want a new ticket for Monobook, as above? Or can you just fix it on this ticket?
@Volker_E, do you want a new ticket for Monobook, as above? Or can you just fix it on this ticket?
@jmatazzoni Sorry for the delayed reply. Let's open another bug for Monobook please, as it's a different beast, with other things (possibly) code-wise to consider. Thanks!
@jmatazzoni, @Volker_E Done - the monobook issue with misaligned "What's this?" is now split into a separate ticket: T171919: (Safari only) RC filters - misaligned 'What's this?' element in monobook
Not sure what happened here, patch hasn't been merged: https://gerrit.wikimedia.org/r/#/c/357517/?
Change 357517 merged by jenkins-bot:
[mediawiki/core@master] Align "What's this" vertically
The element has a different label: "How do these work?"
@Volker_E The fix looks best in FF:
Chrome and Safari still display a slight misalignment:
