mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-06-01 12:19:28 +00:00
animated searchbar display in header
This commit is contained in:
adisposkofh
@@ -117,17 +117,25 @@ export default {
|
||||
});
|
||||
},
|
||||
template: /*html*/`
|
||||
<button v-if="areHeaderOptionsShown" id="nav-main-btn" class="navbar-toggler rounded-0 px-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<span v-if="isMobile && areHeaderOptionsShown" class="d-flex flex-row align-items-center px-2">
|
||||
<theme-switch></theme-switch>
|
||||
</span>
|
||||
<div
|
||||
id="header-options-collapsible"
|
||||
class="collapse multi-collapse collapse-horizontal show"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-row align-items-center gap-2 h-100"
|
||||
>
|
||||
<button id="nav-main-btn" class="navbar-toggler rounded-0 px-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<span v-if="isMobile" class="d-flex flex-row align-items-center">
|
||||
<theme-switch></theme-switch>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<fhc-searchbar
|
||||
@isSearchShownInMobileViewUpdated="isSearchShownInMobileView = $event.isSearchShownInMobileView"
|
||||
:searchoptions="searchbaroptions"
|
||||
:searchfunction="searchfunction"
|
||||
:class="{'px-2': isMobile}"
|
||||
ref="searchbar"
|
||||
id="nav-search"
|
||||
class="fhc-searchbar w-100 py-1 py-lg-2"
|
||||
@@ -140,21 +148,26 @@ export default {
|
||||
<theme-switch></theme-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="areHeaderOptionsShown" id="nav-user">
|
||||
<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
|
||||
<img :src="avatarUrl" :alt="$p.t('profilUpdate/profilBild')" class="bg-dark avatar rounded-circle border border-dark"/>
|
||||
</button>
|
||||
<ul ref="navUserDropdown"
|
||||
@[\`shown.bs.collapse\`]="handleShowNavUser"
|
||||
@[\`hide.bs.collapse\`]="handleHideNavUser"
|
||||
id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
|
||||
<li><a class="fhc-dark-bg btn rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
|
||||
<li >
|
||||
<cis-sprachen @languageChanged="fetchMenu"></cis-sprachen>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider m-0 "></li>
|
||||
<li ><a class="fhc-dark-bg btn rounded-0 d-block" :href="logoutUrl">Logout</a></li>
|
||||
</ul>
|
||||
<div
|
||||
id="user-menu-collapsible"
|
||||
class="collapse multi-collapse collapse-horizontal show"
|
||||
>
|
||||
<div id="nav-user">
|
||||
<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
|
||||
<img :src="avatarUrl" :alt="$p.t('profilUpdate/profilBild')" class="bg-dark avatar rounded-circle border border-dark"/>
|
||||
</button>
|
||||
<ul ref="navUserDropdown"
|
||||
@[\`shown.bs.collapse\`]="handleShowNavUser"
|
||||
@[\`hide.bs.collapse\`]="handleHideNavUser"
|
||||
id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
|
||||
<li><a class="fhc-dark-bg btn rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
|
||||
<li >
|
||||
<cis-sprachen @languageChanged="fetchMenu"></cis-sprachen>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider m-0 "></li>
|
||||
<li ><a class="fhc-dark-bg btn rounded-0 d-block" :href="logoutUrl">Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<nav id="nav-main" class="offcanvas offcanvas-start" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
|
||||
<div id="nav-main-sticky">
|
||||
|
||||
@@ -97,88 +97,91 @@ export default {
|
||||
action="javascript:void(0);"
|
||||
@focusin="searchfocusin"
|
||||
@focusout="searchfocusout"
|
||||
>
|
||||
>
|
||||
<span
|
||||
v-if="isMobile && !isSearchShown"
|
||||
@click="expandSearch()"
|
||||
class="d-flex flex-row align-items-center"
|
||||
v-if="isMobile"
|
||||
@click="toggleIsSearchShownInMobileView()"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target=".multi-collapse"
|
||||
aria-expanded="false"
|
||||
aria-controls="searchbar-collapsible header-options-collapsible user-menu-collapsible"
|
||||
class="d-flex flex-row align-items-center ps-3 pe-1"
|
||||
>
|
||||
<i class="fa-solid fa-magnifying-glass"></i>
|
||||
<i v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left"></i>
|
||||
<i v-else class="fa-solid fa-magnifying-glass"></i>
|
||||
</span>
|
||||
<div
|
||||
v-if="isSearchShown"
|
||||
ref="searchbox"
|
||||
class="h-100 input-group me-2 searchbar_searchbox"
|
||||
:class="showresult ? 'open' : 'closed'"
|
||||
:class="{'collapse multi-collapse collapse-horizontal': isMobile}"
|
||||
class="flex-grow-1"
|
||||
id="searchbar-collapsible"
|
||||
>
|
||||
<span
|
||||
v-if="isMobile"
|
||||
@click="minimizeSearch()"
|
||||
class="input-group-text">
|
||||
<i class="fa-solid fa-chevron-left"></i>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="input-group-text">
|
||||
<i class="fa-solid fa-magnifying-glass color-white"></i>
|
||||
</span>
|
||||
<input
|
||||
ref="input"
|
||||
@keyup="search"
|
||||
@focus="showsearchresult"
|
||||
v-model="searchsettings.searchstr"
|
||||
class="form-control searchbar_input"
|
||||
type="search"
|
||||
:placeholder="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
|
||||
:aria-label="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
|
||||
>
|
||||
<button
|
||||
v-if="showBtnSubmit"
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
:title="$p.t('search/submit')"
|
||||
:aria-label="$p.t('search/submit')"
|
||||
<div
|
||||
ref="searchbox"
|
||||
:class="{open: showresult, closed: showresult, 'px-2': isMobile}"
|
||||
class="h-100 input-group me-2 searchbar_searchbox"
|
||||
>
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<button
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#searchSettings"
|
||||
aria-expanded="false"
|
||||
aria-controls="searchSettings"
|
||||
ref="settingsbutton"
|
||||
class="searchbar_setting_btn btn btn-secondary"
|
||||
type="button"
|
||||
:title="$p.t('search/button_filter_label')"
|
||||
:aria-label="$p.t('search/button_filter_label')"
|
||||
>
|
||||
<i class="fas fa-filter"></i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="input-group-text">
|
||||
<i class="fa-solid fa-magnifying-glass color-white"></i>
|
||||
</span>
|
||||
<input
|
||||
ref="input"
|
||||
@keyup="search"
|
||||
@focus="showsearchresult"
|
||||
v-model="searchsettings.searchstr"
|
||||
class="form-control searchbar_input"
|
||||
type="search"
|
||||
:placeholder="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
|
||||
:aria-label="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
|
||||
>
|
||||
<button
|
||||
v-if="showBtnSubmit"
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
:title="$p.t('search/submit')"
|
||||
:aria-label="$p.t('search/submit')"
|
||||
>
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<button
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#searchSettings"
|
||||
aria-expanded="false"
|
||||
aria-controls="searchSettings"
|
||||
ref="settingsbutton"
|
||||
class="searchbar_setting_btn btn btn-secondary"
|
||||
type="button"
|
||||
:title="$p.t('search/button_filter_label')"
|
||||
:aria-label="$p.t('search/button_filter_label')"
|
||||
>
|
||||
<i class="fas fa-filter"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-show="showresult"
|
||||
class="searchbar_results" tabindex="-1">
|
||||
<div class="searchbar_results_scroller" ref="result">
|
||||
<div class="searchbar_results_wrapper" ref="results">
|
||||
<div v-if="searching">
|
||||
<i class="fas fa-spinner fa-spin fa-2x"></i>
|
||||
</div>
|
||||
<div v-else-if="this.error !== null">{{ error }}</div>
|
||||
<div v-else-if="searchresult.length < 1">{{ $p.t('search/error_no_results') }}</div>
|
||||
<template v-else v-for="res in searchresult">
|
||||
<component
|
||||
v-if="isValidRenderer(res.renderer)"
|
||||
:is="res.renderer"
|
||||
:mode="searchmode"
|
||||
:res="res"
|
||||
:actions="getActions(res)"
|
||||
@actionexecuted="hideresult"
|
||||
></component>
|
||||
<div v-else class="searchbar-result text-danger fw-bold">{{ $p.t('search/error_unknown_type', res) }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="showresult"
|
||||
class="searchbar_results" tabindex="-1">
|
||||
<div class="searchbar_results_scroller" ref="result">
|
||||
<div class="searchbar_results_wrapper" ref="results">
|
||||
<div v-if="searching">
|
||||
<i class="fas fa-spinner fa-spin fa-2x"></i>
|
||||
</div>
|
||||
<div v-else-if="this.error !== null">{{ error }}</div>
|
||||
<div v-else-if="searchresult.length < 1">{{ $p.t('search/error_no_results') }}</div>
|
||||
<template v-else v-for="res in searchresult">
|
||||
<component
|
||||
v-if="isValidRenderer(res.renderer)"
|
||||
:is="res.renderer"
|
||||
:mode="searchmode"
|
||||
:res="res"
|
||||
:actions="getActions(res)"
|
||||
@actionexecuted="hideresult"
|
||||
></component>
|
||||
<div v-else class="searchbar-result text-danger fw-bold">{{ $p.t('search/error_unknown_type', res) }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="searchSettings"
|
||||
@@ -512,5 +515,8 @@ export default {
|
||||
isSearchShownInMobileView: false,
|
||||
});
|
||||
},
|
||||
toggleIsSearchShownInMobileView() {
|
||||
this.isSearchShownInMobileView = !this.isSearchShownInMobileView;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user