From 326e11dfbfab3f3b2d35469e683bd45a6b61ff08 Mon Sep 17 00:00:00 2001 From: Nicholas Ray Date: Thu, 9 Sep 2021 15:03:15 -0600 Subject: [PATCH] Scope styles that should only apply to the main header to Header.less We have many styles related to the layout and visibility of search that are only useful in the context of the main header. Since many of these elements have classes that will also be in the sticky header, we should scope these rules to the main header so that we avoid an uphill battle of styles trying to override eachother. Additional changes: * We previously had a mix of #p-search and .vector-search-box selectors for the same element in the CSS. Header.less now only uses .vector-searchbox to avoid specificity wars. * Removed nearly all of the #p-search rules previously found on L147 - L167 in screen.less after observing nothing relatively bad happening when they were removed. Bug: T289724 Change-Id: I2e6c269e29717cd20d8acfaddc3631ea1b8fedfa --- resources/common/variables.less | 1 + .../components/Header.less | 89 ++++++++++++++ .../components/VueEnhancedSearchBox.less | 2 +- .../skins.vector.styles/layouts/screen.less | 114 +----------------- resources/skins.vector.styles/skin.less | 1 + 5 files changed, 93 insertions(+), 114 deletions(-) create mode 100644 resources/skins.vector.styles/components/Header.less diff --git a/resources/common/variables.less b/resources/common/variables.less index 7c2d1f0..3c842e2 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -116,6 +116,7 @@ // Derived from @spacing-start-typeahead-search-figure + @spacing-end-typeahead-search-figure in WVUI // https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#645 @size-search-expand: 24px; +@margin-end-search: 12px; // language button @height-lang-button: unit( 32 / @font-size-browser, em ); diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less new file mode 100644 index 0000000..0951e53 --- /dev/null +++ b/resources/skins.vector.styles/components/Header.less @@ -0,0 +1,89 @@ +@import '../../common/variables.less'; +@import 'mediawiki.mixins.less'; + +// Header sizes defined in the description of T246170 and comment T246170#5957100 +@padding-vertical-header: 0.125em; +@margin-top-header: 0.625em; +@margin-bottom-header: 0.3125em; + +// Logo sizes per specification in T245190. +@height-logo-icon: 3.125em; + +// Canonical version of spec: T270202 +@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em +@min-width-search-desktop: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em +@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em + +.mw-header { + // A min-height is set to account for projects where no icon is set. + min-height: @height-logo-icon; + margin: @margin-top-header 0 @margin-bottom-header; + padding: @padding-vertical-header 0; + // Vertical centering of header elements (IE>=11), requires flex. + // Non-flex fallback for IE<=9: float rule on the child elements. + .flex-display(); + flex-wrap: nowrap; + // https://caniuse.com/#search=align-items + align-items: center; + + .vector-search-box { + float: left; + z-index: @z-index-menu; + flex-grow: 1; + } + + @media ( min-width: @width-breakpoint-desktop ) { + .vector-search-box { + margin-left: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em + margin-right: @margin-end-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%; + min-width: @min-width-search-desktop; + flex-basis: @min-width-search; + + > div > #searchform, + .wvui-typeahead-search { + max-width: @max-width-search; + } + } + } + + /** + * Toggles the visibility of the search box at lower resolutions. + */ + @media ( max-width: @width-breakpoint-desktop ) { + &.vector-header-search-toggled { + #mw-sidebar-button, + .mw-logo, + .search-toggle { + display: none; + } + + .vector-search-box-collapses > div { + display: block; + } + + .vector-search-box { + // T284242#7206507: Widen the suggestion results to the edge of the search + // button at small resolutions. + position: relative; + margin-left: @padding-horizontal-tabs; + margin-right: @margin-end-search; + } + + // Increase the start margin of the search box to account for the input + // expanding on focus. + .vector-search-box-show-thumbnail { + margin-left: @size-search-expand + @padding-horizontal-tabs; + } + + .wvui-typeahead-search__wrapper { + position: static; + } + } + } +} diff --git a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less index 944d140..0cb1c10 100644 --- a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less +++ b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less @@ -18,7 +18,7 @@ // Search container // We have to put those styles outside `.skin-vector-search-vue`, // as we can't address no-JS modern and Vue enhanced otherwise. -#p-search { +.vector-search-box { // Use Vector's base font-size, as this is a component outside of `.vector-body`. font-size: @font-size-base; // Support IE 9-11, Trident cuts values 2 digits after decimal point. diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index c3bb551..5782891 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -8,44 +8,17 @@ @import '../../common/variables.less'; @import 'mediawiki.mixins.less'; -// Header - -// Header sizes defined in the description of T246170 and comment T246170#5957100 +// Sidebar @width-grid-column-one: 11em; -@padding-vertical-header: 0.125em; -@margin-top-header: 0.625em; -@margin-bottom-header: 0.3125em; -@height-header: - @height-logo-icon + - @margin-top-header + - @margin-bottom-header + - 2 * @padding-vertical-header; -// 3.125em + 0.625em + 0.3125em + 0.25em = 4.3125em // Menu button @margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em); // 0.75em @ 16 -// Logo - -// Logo sizes per specification in T245190. -@height-logo-icon: 3.125em; - // 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 ); // 11.25em @ 16 -// Search - -// Canonical version of spec: T270202 -// This assumes the presence of variables inside screen.less. DO NOT import it separately. -// Assumes various variables defined there. -@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em -@min-width-search-desktop: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em -@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em -@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em -@margin-end-search: 12px; - // Sidebar @margin-top-sidebar: 0.5em; @@ -128,44 +101,11 @@ body { } .mw-header { - // A min-height is set to account for projects where no icon is set. - min-height: @height-logo-icon; - margin: @margin-top-header 0 @margin-bottom-header; - padding: @padding-vertical-header 0; - // Vertical centering of header elements (IE>=11), requires flex. - // Non-flex fallback for IE<=9: float rule on the child elements. - .flex-display(); - flex-wrap: nowrap; - // https://caniuse.com/#search=align-items - align-items: center; // allow z-index to apply so search results overlay article position: relative; z-index: @z-index-header; } -/* Searchbox */ -#p-search { - float: left; - margin: 0 0 0 @margin-horizontal-search; - z-index: @z-index-menu; - flex-grow: 1; - - // #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 - // element where these styles should apply. - // FIXME: The first selector (> #searchform) - // is for cached HTML. Should be removed when T276566 has been in production. - > #searchform, - > div > #searchform, - .wvui-typeahead-search { - // Border-box sizing is used for a smooth transition from legacy to Vue - // search. The width of the container should stay the same before/after the - // transition. - .box-sizing( border-box ); - margin-left: 0; - } -} - /* Main column */ .mw-body, #mw-data-after-content, @@ -378,64 +318,12 @@ body { } @media ( min-width: @width-breakpoint-desktop ) { - #p-search { - margin: 0 @margin-end-search 0 @margin-horizontal-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%; - min-width: @min-width-search-desktop; - flex-basis: @min-width-search; - flex-grow: 1; - - > div > #searchform, - .wvui-typeahead-search { - max-width: @max-width-search; - } - } - .mw-page-container { padding-left: @padding-horizontal-page-container; padding-right: @padding-horizontal-page-container; } } -/** - * Toggles the visibility of the search box at lower resolutions. - */ -@media ( max-width: @width-breakpoint-desktop ) { - .vector-header-search-toggled { - #mw-sidebar-button, - .mw-logo, - .search-toggle { - display: none; - } - - .vector-search-box-collapses > div { - display: block; - } - - #p-search { - // T284242#7206507: Widen the suggestion results to the edge of the search - // button at small resolutions. - position: relative; - margin-left: @padding-horizontal-tabs; - margin-right: @margin-end-search; - } - - // Increase the start margin of the search box to account for the input - // expanding on focus. - #p-search.vector-search-box-show-thumbnail { - margin-left: @size-search-expand + @padding-horizontal-tabs; - } - - .wvui-typeahead-search__wrapper { - position: static; - } - } -} - /** * Makes the sidebar full screen at lower resolutions. */ diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less index d5e91d4..4d51e9e 100644 --- a/resources/skins.vector.styles/skin.less +++ b/resources/skins.vector.styles/skin.less @@ -16,6 +16,7 @@ @import './components/Sidebar.less'; @import './components/LanguageButton.less'; @import './components/UserLinks.less'; + @import './components/Header.less'; @import './components/StickyHeader.less'; }