golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Merge "Vector should support lower 500px resolution"

This commit is contained in:
jenkins-bot 2021-01-12 23:09:22 +00:00 committed by Gerrit Code Review
parent f45d8ee0c9 6f1c2cfd73
commit 4316db55d5
5 changed files with 79 additions and 25 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": "9.3 kB"
"maxSize": "9.6 kB"
},
{
"resourceModule": "skins.vector.styles.responsive",

11
resources/skins.vector.styles/MenuDropdown.less
View File

@ -153,3 +153,14 @@
outline: auto -webkit-focus-ring-color; // Webkit style
}
}
@media ( max-width: @width-breakpoint-tablet ) {
// At lower resolutions, particularly when variants are disabled
// make sure the menu does not go off the screen.
.vector-menu-dropdown {
.vector-menu-content-list {
right: 0;
left: auto;
}
}
}

6
resources/skins.vector.styles/Sidebar.less
View File

@ -80,6 +80,12 @@
.transition( transform @timing, opacity @timing, visibility @timing; );
}
@media ( max-width: @width-breakpoint-tablet ) {
.mw-sidebar {
transition: none;
}
}
// Enable sidebar button transitions.
#mw-sidebar-button {
.transition(

80
resources/skins.vector.styles/layout-default.less
View File

@ -47,13 +47,8 @@ body {
#p-search {
float: left;
margin: 0 0 0 @margin-horizontal-search;
min-width: @min-width-search;
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
width: 13.2em;
// Support: Modern browsers, responsive width.
width: 20vw;
max-width: 100%;
flex-grow: 1;
flex-basis: @min-width-search;
// #searchform is only a direct child of #p-search before wvui-loads. After
// wvui loads, `.wvui-typeahead-search` becomes the direct child and is the
@ -169,7 +164,7 @@ body {
min-height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0 @padding-horizontal-page-container;
padding: 0 ( @padding-horizontal-page-container / 2 );
background-color: @background-color-page-container;
// Establish a new block formatting context to prevent header top margin
// collapsing and causing whitespace to appear between the header and
@ -203,6 +198,14 @@ body {
max-width: @max-width-content-container;
margin-left: auto;
margin-right: auto;
// For container logic specific to special pages and history pages.
.action-history &,
.ns-special & {
// Allow the max-width of content on history/special pages to be wider than
// the max-width of content on article pages.
max-width: none;
}
}
.mw-sidebar-container {
@ -217,21 +220,6 @@ body {
padding-bottom: 82px;
}
// For container logic specific to special pages and history pages.
.action-history,
.ns-special {
// Allow the max-width of content on history/special pages to be wider than
// the max-width of content on article pages.
.mw-content-container {
max-width: none;
}
// Adjusts the content when sidebar is open regardless of the viewport width.
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
margin-left: @margin-start-content;
}
}
// We want it to appear like the sidebar is going into/coming out of
// `.mw-page-container`, but we can't use `overflow: hidden` on
// `.mw-page-container` because that will cut off the sidebar. Therefore, we
@ -249,7 +237,24 @@ body {
}
}
// Adjusts the content when sidebar is open regardless of the viewport width.
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
// For container logic specific to special pages and history pages.
.action-history &,
.ns-special & {
margin-left: @margin-start-content;
}
}
@media ( max-width: @max-width-margin-start-content ) {
#p-search {
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
width: 13.2em;
// Support: Modern browsers, responsive width.
width: 20vw;
max-width: 100%;
}
// Adjusts the content and mw-article-toolbar-container.
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
@ -282,3 +287,34 @@ body {
margin-left: auto;
}
}
@media ( min-width: @width-breakpoint-tablet ) {
#p-search {
min-width: @min-width-search-tablet;
}
.mw-page-container {
padding: 0 @padding-horizontal-page-container;
}
}
/**
* Makes the sidebar full screen at lower resolutions.
*/
@media ( max-width: @width-breakpoint-tablet ) {
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container {
#mw-panel {
width: 100%;
position: relative;
left: 0;
}
// !important as we always want to disable the margin-left on these elements
// Using !important is cleaner than having to rely on specificity involved :checked elements
.mw-content-container,
.mw-article-toolbar-container {
// stylelint-disable-next-line declaration-no-important
margin-left: 0 !important;
}
}
}

5
resources/skins.vector.styles/layout.less
View File

@ -27,7 +27,8 @@
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
// Assumes various variables defined there.
@min-width-search: unit( 350px / @font-size-browser, em );
@min-width-search: unit( 150px / @font-size-browser, em );
@min-width-search-tablet: unit( 350px / @font-size-browser, em );
@max-width-search: unit( 450px / @font-size-browser, em );
@margin-horizontal-search: unit( 40px / @font-size-browser, em );
@ -46,7 +47,7 @@
// the width of the container if you exclude consideration for search
@min-width-container-base: @padding-horizontal-page-container-ems + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @padding-horizontal-page-container-ems;
@min-width-supported: @min-width-container-base + @min-width-search;
@min-width-supported: 500px - ( 2 * @padding-horizontal-page-container );
@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools;
@background-color-secondary--modern: #f8f9fa;