wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 01:20:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Vector should support lower 500px resolution

Browse source 
* Lower the min-width from Vector to 500px

At lower resolution per mock:
* Tabs converge into single grouping
* Search input is 150px
* Sidebar rushes content below

Drop rule for mw-content-container for special pages and history as it is already
accounted for in .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container
rule.

Bug: T264218
Change-Id: I14ee75bd173fb2de1e33067f95ce09deba5bf27a
This commit is contained in:
jdlrobson 2020-10-01 15:55:52 -07:00
parent 13e044ec68
commit 6f1c2cfd73
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 {
margin-left: 0;
@ -161,7 +156,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
@ -195,6 +190,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 {
@ -209,21 +212,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
@ -241,7 +229,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 {
@ -270,3 +275,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;