Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Cleaning up the navbar for small screens

Browse Source
This commit is contained in:
Zoe Roux 2020-12-30 18:25:46 +01:00
parent 4a9cc1b7ce
commit 539dcfc9d8
3 changed files with 48 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/app/app.component.html
View File

@ -1,24 +1,23 @@
<header id="nav">
<div class="fixed-top">
<nav id="toolbar" class="navbar navbar-dark bg-secondary">
<nav id="toolbar" class="navbar navbar-dark bg-secondary flex-nowrap">
<button mat-icon-button class="icon p-0 d-sm-none" type="button" data-toggle="collapse" data-target=".mobile-nav">
<mat-icon>menu</mat-icon>
</button>
<a class="navbar-brand nav-item ml-3" routerLink="/">
Kyoo
</a>
<ul class="navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link" routerLink="/browse" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">All</a>
</li>
<li class="nav-item" *ngFor="let library of this.libraries">
<a class="nav-link" routerLink="/browse/{{library.slug}}" routerLinkActive="active">{{library.name}}</a>
</li>
<ul class="navbar-nav flex-row d-none d-sm-flex">
<ng-container *ngTemplateOutlet="links"></ng-container>
</ul>
<ul class="navbar-nav flex-row ml-auto">
<ul class="navbar-nav flex-row flex-nowrap ml-auto">
<li class="nav-item icon searchbar">
<input placeholder="Search" id="search" type="search" (input)="onUpdateValue($event)"/>
<mat-icon matTooltipPosition="below" matTooltip="Search" (click)="openSearch()">search</mat-icon>
<input placeholder="Search" id="search" type="search" (input)="onUpdateValue($event)"/>
</li>
<li class="nav-item" *ngIf="!this.isAuthenticated else accountDrop">
<a class="icon" (click)="this.authManager.login()" matTooltipPosition="below" matTooltip="Login">
<mat-icon>account_circle</mat-icon>
@ -43,6 +42,13 @@
</ng-template>
</ul>
</nav>
<div class="d-sm-none navbar-dark bg-secondary">
<ul class="mobile-nav collapse navbar-nav">
<ng-container *ngTemplateOutlet="links"></ng-container>
</ul>
</div>
<mat-progress-bar *ngIf="this.isLoading" color="accent" mode="indeterminate"> </mat-progress-bar>
</div>
</header>
@ -50,3 +56,12 @@
<main id="main">
<router-outlet></router-outlet>
</main>
<ng-template #links>
<li class="nav-item">
<a class="nav-link" routerLink="/browse" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">All</a>
</li>
<li class="nav-item" *ngFor="let library of this.libraries">
<a class="nav-link" routerLink="/browse/{{library.slug}}" routerLinkActive="active">{{library.name}}</a>
</li>
</ng-template>

24
src/app/app.component.scss
View File

@ -17,6 +17,11 @@
{
outline: none;
@include media-breakpoint-down(sm)
{
text-align: center;
}
> a
{
outline: none;
@ -51,14 +56,24 @@
}
}
.navbar-brand:hover
.navbar-brand
{
&:hover
{
color: var(--accentColor);
}
@media (max-width: 350px)
{
display: none;
}
}
.searchbar
{
border-radius: 30px;
display: flex !important;
flex-flow: row-reverse nowrap;
> input
{
@ -69,13 +84,14 @@
border-bottom: 1px solid #cfcfcf;
width: 0;
padding: 0;
max-width: 20rem;
transition: width 0.4s ease-in-out;
&:focus, &.searching
{
width: 12rem;
width: 100%;
@include media-breakpoint-up(sm)
@include media-breakpoint-up(md)
{
width: 20rem;
}
@ -93,12 +109,14 @@ input::-webkit-search-cancel-button
padding: 8px;
display: inline-block;
opacity: 0.7;
outline: none;
&:host-context(.hoverEnabled) &:hover
{
cursor: pointer;
opacity: 1;
}
}
.profilePicture

2
src/app/app.component.ts
View File

@ -76,7 +76,7 @@ export class AppComponent
{
event.target.classList.add("searching");
this.router.navigate(["/search", query], {
replaceUrl: true
replaceUrl: this.router.url.startsWith("/search")
});
}
else