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

feat: auth btn in header

Browse Source
This commit is contained in:
Sergey Elpashev
2024-07-18 16:35:46 +03:00
parent c427c6d0b4
commit d414223df2
4 changed files with 61 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,28 +1,64 @@
<div
class="header fixed flex justify-between w-full p-2 bg-gray-700 md:h-8 items-center md:flex-row flex-col md:gap-0 gap-3 text-xl md:text-base"
[class]="
'header fixed flex justify-between w-full px-2 bg-gray-700 md:h-8 items-center md:flex-row flex-col md:gap-0 gap-3 text-xl md:text-base ' +
(menuOpened ? 'h-screen' : '')
"
>
<div class="flex justify-between flex-row w-full align-middle">
<a href="/"><h1 class="text-white" title="Main page">NwaifuAnime</h1></a>
<div class="flex justify-between flex-row w-full align-middle h-8 items-center">
<div class="flex flex-row gap-3 h-full items-center">
<a routerLink="/" class="h-full px-2 flex justify-center items-center justify-self-center"
><h1 class="text-white" title="Main page">NwaifuAnime</h1></a
>
<div class="border-l border-white h-full"></div>
<div class="flex-row gap-3 md:flex hidden h-full items-center">
<a
routerLink="/auth"
class="h-full px-2 flex justify-center items-center hover:bg-gray-600 transition ease-in-out delay-150 duration-300"
><h2 class="text-white" title="Auth page">Auth</h2></a
>
</div>
</div>
<!-- Search bar on small screens -->
<button type="button" class="md:hidden" (click)="changeMenu()">
<button
type="button"
class="md:hidden flex justify-center items-center px-2"
(click)="changeMenu()"
>
<i [class]="menuBtnClass"></i>
</button>
</div>
<!-- Search bar on big screens -->
<div [class]="searchBarClass">
<input
type="search"
#searchInput
class="outline-none ps-1 text-sm leading-6 w-full border-0 bg-transparent border-r border-gray-700"
(keydown.enter)="search()"
/>
<button
class="align-middle w-[100px] text-center border-0 flex flex-col items-center justify-center"
type="submit"
(click)="search()"
<div
class="flex flex-col md:flex-row md:justify-end justify-center items-center gap-3 md:w-[50vw] h-full w-full"
>
<!-- Search bar on big screens -->
<div [class]="searchBarClass">
<input
type="search"
#searchInput
class="outline-none ps-1 text-sm leading-6 w-full border-0 bg-transparent border-r border-gray-700"
(keydown.enter)="search()"
/>
<button
class="align-middle w-[100px] text-center border-0 flex flex-col items-center justify-center"
type="submit"
(click)="search()"
>
<span class="text-sm text-black h-full">Поиск</span>
</button>
</div>
<div
[class]="
'flex flex-col w-full justify-start items-center md:hidden overflow-hidden ' +
(menuOpened ? 'h-auto' : 'h-0')
"
>
<span class="text-sm text-black h-full">Поиск</span>
</button>
<a
routerLink="/auth"
class="h-full px-2 flex justify-center items-center hover:bg-gray-600 transition ease-in-out delay-150 duration-300"
><h2 class="text-white" title="Auth page">Auth</h2></a
>
</div>
</div>
</div>

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

@@ -1,6 +1,6 @@
import { CommonModule } from "@angular/common";
import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
import { ActivatedRoute, NavigationEnd, Router, RouterLink } from "@angular/router";
import { Subject, filter, takeUntil } from "rxjs";
@Component({
@@ -8,7 +8,7 @@ import { Subject, filter, takeUntil } from "rxjs";
templateUrl: "./header.component.html",
styleUrls: ["./header.component.less"],
standalone: true,
imports: [CommonModule],
imports: [CommonModule, RouterLink],
})
export class HeaderComponent implements AfterViewInit, OnDestroy {
@ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
@@ -37,7 +37,7 @@ export class HeaderComponent implements AfterViewInit, OnDestroy {
}
get searchBarClass(): string {
return `search-bar bg-slate-300 md:w-[50%] w-full md:m-0 ms-2 me-2 md:h-6 h-10 md:flex justify-start flex-row items-center rounded-md ${this.menuOpened ? "flex" : "hidden"}`;
return `search-bar bg-slate-300 md:w-full w-full md:m-0 ms-2 me-2 md:h-6 h-10 md:flex justify-start flex-row items-center rounded-md ${this.menuOpened ? "flex" : "hidden"}`;
}
search() {

6
apps/NwaifuAnime/src/app/components/reader/reader.component.ts
View File

@@ -1,11 +1,11 @@
import { CommonModule, isPlatformBrowser } from "@angular/common";
import {
AfterViewInit,
Component,
ElementRef,
HostListener,
Inject,
OnDestroy,
OnInit,
PLATFORM_ID,
} from "@angular/core";
import { ActivatedRoute, Router, RouterLink } from "@angular/router";
@@ -23,7 +23,7 @@ import { CachedPage, CachedPages } from "./reader.dto";
standalone: true,
imports: [CommonModule, ScaleImageComponent, RouterLink],
})
export class ReaderComponent implements AfterViewInit, OnDestroy {
export class ReaderComponent implements OnInit, OnDestroy {
//FIXME: Scrolling to top when manhwa
pages: Page[] = [];
currentPageIndex = 0;
@@ -54,7 +54,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
return this.cachedPages.values();
}
ngAfterViewInit(): void {
ngOnInit(): void {
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
const url = params["url"];
const chapter = params["chapter"];

2
apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.ts
View File

@@ -34,7 +34,7 @@ export class ScaleImageComponent implements AfterViewInit, OnDestroy {
([entry]) => entry.isIntersecting && this.view.emit(),
{
root: this.hostScrollable ? this.host.nativeElement : null,
rootMargin: "1000px",
rootMargin: "700px",
},
);
if (this.containerRef) this.observer.observe(this.containerRef.nativeElement);