wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-24 15:53:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix alignment of searchbar by introducing CSS grid to the header on viewports greater than desktop-wide

Browse source 
- Addresses "when pinned, can we maintain the alignment between the search bar and the article title for larger screens?"
https://phabricator.wikimedia.org/T324877#8499980

Bug: T324877
Change-Id: I7d3447cccdff40fc5a5e0b8978c17db8ffab065c
This commit is contained in:
bwang 2023-01-06 12:07:35 -06:00
parent c298d5d1ea
commit 96932f847c
2 changed files with 36 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
resources/skins.vector.styles/components/Header.less
View file

@ -26,20 +26,21 @@
align-items: center;
}
.vector-header-start {
float: left;
}
.vector-header-end {
flex-grow: 1;
}
@media ( min-width: @min-width-desktop-wide ) {
// Ensure search box is aligned with content when search thumbnails or JS is off
.vector-search-box:not( .vector-search-box-auto-expand-width ),
html:not( .client-js ) & .vector-search-box {
.vector-feature-page-tools-disabled & .vector-search-box:not( .vector-search-box-auto-expand-width ),
html:not( .client-js ) .vector-feature-page-tools-disabled & .vector-search-box {
padding-left: @size-search-expand;
}
.client-js .vector-feature-page-tools-enabled & .vector-search-box.vector-search-box-auto-expand-width {
// Ensure search box is aligned with content when it autoexpands (i.e. search thumbnails)
margin-left: -@size-search-expand;
}
}
@media ( min-width: @min-width-desktop ) {
@ -53,8 +54,7 @@
* Toggles the visibility of the search box at lower resolutions.
*/
&.vector-header-search-toggled {
#mw-sidebar-button,
.mw-logo,
.vector-header-start,
.search-toggle {
display: none;
}
@ -67,13 +67,16 @@
// T284242#7206507: Widen the suggestion results to the edge of the search
// button at small resolutions.
position: relative;
margin-left: @padding-horizontal-tabs;
margin-right: @margin-end-search;
// Override default max width at lower resolutions
> div {
max-width: none;
}
.vector-feature-page-tools-disabled & {
margin-left: @padding-horizontal-tabs;
}
}
// Make the menu below the search input wider, to match the width of the input+button

30
resources/skins.vector.styles/layouts/grid.less
View file

@ -23,12 +23,14 @@
}
}
/* Use of minmax is important to restrict the maximum grid column width more information: T314756 */
@grid-template-column-desktop: ~'232px minmax(0, 1fr)';
@grid-template-column-desktop-wide: ~'284px minmax(0, 1fr)';
@media ( min-width: @min-width-desktop ) {
.mw-page-container-inner {
display: grid;
width: 100%;
column-gap: 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing
grid-template: ~'min-content min-content min-content 1fr min-content / 232px minmax(0, 1fr)';
grid-template: ~'min-content min-content min-content 1fr min-content / @{grid-template-column-desktop}';
grid-template-areas: 'header header'
'siteNotice siteNotice'
'mainMenu pageContent'
@ -36,6 +38,10 @@
'footer footer';
}
.vector-feature-page-tools-disabled .mw-page-container-inner {
column-gap: 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing
}
.vector-sitenotice-container {
grid-area: siteNotice;
}
@ -63,9 +69,21 @@
@media ( min-width: @min-width-desktop-wide ) {
.mw-page-container-inner {
/* Use of minmax is important to restrict the maximum grid column width
more information: T314756 */
grid-template-columns: ~'284px minmax(0, 1fr)';
grid-template-columns: @grid-template-column-desktop-wide;
}
.vector-feature-page-tools-enabled .mw-header {
display: grid;
grid-template: ~'auto / @{grid-template-column-desktop-wide}';
grid-template-areas: 'headerStart headerEnd';
.vector-header-start {
grid-area: headerStart;
}
.vector-header-end {
grid-area: headerEnd;
}
}
}