StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-09-23 10:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(search): ♻️ simplify typeahead styles

Browse source
This commit is contained in:
alistair3149 2023-03-01 15:27:29 -05:00
parent 65304f99af
commit b8a1d9c224
No known key found for this signature in database
4 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,9 +7,9 @@
width: 100%;
max-height: ~'calc( var( --header-card-maxheight ) - var( --height-search-bar ) )';
box-sizing: border-box;
border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
border-top: 0; // Reset citizen-card style
margin: 0; // Reset <ol> styles
border-bottom-left-radius: var( --border-radius--medium );
border-bottom-right-radius: var( --border-radius--medium );
overscroll-behavior: contain;
.citizen-card( false );
.citizen-card-hide( 50% 0, Y, false );
@ -187,11 +187,24 @@
background-color: var( --color-surface-1 );
}
&--expanded {
.citizen-search__card--expanded & {
.citizen-card-show( false );
}
}
// Merge searchform with typeahead
.citizen-search__card {
&&--expanded {
border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.citizen-typeahead {
border-top-color: transparent; // Reset citizen-card style
}
}
}
// HACK: This is as close as we can to detect whether there is a keyboard in CSS
@media ( hover: hover ) and ( pointer: fine ) {
.citizen-typeahead {

6
resources/skins.citizen.search/typeahead.js
View file

@ -447,7 +447,7 @@ function updateTypeahead( messages ) {
* @param {HTMLInputElement} input
*/
function initTypeahead( searchForm, input ) {
const EXPANDED_CLASS = 'citizen-typeahead--expanded';
const EXPANDED_CLASS = 'citizen-search__card--expanded';
const
messages = {
@ -471,7 +471,7 @@ function initTypeahead( searchForm, input ) {
// event dismiss the links before it is clicked. This should fix it.
setTimeout( () => {
searchInput.setAttribute( 'aria-activedescendant', '' );
typeahead.classList.remove( EXPANDED_CLASS );
searchForm.parentElement.classList.remove( EXPANDED_CLASS );
searchInput.removeEventListener( 'keydown', keyboardEvents );
searchInput.removeEventListener( 'blur', onBlur );
}, 10 );
@ -481,7 +481,7 @@ function initTypeahead( searchForm, input ) {
const onFocus = () => {
// Refresh the typeahead since the query will be emptied when blurred
updateTypeahead( messages );
typeahead.classList.add( EXPANDED_CLASS );
searchForm.parentElement.classList.add( EXPANDED_CLASS );
searchInput.addEventListener( 'keydown', keyboardEvents );
searchInput.addEventListener( 'blur', onBlur );
};

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

@ -74,7 +74,7 @@
}
}
#searchform {
&__form {
flex-grow: 1;
}

2
templates/Search.mustache
View file

@ -17,7 +17,7 @@
{{>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}}" id="searchform" autocomplete="off">
<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}}}