jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Introduce media query breakpoint variables and replace all media query usage with new variables 

Pixel shows 15 regressions, these are expected changes that are
fixing issues on specific viewports that fixes the following:

[At exactly the tablet breakpoint]
* the more menu dropdown was being
shown at the same time as the other menu items, resulting in duplicates
(see https://phabricator.wikimedia.org/F35285379)

[At exactly the desktop breakpoint]
* The table of contents AND the
table of contents toggle button to the left of the title were showing
(see https://phabricator.wikimedia.org/F35285392)
* The sticky header was not showing
* The fly out table of contents was showing instead of the sidebar
table of contents on scroll
* The top of the sidebar is brought into alignment with the tabs
(see https://phabricator.wikimedia.org/F35285408)

Bug: T310536
Change-Id: I6e870a032c8ba4ec003d00ff3f91732aaa2f38b0
This commit is contained in:
bwang 2022-06-23 16:33:47 -05:00 committed by Jdlrobson
parent 4ab798441e
commit 8a88f61e89
13 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/common/components/SearchBox.less
View File

@ -99,7 +99,7 @@
display: block;
float: right;
@media ( min-width: @width-breakpoint-desktop ) {
@media ( min-width: @min-width-desktop ) {
display: none;
}
}
@ -107,7 +107,7 @@
.vector-search-box-collapses > div {
display: none;
@media ( min-width: @width-breakpoint-desktop ) {
@media ( min-width: @min-width-desktop ) {
display: block;
}
}

11
resources/common/variables.less
View File

@ -1,6 +1,17 @@
@import 'mediawiki.skin.variables.less';
@import 'mediawiki.ui/variables.less';
//
// == Media query breakpoints ==
//
@min-width-mobile: @width-breakpoint-mobile; // Above 320px
@max-width-mobile: @width-breakpoint-tablet - 1px; // Below 719px
@min-width-tablet: @width-breakpoint-tablet; // Above 720px
@max-width-tablet: @width-breakpoint-desktop - 1px; // Below 999px
@min-width-desktop: @width-breakpoint-desktop; // Above 1000px
@max-width-desktop: @width-breakpoint-desktop-wide - 1px; // Below 1199px
@min-width-desktop-wide: @width-breakpoint-desktop-wide; // Above 1200px
// Sizing calculation primitives.
@font-size-root: 100%;
@font-size-browser: 16; // Assumed browser default of `16px`

14
resources/skins.vector.styles/components/ArticleToolbar.less
View File

@ -14,7 +14,7 @@
.mw-portlet-views {
display: none;
@media ( min-width: @width-breakpoint-tablet ) {
@media ( min-width: @min-width-tablet ) {
&:not( .emptyPortlet ) {
display: block;
}
@ -24,14 +24,14 @@
.vector-more-collapsible-item {
display: none;
@media ( max-width: @width-breakpoint-tablet ) {
@media ( max-width: @max-width-mobile ) {
display: block;
}
}
// Make sure pcactions is displayed (even if .emptyPortlet present)
.vector-has-collapsible-items {
@media ( max-width: @width-breakpoint-tablet ) {
@media ( max-width: @max-width-mobile ) {
display: block;
}
}
@ -42,7 +42,7 @@
display: flex;
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
@media ( min-width: @width-breakpoint-desktop-wide ) {
@media ( min-width: @min-width-desktop-wide ) {
padding-right: @padding-horizontal-tabs - 1px;
}
@ -53,7 +53,7 @@
// Layout correction - as it was before introduce of flex box.
margin-right: -1px;
@media ( min-width: @width-breakpoint-desktop-wide ) {
@media ( min-width: @min-width-desktop-wide ) {
margin-right: -@border-base-ems * 3;
}
}
@ -62,7 +62,7 @@
display: flex;
// Layout correction - as it was before introduce of flex box.
@media ( min-width: @width-breakpoint-desktop-wide ) {
@media ( min-width: @min-width-desktop-wide ) {
margin-left: @border-base-ems * 3;
}
}
@ -71,7 +71,7 @@
// Currently when right navigation is empty and sidebar is open no
// border is shown. This can intentionally be removed at a later date but
// is preserved to reduce number of UI regressions in current release.
@media ( max-width: @width-breakpoint-tablet ) {
@media ( max-width: @max-width-mobile ) {
#mw-sidebar-checkbox:checked ~ .mw-workspace-container #right-navigation.right-navigation-empty {
border-bottom: 0;
}

6
resources/skins.vector.styles/components/Header.less
View File

@ -43,7 +43,7 @@
flex-grow: 1;
}
@media ( min-width: @width-breakpoint-desktop-wide ) {
@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 {
@ -51,7 +51,7 @@
}
}
@media ( min-width: @width-breakpoint-desktop ) {
@media ( min-width: @min-width-desktop ) {
.vector-search-box {
.vector-layout-legacy & {
margin-right: @margin-end-search;
@ -62,7 +62,7 @@
/**
* Toggles the visibility of the search box at lower resolutions.
*/
@media ( max-width: @width-breakpoint-desktop ) {
@media ( max-width: @max-width-tablet ) {
&.vector-header-search-toggled {
#mw-sidebar-button,
.mw-logo,

4
resources/skins.vector.styles/components/Logo.less
View File

@ -25,7 +25,7 @@
width: @size-mw-logo-icon;
height: @size-mw-logo-icon;
@media ( min-width: @width-breakpoint-tablet ) {
@media ( min-width: @min-width-tablet ) {
display: block;
}
}
@ -46,7 +46,7 @@
width: 100%;
}
@media ( min-width: @width-breakpoint-tablet ) {
@media ( min-width: @min-width-tablet ) {
max-width: none;
img {

8
resources/skins.vector.styles/components/Sidebar.less
View File

@ -41,7 +41,7 @@
background-image: none;
background-color: @border-color-sidebar;
@media ( min-width: @width-breakpoint-desktop-wide ) {
@media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-wide;
}
}
@ -54,7 +54,7 @@
.sidebar-toc {
margin-left: 0;
@media ( min-width: @width-breakpoint-desktop-wide ) {
@media ( min-width: @min-width-desktop-wide ) {
margin-left: @margin-start-sidebar-content;
}
}
@ -66,7 +66,7 @@
margin-top: @top-margin-sidebar-toc;
}
@media ( max-width: @width-breakpoint-desktop ) {
@media ( max-width: @max-width-tablet ) {
.mw-sidebar {
margin-top: 0;
margin-left: 0;
@ -174,7 +174,7 @@
transition-timing-function: ease-out;
}
@media ( max-width: @width-breakpoint-tablet ) {
@media ( max-width: @max-width-mobile ) {
.mw-sidebar {
transition: none;
}

8
resources/skins.vector.styles/components/StickyHeader.less
View File

@ -21,12 +21,12 @@
justify-content: space-between;
box-sizing: border-box;
@media ( min-width: @width-breakpoint-desktop ) {
@media ( min-width: @min-width-desktop ) {
padding: 6px 25px;
max-width: @max-width-page-container + ( @padding-horizontal-page-container * 2 );
}
@media ( min-width: @width-breakpoint-desktop-wide ) {
@media ( min-width: @min-width-desktop-wide ) {
padding: 6px 25px;
max-width: @max-width-page-container + ( @padding-horizontal-page-container-wide * 2 );
}
@ -46,7 +46,7 @@
}
// T298836 Hide the sticky header at lower resolutions.
@media ( max-width: @width-breakpoint-desktop ) {
@media ( max-width: @max-width-tablet ) {
display: none;
}
@ -123,7 +123,7 @@
}
}
@media ( min-width: @width-breakpoint-tablet ) {
@media ( min-width: @min-width-tablet ) {
.client-js.vector-sticky-header-enabled {
// T290518: When the sticky header is enabled (feature flag is on, js is
// enabled, and viewport is at higher resolutions), add scroll padding to the

6
resources/skins.vector.styles/components/TableOfContents.less
View File

@ -13,7 +13,7 @@
overflow: auto;
background-color: @border-color-sidebar;
@media ( min-width: @width-breakpoint-desktop-wide ) {
@media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-wide;
padding-right: 8px;
}
@ -128,7 +128,7 @@
transform: rotate( 90deg );
}
@media ( min-width: @width-breakpoint-desktop ) {
@media ( min-width: @min-width-desktop ) {
.sidebar-toc {
display: block;
}
@ -136,7 +136,7 @@
// T300975 following media query for TOC experiment treatment
// class can be removed once associated A/B test is over.
@media ( max-width: @width-breakpoint-desktop ) {
@media ( max-width: @max-width-tablet ) {
.skin-vector-toc-experiment-treatment #toc {
display: table;
}

4
resources/skins.vector.styles/components/TableOfContentsCollapsed.less
View File

@ -6,7 +6,7 @@
display: none;
}
@media ( max-width: @width-breakpoint-desktop ) {
@media ( max-width: @max-width-tablet ) {
#vector-toc-collapsed-button,
.sidebar-toc {
z-index: @z-index-menu;
@ -78,7 +78,7 @@
}
}
@media ( min-width: @width-breakpoint-tablet ) and ( max-width: @width-breakpoint-desktop ) {
@media ( min-width: @min-width-tablet ) and ( max-width: @max-width-tablet ) {
body:not( .vector-below-page-title ) @{selector-checkbox-hack} .sidebar-toc {
// Adjust TOC for when the main menu is open, which pushes the page title to the right
left: 22px;

6
resources/skins.vector.styles/components/UserLinks.less
View File

@ -32,7 +32,7 @@
&.user-links-collapsible-item {
display: none;
@media ( min-width: @width-breakpoint-tablet ) {
@media ( min-width: @min-width-tablet ) {
display: block;
}
}
@ -57,7 +57,7 @@
// T287522#7295558: Increase the max-width of the username when viewport
// allows for it.
@media ( min-width: @width-breakpoint-desktop-wide ) {
@media ( min-width: @min-width-desktop-wide ) {
max-width: unit( 200 / @font-size-browser / @font-size-base, em );
}
}
@ -88,7 +88,7 @@
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
.user-links-collapsible-item {
@media ( min-width: @width-breakpoint-tablet ) {
@media ( min-width: @min-width-tablet ) {
display: none;
}
}

14
resources/skins.vector.styles/layouts/grid.less
View File

@ -19,7 +19,7 @@
}
.vector-layout-grid {
@media ( max-width: @width-breakpoint-tablet ) {
@media ( max-width: @max-width-mobile ) {
.mw-header {
// Should match grid-template-rows definition below.
height: 66px;
@ -28,7 +28,7 @@
}
}
@media ( min-width: @width-breakpoint-tablet ) {
@media ( min-width: @min-width-tablet ) {
.mw-page-container-inner {
display: grid;
width: 100%;
@ -60,7 +60,7 @@
}
}
@media ( min-width: @width-breakpoint-desktop ) {
@media ( min-width: @min-width-desktop ) {
.mw-page-container-inner {
grid-template-columns: ~'284px 20px 1fr';
}
@ -75,9 +75,11 @@
* 2) the main menu is closed, the sidebar TOC is hidden at the breakpoint.
* In these situation content should span the entire page.
*/
@media ( min-width: ( @width-breakpoint-tablet - 1px ) ) and ( max-width: @width-breakpoint-desktop ) {
@media ( min-width: ( @min-width-tablet ) ) and ( max-width: @max-width-tablet ) {
@{selector-sidebar-container-sidebar-closed} {
display: none;
.mw-navigation {
display: none;
}
& + .mw-content-container {
.mixin-column-full-width();
@ -90,7 +92,7 @@
& + .mw-content-container {
.mixin-column-full-width();
@media ( min-width: @width-breakpoint-tablet ) and ( max-width: @width-breakpoint-desktop ) {
@media ( min-width: ( @min-width-tablet ) ) and ( max-width: @max-width-tablet ) {
.mixin-column-align-width-hamburger-icon();
}
}

14
resources/skins.vector.styles/layouts/screen.less
View File

@ -177,7 +177,7 @@ body {
left: -@padding-horizontal-page-container;
z-index: @z-index-sidebar;
@media ( min-width: @width-breakpoint-desktop-wide ) {
@media ( min-width: @min-width-desktop-wide ) {
left: -@padding-horizontal-page-container-wide;
}
}
@ -189,7 +189,7 @@ body {
}
// Remove float at lower resolutions
@media ( max-width: @width-breakpoint-tablet ) {
@media ( max-width: @max-width-tablet ) {
.vector-toc-enabled .vector-layout-legacy #mw-panel {
float: none;
}
@ -248,12 +248,12 @@ body {
// e.g. Portrait on an iPad
min-width: @min-width-supported;
@media ( min-width: @width-breakpoint-desktop ) {
@media ( min-width: @min-width-desktop ) {
padding-left: @padding-horizontal-page-container;
padding-right: @padding-horizontal-page-container;
}
@media ( min-width: @width-breakpoint-desktop-wide ) {
@media ( min-width: @min-width-desktop-wide ) {
padding-left: @padding-horizontal-page-container-wide;
padding-right: @padding-horizontal-page-container-wide;
}
@ -398,11 +398,11 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
.vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container,
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
.vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container {
@media ( min-width: @width-breakpoint-desktop ) {
@media ( min-width: @min-width-desktop ) {
margin-left: @margin-toc-start-content;
}
@media ( min-width: @width-breakpoint-desktop-wide ) {
@media ( min-width: @min-width-desktop-wide ) {
margin-left: @margin-toc-start-content-wide;
}
}
@ -410,7 +410,7 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
/**
* Makes the sidebar full screen at lower resolutions.
*/
@media ( max-width: @width-breakpoint-tablet ) {
@media ( max-width: @max-width-tablet ) {
@{selector-workspace-container-sidebar-open} {
#mw-panel {
width: 100%;

2
skinStyles/ext.echo.styles.alert.less
View File

@ -23,7 +23,7 @@
}
}
@media ( max-width: @width-breakpoint-desktop-wide ) {
@media ( max-width: @min-width-desktop-wide ) {
.mw-echo-alert {
.echo-alert-collapse();
}