diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 563cb751..11764556 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -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; diff --git a/src/app/components/episodes-list/episodes-list.component.html b/src/app/components/episodes-list/episodes-list.component.html index 73390c12..29438440 100644 --- a/src/app/components/episodes-list/episodes-list.component.html +++ b/src/app/components/episodes-list/episodes-list.component.html @@ -1,10 +1,20 @@
-
- - + - - + +
diff --git a/src/app/components/episodes-list/episodes-list.component.scss b/src/app/components/episodes-list/episodes-list.component.scss index 6135891e..8fdf88a0 100644 --- a/src/app/components/episodes-list/episodes-list.component.scss +++ b/src/app/components/episodes-list/episodes-list.component.scss @@ -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; diff --git a/src/app/components/episodes-list/episodes-list.component.ts b/src/app/components/episodes-list/episodes-list.component.ts index 3fd40e6a..db9bf040 100644 --- a/src/app/components/episodes-list/episodes-list.component.ts +++ b/src/app/components/episodes-list/episodes-list.component.ts @@ -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; + @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(); + } } diff --git a/src/app/components/people-list/people-list.component.html b/src/app/components/people-list/people-list.component.html index 5a271f41..8d87b538 100644 --- a/src/app/components/people-list/people-list.component.html +++ b/src/app/components/people-list/people-list.component.html @@ -1,11 +1,18 @@
-
- + - - + +
diff --git a/src/app/components/people-list/people-list.component.scss b/src/app/components/people-list/people-list.component.scss index 9ac919d8..ed912e60 100644 --- a/src/app/components/people-list/people-list.component.scss +++ b/src/app/components/people-list/people-list.component.scss @@ -86,11 +86,11 @@ } } - &:host-context(.hoverEnabled) &:hover + &:host-context(.hoverEnabled) &:hover, &:focus { cursor: pointer; - > img + > div { outline: solid var(--accentColor); } diff --git a/src/app/components/show-grid/show-grid.component.scss b/src/app/components/show-grid/show-grid.component.scss index 5609ab4e..30ea2ecc 100644 --- a/src/app/components/show-grid/show-grid.component.scss +++ b/src/app/components/show-grid/show-grid.component.scss @@ -106,7 +106,7 @@ button margin-bottom: 0; } - &:host-context(.hoverEnabled) &:hover + &:host-context(.hoverEnabled) &:hover, &:focus { cursor: pointer; } @@ -141,4 +141,4 @@ button max-height: 2.5rem; } } -} \ No newline at end of file +} diff --git a/src/app/misc/horizontal-scroller.ts b/src/app/misc/horizontal-scroller.ts index ab018e9b..3e14d916 100644 --- a/src/app/misc/horizontal-scroller.ts +++ b/src/app/misc/horizontal-scroller.ts @@ -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({ diff --git a/src/app/models/resources/episode.ts b/src/app/models/resources/episode.ts index 226f4474..9bf87b13 100644 --- a/src/app/models/resources/episode.ts +++ b/src/app/models/resources/episode.ts @@ -7,7 +7,6 @@ export interface Episode extends IResource episodeNumber: number; title: string; thumb: string; - slug: string; overview: string; releaseDate; runtime: number;