Address cache related FIXMEs
Follows up the sticky header search refactors
in caed16e
Change-Id: I5832bc04f0c675ff8bc1a00fff17b6b9f8399e6e
This commit is contained in:
parent
8419d063cc
commit
95e3271e79
|
@ -164,9 +164,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: `mw-portlet-` selectors are for cached HTML. Remove after 1 week. (T283757)
|
|
||||||
.mw-portlet-variants,
|
|
||||||
.mw-portlet-cactions,
|
|
||||||
.vector-menu-dropdown-noicon {
|
.vector-menu-dropdown-noicon {
|
||||||
h3 {
|
h3 {
|
||||||
// `padding-top` needs to scale with font-size.
|
// `padding-top` needs to scale with font-size.
|
||||||
|
|
|
@ -4,9 +4,7 @@
|
||||||
|
|
||||||
// Defined as `div`.
|
// Defined as `div`.
|
||||||
// Provide extra element for gadgets due to `form` already carrying an `id`.
|
// Provide extra element for gadgets due to `form` already carrying an `id`.
|
||||||
// FIXME: Remove #simpleSearch when cache has cleared
|
.vector-search-box-inner {
|
||||||
.vector-search-box-inner,
|
|
||||||
#simpleSearch {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
@ -15,8 +13,6 @@
|
||||||
// Note that these rules only apply to the non-Vue enabled search input field.
|
// Note that these rules only apply to the non-Vue enabled search input field.
|
||||||
// When Vue.js has loaded this element will no longer be in the page and subsituted with
|
// When Vue.js has loaded this element will no longer be in the page and subsituted with
|
||||||
// a WVUI element.
|
// a WVUI element.
|
||||||
// FIXME: Remove searchInput selector when cache has cleared.
|
|
||||||
#searchInput,
|
|
||||||
.vector-search-box-input {
|
.vector-search-box-input {
|
||||||
background-color: rgba( 255, 255, 255, 0.5 );
|
background-color: rgba( 255, 255, 255, 0.5 );
|
||||||
color: @color-base--emphasized;
|
color: @color-base--emphasized;
|
||||||
|
@ -41,16 +37,12 @@
|
||||||
// Support: Firefox.
|
// Support: Firefox.
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
|
|
||||||
// FIXME: Remove #simpleSearch when cache has cleared
|
.vector-search-box-inner:hover & {
|
||||||
.vector-search-box-inner:hover &,
|
|
||||||
#simpleSearch:hover & {
|
|
||||||
border-color: @colorGray7;
|
border-color: @colorGray7;
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: #simpleSearch can be removed when cache has cleared.
|
|
||||||
&:focus,
|
&:focus,
|
||||||
.vector-search-box-inner:hover &:focus,
|
.vector-search-box-inner:hover &:focus {
|
||||||
#simpleSearch:hover &:focus {
|
|
||||||
outline: 0;
|
outline: 0;
|
||||||
border-color: @border-color-base--focus;
|
border-color: @border-color-base--focus;
|
||||||
box-shadow: @box-shadow-base--focus;
|
box-shadow: @box-shadow-base--focus;
|
||||||
|
|
|
@ -61,8 +61,7 @@ function initApp( searchForms ) {
|
||||||
*/
|
*/
|
||||||
function main( document ) {
|
function main( document ) {
|
||||||
var
|
var
|
||||||
// FIXME: Use .vector-search-box-form instead when cache allows.
|
searchForms = document.querySelectorAll( '.vector-search-box-form' );
|
||||||
searchForms = document.querySelectorAll( '.vector-search-box form' );
|
|
||||||
|
|
||||||
initApp( searchForms );
|
initApp( searchForms );
|
||||||
}
|
}
|
||||||
|
|
|
@ -128,9 +128,6 @@ body {
|
||||||
// Defined as `div`.
|
// Defined as `div`.
|
||||||
// Provide extra element for gadgets due to `form` already carrying an `id`.
|
// Provide extra element for gadgets due to `form` already carrying an `id`.
|
||||||
// FIXME: This selector requires knowledge of the internals of the search component
|
// FIXME: This selector requires knowledge of the internals of the search component
|
||||||
// FIXME: #simpleSearch selector can be removed when cache has cleared.
|
|
||||||
// and should not be used here.
|
|
||||||
#simpleSearch,
|
|
||||||
.vector-search-box-inner {
|
.vector-search-box-inner {
|
||||||
min-width: 5em;
|
min-width: 5em;
|
||||||
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
|
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
|
||||||
|
@ -182,8 +179,6 @@ body {
|
||||||
padding-left: 0.5em;
|
padding-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: p-search is for cached HTML only. Can be removed in 1 week.
|
|
||||||
#p-search,
|
|
||||||
.vector-search-box {
|
.vector-search-box {
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,9 +45,7 @@
|
||||||
min-width: @min-width-search-desktop;
|
min-width: @min-width-search-desktop;
|
||||||
flex-basis: @min-width-search;
|
flex-basis: @min-width-search;
|
||||||
|
|
||||||
// FIXME: Modify to use .vector-search-box-form when cache allows.
|
&-form,
|
||||||
// When changing check the specificity is strong enough so that is still applies.
|
|
||||||
> div > form,
|
|
||||||
.wvui-typeahead-search {
|
.wvui-typeahead-search {
|
||||||
max-width: @max-width-search;
|
max-width: @max-width-search;
|
||||||
}
|
}
|
||||||
|
|
|
@ -78,11 +78,6 @@
|
||||||
.mw-ui-icon ~ span {
|
.mw-ui-icon ~ span {
|
||||||
.mixin-screen-reader-text();
|
.mixin-screen-reader-text();
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: For cached HTML only.
|
|
||||||
&.mw-ui-icon > span {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.vector-menu-content {
|
.vector-menu-content {
|
||||||
|
@ -103,14 +98,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: Remove `li` selector when T289163 is addressed.
|
|
||||||
li,
|
|
||||||
.mw-list-item {
|
.mw-list-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: Remove `li > a` selector when T289163 is addressed.
|
|
||||||
li > a,
|
|
||||||
.vector-menu-content-item,
|
.vector-menu-content-item,
|
||||||
.mw-list-item > a {
|
.mw-list-item > a {
|
||||||
// Overrides .mw-ui-icon's `min-height` property to have a computed
|
// Overrides .mw-ui-icon's `min-height` property to have a computed
|
||||||
|
|
|
@ -27,25 +27,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Typeahead search elements
|
// Typeahead search elements
|
||||||
// FIXME: remove ID selectors when cache has cleared.
|
|
||||||
#searchInput,
|
|
||||||
#searchButton,
|
|
||||||
#mw-searchButton,
|
|
||||||
.vector-search-box-vue .vector-search-box-input,
|
.vector-search-box-vue .vector-search-box-input,
|
||||||
.vector-search-box-vue .searchButton {
|
.vector-search-box-vue .searchButton {
|
||||||
// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
|
// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: remove #searchInput selector when cache has cleared.
|
.vector-search-box-vue .vector-search-box-input {
|
||||||
.vector-search-box-vue .vector-search-box-input,
|
|
||||||
#searchInput {
|
|
||||||
height: @size-base;
|
height: @size-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: Remove searchButton when cache has cleared.
|
.vector-search-box-vue .searchButton {
|
||||||
.vector-search-box-vue .searchButton,
|
|
||||||
#searchButton {
|
|
||||||
background-size: @background-size-x-search-button auto;
|
background-size: @background-size-x-search-button auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -69,9 +61,7 @@
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: Remove #searchInput selector when cache has cleared.
|
.vector-search-box-input {
|
||||||
.vector-search-box-input,
|
|
||||||
#searchInput {
|
|
||||||
padding-left: @size-search-figure;
|
padding-left: @size-search-figure;
|
||||||
// Derived from @padding-input-text in WVUI's Input component.
|
// Derived from @padding-input-text in WVUI's Input component.
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
|
@ -102,13 +92,9 @@
|
||||||
.transition( none );
|
.transition( none );
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: .p-search--show-thumbnail selector is for cached HTML relating to T276566.
|
|
||||||
.p-search--show-thumbnail,
|
|
||||||
.vector-search-box-show-thumbnail {
|
.vector-search-box-show-thumbnail {
|
||||||
// Recreate WVUI expanding input.
|
// Recreate WVUI expanding input.
|
||||||
// FIXME: Remove #searchInput selector when cache has cleared.
|
.vector-search-box-input:focus {
|
||||||
.vector-search-box-input:focus,
|
|
||||||
#searchInput:focus {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
|
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
|
||||||
padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )';
|
padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )';
|
||||||
|
@ -117,10 +103,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reposition search icon for expanded input.
|
// Reposition search icon for expanded input.
|
||||||
// FIXME: Remove #searchInput selectors when cache has cleared.
|
.vector-search-box-input:focus ~ .searchButton {
|
||||||
.vector-search-box-input:focus ~ .searchButton,
|
|
||||||
#searchInput:focus ~ #searchButton,
|
|
||||||
#searchInput:focus ~ #mw-searchButton {
|
|
||||||
// Derived from
|
// Derived from
|
||||||
// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655
|
// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655
|
||||||
// (12px of space between the border and the icon) with 1px to account for the focused input border.
|
// (12px of space between the border and the icon) with 1px to account for the focused input border.
|
||||||
|
@ -129,8 +112,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update search loader to match width and position of WVUI expanding input.
|
// Update search loader to match width and position of WVUI expanding input.
|
||||||
// FIXME: Remove #simpleSearch selector when cache has cleared.
|
|
||||||
#simpleSearch.search-form__loader:after,
|
|
||||||
.vector-search-box-inner.search-form__loader:after {
|
.vector-search-box-inner.search-form__loader:after {
|
||||||
width: ~'calc( 100% + @{size-search-expand} )';
|
width: ~'calc( 100% + @{size-search-expand} )';
|
||||||
left: ~'calc( -1 * @{size-search-expand} )';
|
left: ~'calc( -1 * @{size-search-expand} )';
|
||||||
|
|
|
@ -127,8 +127,7 @@ body {
|
||||||
.mw-body #p-lang-btn {
|
.mw-body #p-lang-btn {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
// FIXME: [ id='bodyContent' ] selector needed for cached HTML.
|
|
||||||
[ id='bodyContent' ],
|
|
||||||
.vector-body {
|
.vector-body {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: @z-index-base;
|
z-index: @z-index-base;
|
||||||
|
|
Loading…
Reference in New Issue