mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-07-09 03:04:20 -04:00
Fixing keyboard behaviors of the app
This commit is contained in:
Zoe Roux
parent
539dcfc9d8
commit
d11cff9176
@ -45,7 +45,7 @@
|
||||
padding: 12px;
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
|
||||
&:host-context(.hoverEnabled) &:hover
|
||||
&:host-context(.hoverEnabled) &:hover, &:focus
|
||||
{
|
||||
color: white !important;
|
||||
}
|
||||
@ -111,7 +111,7 @@ input::-webkit-search-cancel-button
|
||||
opacity: 0.7;
|
||||
outline: none;
|
||||
|
||||
&:host-context(.hoverEnabled) &:hover
|
||||
&:host-context(.hoverEnabled) &:hover, &:focus
|
||||
{
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
|
||||
@ -1,10 +1,20 @@
|
||||
<div class="root">
|
||||
<div class="episodes" #scrollView (scroll)="onScroll()" infinite-scroll (scrolled)="this.episodes?.loadNext(this.client)" [horizontal]="true" [scrollWindow]="false">
|
||||
<div class="episode" *ngFor="let episode of this.episodes?.items" #itemsDom>
|
||||
<button mat-icon-button class="moreBtn" [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"><i class="material-icons">more_vert</i></button>
|
||||
<a routerLink="/watch/{{episode.slug}}" href="/watch/{{episode.slug}}">
|
||||
<div class="episodes" #scrollView
|
||||
(scroll)="onScroll()" infinite-scroll (scrolled)="this.episodes?.loadNext(this.client)"
|
||||
[horizontal]="true" [scrollWindow]="false">
|
||||
<a *ngFor="let episode of this.episodes?.items"
|
||||
routerLink="/watch/{{episode.slug}}" href="/watch/{{episode.slug}}"
|
||||
class="episode" #itemsDom>
|
||||
<button mat-icon-button class="moreBtn" [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"
|
||||
tabindex="-1"
|
||||
(click)="$event.stopImmediatePropagation(); $event.preventDefault()">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<div>
|
||||
<div matRipple class="img" [style.background-image]="sanitize(episode.thumb)">
|
||||
<button mat-icon-button class="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button>
|
||||
<button mat-icon-button class="playBtn" tabindex="-1">
|
||||
<mat-icon class="playIcon">play_circle_outline</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<ng-container *ngIf="displayShowTitle; else noTitle;">
|
||||
<h6 *ngIf="episode.seasonNumber != 0; else elseBlock;" class="title">{{episode.showTitle}} - S{{episode.seasonNumber}}:E{{episode.episodeNumber}}</h6>
|
||||
@ -16,16 +26,20 @@
|
||||
<ng-template #elseBlock><h6 class="title">{{episode.title}}</h6></ng-template>
|
||||
<p class="overview">{{episode.overview}}</p>
|
||||
</ng-template>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<mat-menu #more="matMenu">
|
||||
<ng-template matMenuContent let-episode="episode">
|
||||
<a [href]="'/video/' + episode.link" download><button mat-menu-item>Download episode</button></a>
|
||||
<a [href]="'/video/' + episode.slug" download><button mat-menu-item>Download episode</button></a>
|
||||
</ng-template>
|
||||
</mat-menu>
|
||||
|
||||
<button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
|
||||
<button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
|
||||
<button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()">
|
||||
<mat-icon>arrow_left</mat-icon>
|
||||
</button>
|
||||
<button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()">
|
||||
<mat-icon>arrow_right</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -54,6 +54,9 @@
|
||||
width: 55%;
|
||||
outline: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
|
||||
@include media-breakpoint-up(sm)
|
||||
{
|
||||
@ -88,13 +91,10 @@
|
||||
z-index: 255
|
||||
}
|
||||
|
||||
> a {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
outline: none;
|
||||
|
||||
.img {
|
||||
> div
|
||||
{
|
||||
.img
|
||||
{
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-top: 56.25%;
|
||||
@ -102,7 +102,8 @@
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
|
||||
> .playBtn {
|
||||
> .playBtn
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -116,7 +117,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.title
|
||||
{
|
||||
padding-top: .2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
@ -126,7 +128,8 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overview {
|
||||
.overview
|
||||
{
|
||||
font-weight: 300;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
@ -134,7 +137,8 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
.subtitle
|
||||
{
|
||||
font-weight: 300;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
@ -143,14 +147,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:host-context(.hoverEnabled) &:hover
|
||||
&:host-context(.hoverEnabled) &:hover, &:focus
|
||||
{
|
||||
.moreBtn
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
> a
|
||||
> div
|
||||
{
|
||||
.img
|
||||
{
|
||||
@ -170,6 +174,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.moreBtn:focus
|
||||
{
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.playIcon
|
||||
{
|
||||
font-size: 64px;
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import { Component, Input} from '@angular/core';
|
||||
import { Component, Input, ViewChild } from "@angular/core";
|
||||
import { MatMenuTrigger } from "@angular/material/menu";
|
||||
import { DomSanitizer } from "@angular/platform-browser";
|
||||
import { Episode } from "../../models/resources/episode";
|
||||
import {HorizontalScroller} from "../../misc/horizontal-scroller";
|
||||
import {Page} from "../../models/page";
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import { HorizontalScroller } from "../../misc/horizontal-scroller";
|
||||
import { Page } from "../../models/page";
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
|
||||
@Component({
|
||||
selector: 'app-episodes-list',
|
||||
@ -14,6 +15,7 @@ export class EpisodesListComponent extends HorizontalScroller
|
||||
{
|
||||
@Input() displayShowTitle: boolean = false;
|
||||
@Input() episodes: Page<Episode>;
|
||||
@ViewChild(MatMenuTrigger) menu: MatMenuTrigger;
|
||||
|
||||
constructor(private sanitizer: DomSanitizer, public client: HttpClient)
|
||||
{
|
||||
@ -24,4 +26,9 @@ export class EpisodesListComponent extends HorizontalScroller
|
||||
{
|
||||
return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
|
||||
}
|
||||
|
||||
openMenu(): void
|
||||
{
|
||||
this.menu.openMenu();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
<div class="scroll-row mb-5">
|
||||
<div class="people-container" #scrollView (scroll)="onScroll()" infinite-scroll (scrolled)="this.people?.loadNext(this.client)" [horizontal]="true" [scrollWindow]="false">
|
||||
<a class="people" *ngFor="let people of this.people?.items" routerLink="/people/{{people.slug}}" href="/people/{{people.slug}}" #itemsDom>
|
||||
<div class="people-container" #scrollView
|
||||
(scroll)="onScroll()" infinite-scroll (scrolled)="this.people?.loadNext(this.client)"
|
||||
[horizontal]="true" [scrollWindow]="false">
|
||||
<a class="people" *ngFor="let people of this.people?.items"
|
||||
routerLink="/people/{{people.slug}}" href="/people/{{people.slug}}" #itemsDom>
|
||||
<div matRipple [style.background-image]="getPeopleIcon(people.slug)"> </div>
|
||||
<h6 class="name">{{people.name}}</h6>
|
||||
<p class="role">{{people.role}}</p>
|
||||
</a>
|
||||
</div>
|
||||
<button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
|
||||
<button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
|
||||
<button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()">
|
||||
<mat-icon>arrow_left</mat-icon>
|
||||
</button>
|
||||
<button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()">
|
||||
<mat-icon>arrow_right</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -86,11 +86,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:host-context(.hoverEnabled) &:hover
|
||||
&:host-context(.hoverEnabled) &:hover, &:focus
|
||||
{
|
||||
cursor: pointer;
|
||||
|
||||
> img
|
||||
> div
|
||||
{
|
||||
outline: solid var(--accentColor);
|
||||
}
|
||||
|
||||
@ -106,7 +106,7 @@ button
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:host-context(.hoverEnabled) &:hover
|
||||
&:host-context(.hoverEnabled) &:hover, &:focus
|
||||
{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component, ElementRef, ViewChild } from "@angular/core";
|
||||
import {MatButton} from "@angular/material/button";
|
||||
import { MatButton } from "@angular/material/button";
|
||||
|
||||
// noinspection AngularMissingOrInvalidDeclarationInModule
|
||||
@Component({
|
||||
|
||||
@ -7,7 +7,6 @@ export interface Episode extends IResource
|
||||
episodeNumber: number;
|
||||
title: string;
|
||||
thumb: string;
|
||||
slug: string;
|
||||
overview: string;
|
||||
releaseDate;
|
||||
runtime: number;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user