wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-30 18:35:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix alignment/spacing of grid column items

Browse source 
-Addresses this feedback: https://phabricator.wikimedia.org/T324877#8505388

Bug: T319348
Bug: T324877
Change-Id: Ic371716f016309fb105c30b8e02e106c1de8310d
This commit is contained in:
bwang 2023-01-09 12:20:21 -06:00
parent 96932f847c
commit 22c0e38997
6 changed files with 28 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bundlesize.config.json
View file

@ -5,7 +5,7 @@
},
{
"resourceModule": "skins.vector.styles",
"maxSize": "11.8kB"
"maxSize": "11.9kB"
},
{
"resourceModule": "skins.vector.legacy.js",

7
resources/common/variables.less
View file

@ -152,10 +152,6 @@
// Calculated with: 1.5em (TOC top padding) + @margin-top-pinned-toc = 0.5em (.mw-body padding) + 2.34 (height of #firstHeading)
@margin-top-pinned-toc: @padding-top-content + (@font-size-heading-1 * @line-height-heading) - 1.5em;
// Sidebar
@width-sidebar-px: 220px;
@width-sidebar-px-wide: 244px;
// Search
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202
@min-width-search-button: 28px;
@ -218,3 +214,6 @@
// Grid
@grid-row-gap: 24px;
@grid-column-gap: 36px;
@width-column-start-desktop: 196px; // Total width including gap is 232px
@width-column-start-desktop-wide: 248px; // Total width including gap is 284px

8
resources/skins.vector.styles/components/MainMenu.less
View file

@ -45,10 +45,12 @@
// Main menu when pinned in the sidebar
.vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu {
padding: @padding-vertical-dropdown-menu-item @padding-horizontal-dropdown-menu-item;
background-color: @background-color-secondary--modern;
// Align text with page container
// Align the left edge of the text with the page container
margin-left: -@padding-horizontal-dropdown-menu-item;
padding: @padding-vertical-dropdown-menu-item @padding-horizontal-dropdown-menu-item;
// Ensure main menu takes up full width of its container factoring in the negative left margin
width: ~'calc( 100% + @{padding-horizontal-dropdown-menu-item} )';
background-color: @background-color-secondary--modern;
// Match styles of .mw-list-item a in PinnableElement.less
.vector-main-menu-action-opt-out a,

3
resources/skins.vector.styles/components/PageTools.less
View file

@ -8,8 +8,9 @@
.vector-page-tools {
#vector-page-tools-pinned-container & {
padding-left: 45px;
width: 140px;
// Match spacing of TOC and main menu
padding-left: @padding-horizontal-dropdown-menu-item;
}
}

6
resources/skins.vector.styles/components/TableOfContentsPinned.less
View file

@ -39,9 +39,11 @@
}
.vector-feature-page-tools-enabled & {
// Align the left edge of the TOC text with the main menu button icon.
// Align the left edge of the TOC text with the page container
margin-left: -@spacing-subsection-toggle;
padding-left: @spacing-subsection-toggle;
padding: 0 @padding-horizontal-dropdown-menu-item 0 @spacing-subsection-toggle;
// Ensure TOC takes up full width of its container factoring in the negative left margin
width: ~'calc( 100% + @{spacing-subsection-toggle} )';
}
}

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

@ -7,29 +7,29 @@
// expressed in pixels. See T313817.
// FIXME: Remove this selector after Iab94f9f600f8e6d032ad70d6b8e502686977441c has been in prod for 5 days
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
#vector-toc-pinned-container .sidebar-toc:after,
#vector-toc-pinned-container .sidebar-toc,
#vector-toc-pinned-container .vector-toc:after,
#vector-toc-pinned-container .vector-toc,
.vector-feature-page-tools-disabled .vector-main-menu,
.vector-main-menu-container .vector-main-menu {
.vector-feature-page-tools-disabled #vector-toc-pinned-container .sidebar-toc:after,
.vector-feature-page-tools-disabled #vector-toc-pinned-container .sidebar-toc,
.vector-feature-page-tools-disabled #vector-toc-pinned-container .vector-toc:after,
.vector-feature-page-tools-disabled #vector-toc-pinned-container .vector-toc,
.vector-feature-page-tools-disabled .vector-main-menu {
// T305069 Layout adjustments of sidebar elements
// Align the left edge of main menu with the main menu button.
width: @width-sidebar-px;
width: 220px;
// Align the left edge of main menu with the main menu button icon.
@media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-px-wide;
width: 244px;
}
}
/* 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)';
@grid-template-column-desktop: ~'@{width-column-start-desktop} minmax(0, 1fr)';
@grid-template-column-desktop-wide: ~'@{width-column-start-desktop-wide} minmax(0, 1fr)';
@media ( min-width: @min-width-desktop ) {
.mw-page-container-inner {
display: grid;
column-gap: @grid-column-gap;
grid-template: ~'min-content min-content min-content 1fr min-content / @{grid-template-column-desktop}';
grid-template-areas: 'header header'
'siteNotice siteNotice'
@ -39,7 +39,7 @@
}
.vector-feature-page-tools-disabled .mw-page-container-inner {
column-gap: 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing
column-gap: @grid-column-gap + 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing
}
.vector-sitenotice-container {
@ -74,6 +74,7 @@
.vector-feature-page-tools-enabled .mw-header {
display: grid;
column-gap: @grid-column-gap;
grid-template: ~'auto / @{grid-template-column-desktop-wide}';
grid-template-areas: 'headerStart headerEnd';
@ -136,6 +137,7 @@
.vector-feature-page-tools-enabled .mw-body {
display: grid;
grid-auto-rows: auto;
column-gap: @grid-column-gap;
grid-template-columns: ~'minmax(0, @{max-width-content-container}) min-content';
grid-template-areas: 'titlebar .'
'toolbar columnEnd'