wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-28 16:10:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Search icon should be part of search form for grade C browsers"

Browse source
This commit is contained in:
jenkins-bot 2022-02-24 00:56:04 +00:00 committed by Gerrit Code Review
parent c1e292dfff fade8ad2c2
commit 4e7642926e
5 changed files with 33 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
includes/Skins/Header.mustache
View file

@ -21,16 +21,6 @@
{{>SearchBox}}
{{/data-search-box}}
<nav class="minerva-user-navigation" aria-label="{{msg-minerva-user-navigation}}">
<div>
{{!
A button when clicked will submit the form
This is used so that on tablet devices with JS disabled the search button
passes the value of input to the search
We avoid using input[type=submit] as these cannot be easily styled as mediawiki ui icons
which is problematic in Opera Mini (see T140490)
}}
<button id="searchIcon" class="mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-search-base20 skin-minerva-search-trigger mw-ui-button mw-ui-quiet">{{msg-searchbutton}}</button>
</div>
{{^is-anon}}
<div class="minerva-user-notifications" id="pt-notifications-alert">
{{{html-minerva-user-notifications}}}

10
includes/Skins/SearchBox.mustache
View file

@ -1,7 +1,15 @@
<form action="{{form-action}}" method="get">
<form action="{{form-action}}" method="get" class="minerva-search-form">
<div class="search-box">
<input type="hidden" name="title" value="{{page-title}}"/>
<input class="search mw-ui-background-icon-search skin-minerva-search-trigger" type="search" name="search" id="searchInput"
{{{html-input-attributes}}}">
</div>
{{!
A button when clicked will submit the form
This is used so that on tablet devices with JS disabled the search button
passes the value of input to the search
We avoid using input[type=submit] as these cannot be easily styled as mediawiki ui icons
which is problematic in Opera Mini (see T140490)
}}
<button id="searchIcon" class="mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-search-base20 skin-minerva-search-trigger mw-ui-button mw-ui-quiet">{{msg-searchbutton}}</button>
</form>

1
resources/skins.minerva.base.styles/header.less
View file

@ -64,6 +64,7 @@
.search-box {
display: block;
width: @searchBoxWidth;
max-width: @searchBoxWidth;
}
}
}

14
resources/skins.minerva.base.styles/ui.less
View file

@ -69,6 +69,20 @@ main {
margin-top: @headerMarginTop;
}
//
// Search
//
.minerva-search-form {
display: flex;
width: 100%;
flex-grow: 1;
align-items: center;
> button {
margin-left: auto;
}
}
// Search input
// Used in minerva header and search overlay header
.search-box .search {

10
resources/skins.minerva.base.styles/userMenu.less
View file

@ -8,7 +8,7 @@
// Support Firefox: Needs `min-height` to vertically align icons in menu. See T233517.
min-height: @siteHeaderHeight;
height: 100%;
// Fill empty space left / start so the buttons can stay right / end.
// FIXME: for cached HTML. Merge with `.minerva-search-form + .minerva-user-navigation`.
width: 100%;
// Center vertically.
align-items: center;
@ -22,3 +22,11 @@
margin-right: -@icon-padding-md;
}
}
// Different rule for cached HTML
// Can be merged into `.minerva-user-navigation` rule one week after this
// change was introduced and minerva-search-form class is present everywhere.
.minerva-search-form + .minerva-user-navigation {
width: auto;
min-width: @menuButtonIconSize * 1.5;
}