mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-16 22:42:16 +00:00
header rework: single fixed element, ordering, small screen cutoff
This commit is contained in:
adisposkofh
+10
-23
@@ -388,12 +388,6 @@ html {
|
||||
#nav-search > .input-group > * {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
#nav-search .searchbar_results {
|
||||
top: 100% !important;
|
||||
left: 0;
|
||||
right: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* frame */
|
||||
.in-frame {
|
||||
@@ -467,7 +461,15 @@ html {
|
||||
/* overflow: visible !important; */
|
||||
}
|
||||
#cis-header {
|
||||
z-index: 10;
|
||||
z-index: 10;
|
||||
}
|
||||
#cis-header-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: var(--fhc-cis-header-height);
|
||||
width: 100%;
|
||||
/* padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px); */
|
||||
background-color: var(--fhc-primary);
|
||||
}
|
||||
#cis-header nav {
|
||||
position: initial;
|
||||
@@ -483,12 +485,7 @@ html {
|
||||
display: none;
|
||||
}
|
||||
#nav-logo {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: var(--fhc-cis-header-height);
|
||||
width: var(--fhc-cis-menu-width);
|
||||
background-color: var(--fhc-primary);
|
||||
padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px);
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -523,17 +520,7 @@ html {
|
||||
color: var(--fhc-black-40);
|
||||
}
|
||||
#nav-search {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: var(--fhc-cis-menu-width);
|
||||
height: var(--fhc-cis-header-height);
|
||||
right: calc(var(--fhc-cis-header-height) + 2 * var(--fhc-cis-header-px) - 2 * var(--fhc-cis-header-py));
|
||||
width: auto !important;
|
||||
}
|
||||
#nav-user {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: relative;
|
||||
}
|
||||
#nav-user-btn {
|
||||
border-width: 0;
|
||||
|
||||
@@ -140,7 +140,7 @@ const app = Vue.createApp({
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
isMobile: Vue.computed(() => this.windowWidth < 767),
|
||||
isNarrow: Vue.computed(() => this.windowWidth < 992),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -30,7 +30,7 @@ export default {
|
||||
menuOpen:true,
|
||||
};
|
||||
},
|
||||
inject: ["isMobile"],
|
||||
inject: ["isNarrow"],
|
||||
provide(){
|
||||
return{
|
||||
setActiveEntry: this.setActiveEntry,
|
||||
@@ -113,57 +113,60 @@ export default {
|
||||
});
|
||||
},
|
||||
template: /*html*/`
|
||||
<div
|
||||
:class="{'collapse multi-collapse collapse-horizontal show': isMobile}"
|
||||
id="header-options-collapsible"
|
||||
>
|
||||
<div class="d-flex flex-row align-items-center gap-2 h-100" style="width: 79px">
|
||||
<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 id="cis-header-bar" class="d-flex flex-row flex-grow-1">
|
||||
<div id="nav-logo" class="d-none d-lg-block">
|
||||
<div class="d-flex h-100 justify-content-between">
|
||||
<a :href="rootUrl">
|
||||
<img :src="logoUrl" alt="Corporate Identity Logo">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<fhc-searchbar
|
||||
:searchoptions="searchbaroptions"
|
||||
:searchfunction="searchfunction"
|
||||
ref="searchbar"
|
||||
id="nav-search"
|
||||
class="fhc-searchbar w-100 py-1 py-lg-2"
|
||||
></fhc-searchbar>
|
||||
<div id="nav-logo" class="d-none d-lg-block">
|
||||
<div class="d-flex h-100 justify-content-between">
|
||||
<a :href="rootUrl">
|
||||
<img :src="logoUrl" alt="Corporate Identity Logo">
|
||||
</a>
|
||||
<theme-switch></theme-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="header-usermenu-collapsible"
|
||||
:class="{'collapse multi-collapse collapse-horizontal show': isMobile}"
|
||||
>
|
||||
<div
|
||||
:style="!isMobile ? '' : 'width: 51px'"
|
||||
id="nav-user"
|
||||
v-if="isNarrow"
|
||||
:class="{'collapse multi-collapse collapse-horizontal show': isNarrow}"
|
||||
id="header-navbar-toggler-collapsible"
|
||||
>
|
||||
<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 class="d-flex flex-row align-items-center h-100" style="width: 35px">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fhc-searchbar
|
||||
:searchoptions="searchbaroptions"
|
||||
:searchfunction="searchfunction"
|
||||
ref="searchbar"
|
||||
id="nav-search"
|
||||
class="fhc-searchbar flex-grow-1 py-1 py-lg-2"
|
||||
></fhc-searchbar>
|
||||
|
||||
<div
|
||||
id="header-options-collapsible"
|
||||
:class="{'collapse multi-collapse collapse-horizontal show': isNarrow}"
|
||||
>
|
||||
<div :style="!isNarrow ? '' : 'width: 105px'" class="d-flex flex-row ps-3 justify-content-end">
|
||||
<span class="d-flex flex-row align-items-center">
|
||||
<theme-switch></theme-switch>
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -39,7 +39,7 @@ export default {
|
||||
query: Vue.computed(() => this.lastQuery),
|
||||
};
|
||||
},
|
||||
inject: ["isMobile"],
|
||||
inject: ["isNarrow"],
|
||||
data: function () {
|
||||
return {
|
||||
searchtimer: null,
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
abortController: null,
|
||||
settingsDropdown: null,
|
||||
lastQuery: "",
|
||||
isSearchShownInMobileView: false,
|
||||
isSearchShownInNarrowView: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -95,30 +95,30 @@ export default {
|
||||
@focusout="searchfocusout"
|
||||
>
|
||||
<span
|
||||
v-if="isMobile"
|
||||
v-if="isNarrow"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target=".multi-collapse"
|
||||
aria-controls="header-searchbar-collapsible header-options-collapsible header-usermenu-collapsible"
|
||||
aria-controls="header-searchbar-collapsible header-navbar-toggler-collapsible header-options-collapsible"
|
||||
aria-expanded="false"
|
||||
class="d-flex flex-row align-items-center ps-3 pe-1"
|
||||
class="d-flex flex-row align-items-center pe-1"
|
||||
style="color: white"
|
||||
>
|
||||
<i v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left"></i>
|
||||
<i v-else class="fa-solid fa-magnifying-glass"></i>
|
||||
<i v-if="isSearchShownInNarrowView" class="fa-solid fa-chevron-left ps-3"></i>
|
||||
<i v-else class="fa-solid fa-magnifying-glass ps-2"></i>
|
||||
</span>
|
||||
|
||||
<div
|
||||
:class="{'flex-grow-1': !isMobile, 'collapse multi-collapse collapse-horizontal': isMobile}"
|
||||
:class="{'flex-grow-1': !isNarrow, 'collapse multi-collapse collapse-horizontal': isNarrow}"
|
||||
id="header-searchbar-collapsible"
|
||||
@[\`show.bs.collapse\`]="isSearchShownInMobileView = true"
|
||||
@[\`hidden.bs.collapse\`]="isSearchShownInMobileView = false"
|
||||
@[\`show.bs.collapse\`]="isSearchShownInNarrowView = true"
|
||||
@[\`hidden.bs.collapse\`]="isSearchShownInNarrowView = false"
|
||||
>
|
||||
<div
|
||||
:class="{open: showresult, closed: showresult, 'px-3': isMobile}"
|
||||
:class="{open: showresult, closed: showresult, 'px-3': isNarrow}"
|
||||
ref="searchbox"
|
||||
class="h-100 input-group me-2 searchbar_searchbox"
|
||||
:style="isMobile ? 'width: ' + getMaxWidthOfSearchbarInMobileView() : ''"
|
||||
:style="isNarrow ? 'width: ' + getMaxWidthOfSearchbarInNarrowView() : ''"
|
||||
>
|
||||
<span class="input-group-text">
|
||||
<i class="fa-solid fa-magnifying-glass color-white"></i>
|
||||
@@ -243,9 +243,9 @@ export default {
|
||||
}
|
||||
this.search();
|
||||
},
|
||||
isMobile() {
|
||||
if (!this.isMobile) {
|
||||
this.isSearchShownInMobileView = false;
|
||||
isNarrow() {
|
||||
if (!this.isNarrow) {
|
||||
this.isSearchShownInNarrowView = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -509,7 +509,7 @@ export default {
|
||||
}
|
||||
return this.searchoptions.actions[res.type];
|
||||
},
|
||||
getMaxWidthOfSearchbarInMobileView() {
|
||||
getMaxWidthOfSearchbarInNarrowView() {
|
||||
// body width - hardcoded chevron width; necessary for accurate collapse transition transition
|
||||
return (
|
||||
document.querySelector("body").getBoundingClientRect().width -
|
||||
|
||||
Reference in New Issue
Block a user