StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-24 06:24:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(search): ♻️ simplify search box structure

Browse source
This commit is contained in:
alistair3149 2023-07-10 15:13:21 -04:00
parent 25169379a9
commit d0b1b8982c
No known key found for this signature in database
3 changed files with 24 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/skins.citizen.search/skins.citizen.search.less
View file

@ -3,6 +3,7 @@
.citizen-typeahead {
position: absolute;
top: 100%;
overflow: auto;
width: 100%;
max-height: ~'calc( var( --header-card-maxheight ) - var( --height-search-bar ) )';

39
resources/skins.citizen.styles/components/Search.less
View file

@ -9,12 +9,10 @@
top: 0;
right: 0;
left: 0;
display: flex;
width: var( --width-search-bar );
max-width: ~'calc(100vw - var( --padding-page ) )';
height: var( --height-search-bar );
margin: var( --space-md ) auto;
gap: 0.25rem;
.citizen-card();
.citizen-card-hide( top center, '', false );
.citizen-card-transition();
@ -27,30 +25,9 @@
background-size: 1rem;
}
}
/**
* Loading indicator for searchbox
* See common/progressbar.less
**/
&.citizen-loading::after {
position: absolute;
top: 100%;
}
}
&__icon,
&__random {
// So that searchInput has the full width,
// and search suggestions will match that width
position: absolute;
}
&__icon {
left: 0;
}
&__random {
right: 0;
border-radius: var( --border-radius--small );
.citizen-ui-icon::before {
@ -77,13 +54,21 @@
}
&__form {
flex-grow: 1;
display: flex;
/**
* Loading indicator for searchbox
* See common/progressbar.less
**/
&.citizen-loading::after {
position: absolute;
top: 100%;
}
}
#searchInput {
width: 100%;
height: 100%;
padding: 0 var( --height-search-bar );
flex-grow: 1;
padding: 0;
border: 0; // Cancel default border
appearance: none;
background: transparent; // Cancel default background

8
templates/Search.mustache
View file

@ -16,12 +16,13 @@
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>
<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}}}
</form>
<a
class="citizen-search__random"
href="{{html-random-href}}"
@ -29,5 +30,6 @@
<span class="citizen-ui-icon mw-ui-icon-wikimedia-die"></span>
<span class="screen-reader-text">{{msg-random}}</span>
</a>
</form>
</div>
</div>