neuro_llc/NwaifuWeb
2
0
Fork 0
Code Issues 11 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: search field

Browse Source
This commit is contained in:
Sergey Elpashev
2024-07-05 00:06:48 +03:00
parent 16a6a05d89
commit 6ddb3bad29
7 changed files with 55 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/NwaifuAnime/src/app/components/header/header.component.html
View File

@@ -1,17 +1,23 @@
<div
class="fixed flex justify-between w-full p-2 bg-gray-700 md:h-8 h-auto items-center md:flex-row flex-col"
class="header fixed flex justify-between w-full p-2 bg-gray-700 md:h-8 h-auto items-center md:flex-row flex-col md:gap-0 gap-3"
>
<h1 class="text-white">NwaifuAnime</h1>
<div
id="search-bar"
class="bg-slate-300 md:w-[50%] w-full md:m-0 ms-2 me-2 max-h-6 flex justify-start flex-row items-center gap-1 rounded-md"
>
<div class="flex justify-between flex-row w-full align-middle">
<h1 class="text-white">NwaifuAnime</h1>
<!-- Search bar on small screens -->
<button type="button" class="md:hidden" (click)="changeMenu()">
<i [class]="menuBtnClass"></i>
</button>
</div>
<!-- Search bar on big screens -->
<div [class]="searchBarClass">
<input
type="search"
class="outline-none ps-1 text-sm leading-6 w-[70%] border-0 bg-transparent border-r border-gray-700"
#searchInput
class="outline-none ps-1 text-sm leading-6 w-full border-0 bg-transparent border-r border-gray-700"
/>
<button class="align-middle w-[30%] text-center" type="submit">
<span class="text-sm text-white">Поиск <i class="lni lni-search-alt"></i></span>
<button class="align-middle w-[100px] text-center" type="submit" (click)="search()">
<span class="text-sm text-black h-full">Поиск</span>
</button>
</div>
</div>

3
apps/NwaifuAnime/src/app/components/header/header.component.less
View File

@@ -0,0 +1,3 @@
.header {
transition: height 0.3s;
}

28
apps/NwaifuAnime/src/app/components/header/header.component.ts
View File

@@ -1,9 +1,33 @@
import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { Component, ElementRef, EventEmitter, Output, ViewChild } from "@angular/core";
@Component({
selector: "app-header",
templateUrl: "./header.component.html",
styleUrls: ["./header.component.less"],
standalone: true,
imports: [CommonModule],
})
export class HeaderComponent {}
export class HeaderComponent {
@Output() searchEvent: EventEmitter<string> = new EventEmitter();
@ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
menuOpened = false;
changeMenu() {
this.menuOpened = !this.menuOpened;
}
get menuBtnClass(): string {
return `lni ${this.menuOpened ? "lni-close" : "lni-menu"} text-white`;
}
get searchBarClass(): string {
return `search-bar bg-slate-300 md:w-[50%] w-full md:m-0 ms-2 me-2 max-h-6 md:flex justify-start flex-row items-center rounded-md ${this.menuOpened ? "flex" : "hidden"}`;
}
search() {
if (this.searchInput) {
const text = this.searchInput.nativeElement.value;
this.searchEvent.emit(text);
}
}
}