DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Improved header search bar design.

This commit is contained in:
DebaucheryLibrarian 2024-02-29 05:24:34 +01:00
parent 12e819263c
commit fefc5291c2
1 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
components/header/header.vue
View File

@ -11,6 +11,7 @@
</Link> </Link>
<ul class="nav-list nolist"> <ul class="nav-list nolist">
<!--
<li class="nav-item"> <li class="nav-item">
<Link <Link
class="link" class="link"
@ -18,6 +19,7 @@
href="/updates" href="/updates"
>Updates</Link> >Updates</Link>
</li> </li>
-->
<li class="nav-item"> <li class="nav-item">
<Link <Link
@ -56,6 +58,7 @@
<div class="header-section"> <div class="header-section">
<form <form
class="search" class="search"
:class="{ focused: searchFocused }"
@submit.prevent="search" @submit.prevent="search"
> >
<input <input
@ -63,9 +66,13 @@
type="search" type="search"
placeholder="Search" placeholder="Search"
class="input" class="input"
@focus="searchFocused = true"
@blur="searchFocused = false"
> >
<Icon icon="search" /> <button class="search-button">
<Icon icon="search" />
</button>
</form> </form>
<VDropdown <VDropdown
@ -120,6 +127,7 @@ const pageContext = inject('pageContext');
const user = pageContext.user; const user = pageContext.user;
const query = ref(pageContext.urlParsed.search.q || ''); const query = ref(pageContext.urlParsed.search.q || '');
const searchFocused = ref(false);
const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]); const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
const currentPath = `${pageContext.urlParsed.pathnameOriginal}${pageContext.urlParsed.searchOriginal || ''}`; const currentPath = `${pageContext.urlParsed.pathnameOriginal}${pageContext.urlParsed.searchOriginal || ''}`;
@ -186,28 +194,43 @@ async function logout() {
.header-section { .header-section {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: stretch; align-items: center;
} }
.search { .search {
height: 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row-reverse; /* allow icon to be selected */ border: solid 1px var(--shadow-weak-20);
border-radius: 1rem;
background: var(--background);
.input { .input {
padding: .5rem 1rem; padding: .5rem 0 .5rem 1rem;
border-radius: 1rem; border: none;
background: var(--background);
margin: 0; margin: 0;
background: none;
}
.search-button {
padding: 0;
border: none;
background: none;
} }
.icon { .icon {
margin-right: .75rem; height: 100%;
padding: 0 .75rem 0 .5rem;
fill: var(--shadow-weak-10); fill: var(--shadow-weak-10);
} }
.input:focus + .icon { &.focused {
fill: var(--primary); border: solid 1px var(--primary-light-10);
.icon {
fill: var(--primary);
cursor: pointer;
}
} }
} }
@ -215,7 +238,7 @@ async function logout() {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 1rem; padding: 0 1rem 0 1.5rem;
font-size: 0; font-size: 0;
cursor: pointer; cursor: pointer;