mediawiki-skins-Citizen/templates/Search.mustache

{{!
	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-menu-checkbox-container">
	<input
		type="checkbox" 
		id="citizen-search__checkbox" 
		class="citizen-menu-checkbox-checkbox"
		role="button"
		aria-labelledby="citizen-search__buttonCheckbox"
		aria-haspopup="true">
	{{>Search__button}}
	<div role="search" class="citizen-search-box citizen-search__card citizen-menu-checkbox-target">
		<span class="citizen-search__icon citizen-ui-icon mw-ui-icon-wikimedia-search"></span>
		<form action="{{form-action}}" class="citizen-search__form" id="searchform" autocomplete="off">
			<input type="hidden" name="title" value="{{page-title}}">
			<label class="screen-reader-text" for="searchInput">{{msg-search}}</label>
			{{{html-input}}}
		</form>
		<a
			class="citizen-search__random"
			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>
	</div>
</div>
refactor(core): clean up search box implementation * Clean up DOM structure * Clean up HTML classes * Use relative units * Remove unnessecary CSS 2022-05-10 03:54:00 +00:00			`{{!`
			`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`
refactor(core): remove redundant message keys 2022-05-26 21:57:57 +00:00			`string msg-randompage tooltip message for random page button`
refactor(core): clean up search box implementation * Clean up DOM structure * Clean up HTML classes * Use relative units * Remove unnessecary CSS 2022-05-10 03:54:00 +00:00			`}}`
refactor(core): ♻️ rename mw-checkbox-hack class to citizen-menu-checkbox 2023-01-26 01:25:40 +00:00			`<div class="citizen-search citizen-header__item citizen-menu-checkbox-container">`
refactor(core): move checkboxHack checkboxes into container 2022-05-10 15:15:34 +00:00			`<input`
			`type="checkbox"`
			`id="citizen-search__checkbox"`
refactor(core): ♻️ rename mw-checkbox-hack class to citizen-menu-checkbox 2023-01-26 01:25:40 +00:00			`class="citizen-menu-checkbox-checkbox"`
feat(core): update checkboxHack API 2022-05-12 01:32:36 +00:00			`role="button"`
			`aria-labelledby="citizen-search__buttonCheckbox"`
			`aria-haspopup="true">`
feat(core): ✨ use MW core checkboxHack instead We no longer need to emulate the same feature when it is in core 2023-01-26 00:40:52 +00:00			`{{>Search__button}}`
refactor(core): ♻️ rename mw-checkbox-hack class to citizen-menu-checkbox 2023-01-26 01:25:40 +00:00			`<div role="search" class="citizen-search-box citizen-search__card citizen-menu-checkbox-target">`
feat(core): ✨ allow multiple search components on the same page This will allow the search suggestion to hook up to multiple search boxes with `.citizen-search-box` as container. Do note that the default Citizen suggestion is hardcoded for the primary search, so it only works for the old core search suggestion module. This is also a prereq for implementing the Codex search like the one from Vector. 2022-12-02 22:35:15 +00:00			`<span class="citizen-search__icon citizen-ui-icon mw-ui-icon-wikimedia-search"></span>`
refactor(search): ♻️ simplify typeahead styles 2023-03-01 20:27:29 +00:00			`<form action="{{form-action}}" class="citizen-search__form" id="searchform" autocomplete="off">`
feat(core): ✨ allow multiple search components on the same page This will allow the search suggestion to hook up to multiple search boxes with `.citizen-search-box` as container. Do note that the default Citizen suggestion is hardcoded for the primary search, so it only works for the old core search suggestion module. This is also a prereq for implementing the Codex search like the one from Vector. 2022-12-02 22:35:15 +00:00			`<input type="hidden" name="title" value="{{page-title}}">`
			`<label class="screen-reader-text" for="searchInput">{{msg-search}}</label>`
			`{{{html-input}}}`
			`</form>`
refactor(core): clean up search box implementation * Clean up DOM structure * Clean up HTML classes * Use relative units * Remove unnessecary CSS 2022-05-10 03:54:00 +00:00			`<a`
			`class="citizen-search__random"`
			`href="{{html-random-href}}"`
refactor(core): remove redundant message keys 2022-05-26 21:57:57 +00:00			`title="{{msg-randompage}}">`
feat(core): ✨ migrate misc icons to use RIL icon module 2022-11-03 22:30:41 +00:00			`<span class="citizen-ui-icon mw-ui-icon-wikimedia-die"></span>`
refactor(core): clean up search box implementation * Clean up DOM structure * Clean up HTML classes * Use relative units * Remove unnessecary CSS 2022-05-10 03:54:00 +00:00			`<span class="screen-reader-text">{{msg-random}}</span>`
			`</a>`
feat(core): ✨ allow multiple search components on the same page This will allow the search suggestion to hook up to multiple search boxes with `.citizen-search-box` as container. Do note that the default Citizen suggestion is hardcoded for the primary search, so it only works for the old core search suggestion module. This is also a prereq for implementing the Codex search like the one from Vector. 2022-12-02 22:35:15 +00:00			`</div>`
refactor(core): clean up search box implementation * Clean up DOM structure * Clean up HTML classes * Use relative units * Remove unnessecary CSS 2022-05-10 03:54:00 +00:00			`</div>`