From 717506b9c0edc4b6d5699858a415921aee88011a Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Fri, 2 Oct 2020 10:43:21 -0700 Subject: [PATCH] Cleanup: Merge layout-search-header.less into default layout rules Dropped all usages of the no longer applicable `skin-vector-search-header-legacy` class. Bug: T258116 Change-Id: I16a5cf8dda2ab84ff4b505d5a368587190c409cd --- resources/skins.vector.styles/Sidebar.less | 3 +- .../skins.vector.styles/layout-default.less | 32 ++++++++-- .../skins.vector.styles/layout-max-width.less | 41 +----------- .../layout-search-header.less | 63 ------------------- resources/skins.vector.styles/layout.less | 28 ++++++++- 5 files changed, 57 insertions(+), 110 deletions(-) delete mode 100644 resources/skins.vector.styles/layout-search-header.less diff --git a/resources/skins.vector.styles/Sidebar.less b/resources/skins.vector.styles/Sidebar.less index 43aa6c4..37bcbc8 100644 --- a/resources/skins.vector.styles/Sidebar.less +++ b/resources/skins.vector.styles/Sidebar.less @@ -61,8 +61,7 @@ // Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the // checkbox input for the menu panel. -.skin-vector-search-header-legacy #mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar, -.skin-vector-search-header #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar { +#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar { // Turn off presentation so that screen readers get the same effect as visually hiding. // Visibility and opacity can be animated. If animation is unnecessary, use `display: none` // instead to avoid hidden rendering. diff --git a/resources/skins.vector.styles/layout-default.less b/resources/skins.vector.styles/layout-default.less index 9968004..85c8a37 100644 --- a/resources/skins.vector.styles/layout-default.less +++ b/resources/skins.vector.styles/layout-default.less @@ -2,8 +2,6 @@ // Default layout for Modern Vector. // -@margin-horizontal-sidebar-button-icon: 12px; - body { // General background/foreground color definition as one exception to the rule. background-color: @background-color-base; @@ -49,13 +47,19 @@ body { /* Searchbox */ #p-search { float: left; - margin: 0.5em 0.5em 0 0.5em; - min-width: 5em; + 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: 20em; + max-width: 100%; + flex-grow: 1; + + #searchform { + margin-left: 0; + max-width: @max-width-search; + } } /* Main column */ @@ -97,6 +101,15 @@ body { float: right; } +#p-personal { + flex-grow: 1; + flex-basis: @min-width-personal-tools; + margin-left: @margin-horizontal-search; + + // Support IE9: This is reset in @support query below if Flexbox is available. + float: right; +} + #mw-sidebar-button { float: left; // Browser: IE9 support - button as flex-child fallback. margin-left: -@margin-horizontal-sidebar-button-icon; @@ -112,3 +125,12 @@ body { padding-left: @padding-left-sidebar; z-index: @z-index-sidebar; } + +// At low resolutions the search must be pushed to the right of the screen +// We use @width-comfortable to determine this threshold as we know it's not possible for +// personal tools to be on the same line at this resolution. +@media ( max-width: @width-comfortable ) { + #p-search #searchform { + margin-left: auto; + } +} diff --git a/resources/skins.vector.styles/layout-max-width.less b/resources/skins.vector.styles/layout-max-width.less index 02c6644..943ed4b 100644 --- a/resources/skins.vector.styles/layout-max-width.less +++ b/resources/skins.vector.styles/layout-max-width.less @@ -59,29 +59,6 @@ margin-left: 0; } - &.skin-vector-search-header-legacy #mw-head { - width: auto; - left: 0; - right: 0; - } - - &.skin-vector-search-header-legacy #left-navigation { - margin-top: 0; - margin-bottom: 0; - } - - &.skin-vector-search-header-legacy #right-navigation { - margin-top: 0; - } - - &.skin-vector-search-header-legacy #p-personal { - right: 0; - } - - &.skin-vector-search-header-legacy #p-search { - margin-right: 0; - } - #p-namespaces { background-image: none; padding-left: 0; @@ -154,10 +131,6 @@ margin-right: auto; } - &.skin-vector-search-header-legacy .mw-article-toolbar-container { - margin-top: @height-header; - } - &.skin-vector-search-header .mw-article-toolbar-container { // We want to keep the max-width of the article-toolbar-container the // same max-width as the article page's content container in order to @@ -189,14 +162,6 @@ max-width: none; } - // We want to keep the max-width of the article-toolbar-container the - // same max-width as the article page's content container in order to - // prevent it from moving when going from an article page to a - // history/special page. - &.skin-vector-search-header-legacy .mw-article-toolbar-container { - max-width: @max-width-content-container; - } - // 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; @@ -208,8 +173,7 @@ // `.mw-page-container` because that will cut off the sidebar. Therefore, we // calculate the maximum distance from the start of `mw-page-container` to the // start of the sidebar. - &.skin-vector-search-header-legacy #mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar, - &.skin-vector-search-header #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar { + #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar { .transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) ); } @@ -226,8 +190,7 @@ @media ( max-width: @max-width-margin-start-content ) { // Adjusts the content and mw-article-toolbar-container. .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container, - &.skin-vector-search-header-legacy .mw-checkbox-hack-checkbox:checked ~ #mw-navigation .mw-content-container, - &.skin-vector-search-header .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container { + .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container { margin-left: @margin-start-content; } diff --git a/resources/skins.vector.styles/layout-search-header.less b/resources/skins.vector.styles/layout-search-header.less deleted file mode 100644 index c6dedb8..0000000 --- a/resources/skins.vector.styles/layout-search-header.less +++ /dev/null @@ -1,63 +0,0 @@ -// 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 ); -@max-width-search: unit( 450px / @font-size-browser, em ); -@margin-horizontal-search: unit( 56px / @font-size-browser, em ); - -// The logo is variable width but typically consists of: -// - a icon (50x50) -// - a wordmark (approx 120px) -@min-width-logo: unit( 180px / @font-size-browser, em ); - -@min-width-personal-tools: unit( 300px / @font-size-browser, em ); - -@padding-horizontal-page-container: 30px; -@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em ); -@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em ); -@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em ); - -// 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; -@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools; - -@height-personal-tools: 2em; - -.skin-vector-search-header { - - // Header components - #p-search { - flex-grow: 1; - // Support IE9: float will be disabled if display flex is supported - float: left; - // Override values to reflect new behaviour. - min-width: @min-width-search; - max-width: 100%; - margin: 0 0 0 @margin-horizontal-search; - - #searchform { - margin-left: 0; - max-width: @max-width-search; - } - } - - #p-personal { - flex-grow: 1; - flex-basis: @min-width-personal-tools; - margin-left: @margin-horizontal-search; - - // Support IE9: This is reset in @support query below if Flexbox is available. - float: right; - } - - // At low resolutions the search must be pushed to the right of the screen - // We use @width-comfortable to determine this threshold as we know it's not possible for - // personal tools to be on the same line at this resolution. - @media ( max-width: @width-comfortable ) { - #p-search #searchform { - margin-left: auto; - } - } -} diff --git a/resources/skins.vector.styles/layout.less b/resources/skins.vector.styles/layout.less index 18d3b9c..78216db 100644 --- a/resources/skins.vector.styles/layout.less +++ b/resources/skins.vector.styles/layout.less @@ -21,6 +21,33 @@ 2 * @padding-vertical-header; @width-grid-column-one: 11em; @padding-horizontal-page-container: 30px; +@margin-horizontal-sidebar-button-icon: 12px; +// 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 ); +@max-width-search: unit( 450px / @font-size-browser, em ); +@margin-horizontal-search: unit( 56px / @font-size-browser, em ); + +// The logo is variable width but typically consists of: +// - a icon (50x50) +// - a wordmark (approx 120px) +@min-width-logo: unit( 180px / @font-size-browser, em ); + +@min-width-personal-tools: unit( 300px / @font-size-browser, em ); + +@padding-horizontal-page-container: 30px; +@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em ); +@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em ); +@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em ); + +// 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; +@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools; + +@height-personal-tools: 2em; // Default layout. @import 'layout-default.less'; @@ -29,4 +56,3 @@ // Feature flag modifications to layout (additive) // @import 'layout-max-width.less'; -@import 'layout-search-header.less';