mediawiki-skins-Citizen/templates/Search.mustache
alistair3149 516ef3a1cb
feat(dropdown): revamp dropdown menu handling
Putting the dropdown content in the details elemenet have been inconsistent.
Transition are not working correctly and different browsers are not handling it well.
Furthermore, the previous implementation does not allow an always visible state of dropdown content.

Fixes: #882
2024-07-03 16:07:19 -04:00

31 lines
1.2 KiB
Plaintext

{{!
string form-action action attribute of the search form
string page-title page title of the search page
string msg-search search text label
string html-input raw HTML containing the input box of the search box
string html-random-href URL of Special:Random
string msg-randompage tooltip message for random page button
}}
<div class="citizen-search citizen-header__item citizen-dropdown">
<details id="citizen-search-details" class="citizen-dropdown-details">
{{>Search__button}}
</details>
<div role="search" id="citizen-search__card" class="citizen-search-box citizen-search__card citizen-menu__card">
<form action="{{form-action}}" class="citizen-search__form" id="searchform" autocomplete="off">
<input type="hidden" name="title" value="{{page-title}}">
<label for="searchInput">
<span class="citizen-search__icon citizen-ui-icon mw-ui-icon-wikimedia-search"></span>
<span class="screen-reader-text">{{msg-search}}</span>
</label>
{{{html-input}}}
<a
class="citizen-search__random citizen-search__formButton"
href="{{html-random-href}}"
title="{{msg-randompage}}">
<span class="citizen-ui-icon mw-ui-icon-wikimedia-die"></span>
<span class="screen-reader-text">{{msg-random}}</span>
</a>
</form>
</div>
</div>