wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-09-23 10:21:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Technical] Fix sticky header search input alignment when VisualEnhancementFlag is enabled

Browse source 
Visual changes when the flag is on

Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06
More context at T322673#8383888

Bug: T322673
Change-Id: I64a47fa869247f758c6369c2e0ff8b12f87f9d9e
This commit is contained in:
bwang 2022-11-04 14:25:19 -05:00 committed by Jdlrobson
parent e60d8f6917
commit 16da6a5e6a
3 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
includes/templates/StickyHeader.mustache
View file

@ -10,7 +10,7 @@
<header id="vector-sticky-header" aria-hidden="true"
class="vector-sticky-header">
<div class="vector-sticky-header-start">
<div class="vector-sticky-header-icon-start mw-ui-icon-flush-left">
<div class="vector-sticky-header-icon-start mw-ui-icon-flush-left mw-ui-icon-flush-right">
{{#data-button-start}}
{{>Button}}
{{/data-button-start}}

23
resources/skins.vector.styles/components/StickyHeader.less
View file

@ -2,6 +2,7 @@
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';
@spacing-search-title-divider: 30px;
@font-size-sticky-header-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
.vector-sticky-header {
@ -47,10 +48,6 @@
&-context-bar {
display: flex;
align-items: center;
.vector-feature-visual-enhancement-next-enabled & {
column-gap: 8px;
}
}
&-start {
@ -58,6 +55,13 @@
min-width: 0;
}
&-icon-start {
.vector-feature-visual-enhancement-next-disabled & {
// Override mw-ui-icon-flush-right temporarily when the flag is disabled
margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
}
}
// Apply nowrap to title and buttons
// Must apply to &-ccontext-bar-primary rather than &-context-bar or &-start
// to avoid applying nowrap to the collapsed TOC menu
@ -71,9 +75,16 @@
//
&-context-bar {
border-left: @border-width-base @border-style-base #c8c8c8;
margin: 0 15px;
padding-left: 30px;
padding-left: @spacing-search-title-divider;
min-width: 0;
.vector-feature-visual-enhancement-next-disabled & {
margin: 0 15px;
}
.vector-feature-visual-enhancement-next-enabled & {
margin-left: @spacing-search-title-divider;
}
}
&-toc-container {

2
tests/jest/__snapshots__/stickyHeader.test.js.snap
View file

@ -3,7 +3,7 @@
exports[`Sticky header renders 1`] = `
"<header id=\\"vector-sticky-header\\" aria-hidden=\\"true\\" class=\\"vector-sticky-header\\">
<div class=\\"vector-sticky-header-start\\">
<div class=\\"vector-sticky-header-icon-start mw-ui-icon-flush-left\\">
<div class=\\"vector-sticky-header-icon-start mw-ui-icon-flush-left mw-ui-icon-flush-right\\">
<button tabindex=\\"-1\\" data-event-name=\\"ui.vector-sticky-search-form.icon\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-search vector-sticky-header-search-toggle\\">
<span>search</span>