From 6f1c2cfd73cce582f0e6f2df9b88cf2486080ef7 Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Thu, 1 Oct 2020 15:55:52 -0700 Subject: [PATCH] Vector should support lower 500px resolution * 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 --- bundlesize.config.json | 2 +- .../skins.vector.styles/MenuDropdown.less | 11 +++ resources/skins.vector.styles/Sidebar.less | 6 ++ .../skins.vector.styles/layout-default.less | 80 ++++++++++++++----- resources/skins.vector.styles/layout.less | 5 +- 5 files changed, 79 insertions(+), 25 deletions(-) diff --git a/bundlesize.config.json b/bundlesize.config.json index 1cb4cdeac..80f8be334 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -5,7 +5,7 @@ }, { "resourceModule": "skins.vector.styles", - "maxSize": "9.3 kB" + "maxSize": "9.6 kB" }, { "resourceModule": "skins.vector.styles.responsive", diff --git a/resources/skins.vector.styles/MenuDropdown.less b/resources/skins.vector.styles/MenuDropdown.less index 52245805c..c80849b0e 100644 --- a/resources/skins.vector.styles/MenuDropdown.less +++ b/resources/skins.vector.styles/MenuDropdown.less @@ -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; + } + } +} diff --git a/resources/skins.vector.styles/Sidebar.less b/resources/skins.vector.styles/Sidebar.less index 37bcbc8d1..b9dd9faa5 100644 --- a/resources/skins.vector.styles/Sidebar.less +++ b/resources/skins.vector.styles/Sidebar.less @@ -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( diff --git a/resources/skins.vector.styles/layout-default.less b/resources/skins.vector.styles/layout-default.less index 8b828a8b5..fff3b6a3e 100644 --- a/resources/skins.vector.styles/layout-default.less +++ b/resources/skins.vector.styles/layout-default.less @@ -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; + } + } +} diff --git a/resources/skins.vector.styles/layout.less b/resources/skins.vector.styles/layout.less index 0949e2a9b..6bcbf3270 100644 --- a/resources/skins.vector.styles/layout.less +++ b/resources/skins.vector.styles/layout.less @@ -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;