From 06cbd21502e90dd78ae20f2ed0ed96bcfc61f41d Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Sun, 27 Oct 2019 17:22:00 +0100 Subject: [PATCH] Cleaning lists components --- .../episodes-list.component.html | 8 +- .../episodes-list.component.scss | 4 +- .../episodes-list/episodes-list.component.ts | 83 ++++++++--------- .../people-list/people-list.component.html | 6 +- .../people-list/people-list.component.scss | 20 +--- .../app/people-list/people-list.component.ts | 42 ++++----- .../app/shows-list/shows-list.component.html | 6 +- .../app/shows-list/shows-list.component.scss | 91 +------------------ .../app/shows-list/shows-list.component.ts | 41 +++++---- 9 files changed, 100 insertions(+), 201 deletions(-) diff --git a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.html b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.html index cee5b88e..620cb0d6 100644 --- a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.html +++ b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.html @@ -1,6 +1,6 @@
-
- +
+
@@ -16,6 +16,6 @@
- - + +
diff --git a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss index 482b7b5b..9ead0866 100644 --- a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss +++ b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss @@ -164,14 +164,14 @@ bottom: 60%; display: none; - &#el-leftBtn + &.leftBtn { left: 0; padding-left: 10px; padding-right: 2px; } - &#el-rightBtn + &.rightBtn { right: 0; padding-right: 10px; diff --git a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts index 58a0db05..954ccfa0 100644 --- a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts +++ b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts @@ -1,59 +1,60 @@ -import { Component, OnInit, Input, SimpleChange } from '@angular/core'; -import { Episode } from "../../models/episode"; +import { Component, ElementRef, Input, ViewChild } from '@angular/core'; +import { MatButton } from "@angular/material/button"; import { DomSanitizer } from "@angular/platform-browser"; +import { Episode } from "../../models/episode"; @Component({ selector: 'app-episodes-list', templateUrl: './episodes-list.component.html', styleUrls: ['./episodes-list.component.scss'] }) -export class EpisodesListComponent implements OnInit +export class EpisodesListComponent { @Input() displayShowTitle: boolean = false; @Input() episodes: Episode[]; - private root: HTMLElement; + @ViewChild("scrollView", { static: true }) private scrollView: ElementRef; + @ViewChild("leftBtn", { static: false }) private leftBtn: MatButton; + @ViewChild("rightBtn", { static: false }) private rightBtn: MatButton; + @ViewChild("episode", { static: false }) private episode: ElementRef; - constructor(private sanitizer: DomSanitizer) { } + constructor(private sanitizer: DomSanitizer) { } - ngOnInit() - { - this.root = document.getElementById("episodes"); - } + scrollLeft() + { + let scroll: number = this.roundScroll(this.scrollView.nativeElement.offsetWidth * 0.80); + this.scrollView.nativeElement.scrollBy({ top: 0, left: -scroll, behavior: "smooth" }); + } + + scrollRight() + { + let scroll: number = this.roundScroll(this.scrollView.nativeElement.offsetWidth * 0.80); + this.scrollView.nativeElement.scrollBy({ top: 0, left: scroll, behavior: "smooth" }); + } + + roundScroll(offset: number): number + { + let episodeSize: number = this.episode.nativeElement.scrollWidth; + + offset = Math.round(offset / episodeSize) * episodeSize; + if (offset == 0) + offset = episodeSize; + return offset; + } + + onScroll() + { + if (this.scrollView.nativeElement.scrollLeft <= 0) + this.leftBtn._elementRef.nativeElement.classList.add("d-none"); + else + this.leftBtn._elementRef.nativeElement.classList.remove("d-none"); + if (this.scrollView.nativeElement.scrollLeft >= this.scrollView.nativeElement.scrollWidth - this.scrollView.nativeElement.clientWidth) + this.rightBtn._elementRef.nativeElement.classList.add("d-none"); + else + this.rightBtn._elementRef.nativeElement.classList.remove("d-none"); + } sanitize(url: string) { return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")"); } - - scrollLeft() - { - let scroll: number = this.roundScroll(this.root.offsetWidth * 0.80); - this.root.scrollBy({ top: 0, left: -scroll, behavior: "smooth" }); - - document.getElementById("el-rightBtn").classList.remove("d-none"); - - if (this.root.scrollLeft - scroll <= 0) - document.getElementById("el-leftBtn").classList.add("d-none"); - } - - scrollRight() - { - let scroll: number = this.roundScroll(this.root.offsetWidth * 0.80); - this.root.scrollBy({ top: 0, left: scroll, behavior: "smooth" }); - document.getElementById("el-leftBtn").classList.remove("d-none"); - - if (this.root.scrollLeft + scroll >= this.root.scrollWidth - this.root.clientWidth) - document.getElementById("el-rightBtn").classList.add("d-none"); - } - - roundScroll(offset: number): number - { - let episodeSize: number = document.getElementById("el-1").scrollWidth; - offset = Math.round(offset / episodeSize) * episodeSize; - - if (offset == 0) - offset = episodeSize; - - return offset; - } } diff --git a/Kyoo/ClientApp/src/app/people-list/people-list.component.html b/Kyoo/ClientApp/src/app/people-list/people-list.component.html index 58aade08..1c14cefb 100644 --- a/Kyoo/ClientApp/src/app/people-list/people-list.component.html +++ b/Kyoo/ClientApp/src/app/people-list/people-list.component.html @@ -1,11 +1,11 @@
-
+
{{people.name}}

{{people.role}}
- - + +
diff --git a/Kyoo/ClientApp/src/app/people-list/people-list.component.scss b/Kyoo/ClientApp/src/app/people-list/people-list.component.scss index 8a7686d7..dfdaedd3 100644 --- a/Kyoo/ClientApp/src/app/people-list/people-list.component.scss +++ b/Kyoo/ClientApp/src/app/people-list/people-list.component.scss @@ -123,33 +123,17 @@ bottom: 40%; display: none; - &#pl-leftBtn + &.leftBtn { left: 0; padding-left: 10px; padding-right: 2px; } - &#pl-rightBtn + &.rightBtn { right: 0; padding-right: 10px; padding-left: 2px; } } - -#leftBtn -{ - position: absolute; - left: 0; - top: 33%; - outline: none; -} - -#rightBtn -{ - position: absolute; - right: 0; - top: 33%; - outline: none; -} diff --git a/Kyoo/ClientApp/src/app/people-list/people-list.component.ts b/Kyoo/ClientApp/src/app/people-list/people-list.component.ts index e8fc1109..4cf46f98 100644 --- a/Kyoo/ClientApp/src/app/people-list/people-list.component.ts +++ b/Kyoo/ClientApp/src/app/people-list/people-list.component.ts @@ -1,4 +1,5 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, ElementRef, Input, ViewChild } from '@angular/core'; +import { MatButton } from "@angular/material/button"; import { DomSanitizer } from "@angular/platform-browser"; import { People } from "../../models/people"; @@ -7,38 +8,37 @@ import { People } from "../../models/people"; templateUrl: './people-list.component.html', styleUrls: ['./people-list.component.scss'] }) -export class PeopleListComponent implements OnInit +export class PeopleListComponent { @Input() people: People[]; - private peopleScroll: HTMLElement; + @ViewChild("scrollView", { static: true }) private scrollView: ElementRef; + @ViewChild("leftBtn", { static: false }) private leftBtn: MatButton; + @ViewChild("rightBtn", { static: false }) private rightBtn: MatButton; constructor(private sanitizer: DomSanitizer) { } - ngOnInit() - { - this.peopleScroll = document.getElementById("peopleScroll"); - } - scrollLeft() { - let scroll: number = this.peopleScroll.offsetWidth * 0.80; - this.peopleScroll.scrollBy({ top: 0, left: -scroll, behavior: "smooth" }); - - document.getElementById("pl-rightBtn").classList.remove("d-none"); - - if (this.peopleScroll.scrollLeft - scroll <= 0) - document.getElementById("pl-leftBtn").classList.add("d-none"); + let scroll: number = this.scrollView.nativeElement.offsetWidth * 0.80; + this.scrollView.nativeElement.scrollBy({ top: 0, left: -scroll, behavior: "smooth" }); } scrollRight() { - let scroll: number = this.peopleScroll.offsetWidth * 0.80; - this.peopleScroll.scrollBy({ top: 0, left: scroll, behavior: "smooth" }); - console.log(document.getElementById("pl-leftBtn")); - document.getElementById("pl-leftBtn").classList.remove("d-none"); + let scroll: number = this.scrollView.nativeElement.offsetWidth * 0.80; + this.scrollView.nativeElement.scrollBy({ top: 0, left: scroll, behavior: "smooth" }); + } - if (this.peopleScroll.scrollLeft + scroll >= this.peopleScroll.scrollWidth - this.peopleScroll.clientWidth) - document.getElementById("pl-rightBtn").classList.add("d-none"); + onScroll() + { + if (this.scrollView.nativeElement.scrollLeft <= 0) + this.leftBtn._elementRef.nativeElement.classList.add("d-none"); + else + this.leftBtn._elementRef.nativeElement.classList.remove("d-none"); + if (this.scrollView.nativeElement.scrollLeft >= this.scrollView.nativeElement.scrollWidth - this.scrollView.nativeElement.clientWidth) + this.rightBtn._elementRef.nativeElement.classList.add("d-none"); + else + this.rightBtn._elementRef.nativeElement.classList.remove("d-none"); } getPeopleIcon(slug: string) diff --git a/Kyoo/ClientApp/src/app/shows-list/shows-list.component.html b/Kyoo/ClientApp/src/app/shows-list/shows-list.component.html index 27f668f3..82643e6b 100644 --- a/Kyoo/ClientApp/src/app/shows-list/shows-list.component.html +++ b/Kyoo/ClientApp/src/app/shows-list/shows-list.component.html @@ -1,5 +1,5 @@
-
+

{{show.title}}

@@ -7,6 +7,6 @@

{{show.startYear}}
- - + +
diff --git a/Kyoo/ClientApp/src/app/shows-list/shows-list.component.scss b/Kyoo/ClientApp/src/app/shows-list/shows-list.component.scss index 83fcb433..8a314d03 100644 --- a/Kyoo/ClientApp/src/app/shows-list/shows-list.component.scss +++ b/Kyoo/ClientApp/src/app/shows-list/shows-list.component.scss @@ -109,77 +109,6 @@ } } - -/*.people -{ - visibility: visible; - margin: .25rem; - text-decoration: none; - color: inherit; - outline: none; - flex-shrink: 0; - flex-grow: 0; - width: 33%; - - @include media-breakpoint-up(sm) - { - width: 22%; - } - - @include media-breakpoint-up(md) - { - width: 20%; - } - - @include media-breakpoint-up(lg) - { - width: 15%; - } - - @include media-breakpoint-up(xl) - { - width: 10%; - } - - > div - { - width: 100%; - height: 0; - padding-top: 147.0588%; - background-size: cover; - background-color: #333333; - } - - > p, h6 - { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: center; - margin-bottom: 0px; - - &.role - { - font-size: 0.8em; - } - } - - &:hover - { - cursor: pointer; - - > img - { - outline: solid var(--accentColor); - } - - .name - { - text-decoration: underline; - } - } -}*/ - .scroll-row { position: relative; @@ -203,33 +132,17 @@ bottom: 40%; display: none; - &#pl-leftBtn + &.leftBtn { left: 0; padding-left: 10px; padding-right: 2px; } - &#pl-rightBtn + &.rightBtn { right: 0; padding-right: 10px; padding-left: 2px; } } - -#leftBtn -{ - position: absolute; - left: 0; - top: 33%; - outline: none; -} - -#rightBtn -{ - position: absolute; - right: 0; - top: 33%; - outline: none; -} diff --git a/Kyoo/ClientApp/src/app/shows-list/shows-list.component.ts b/Kyoo/ClientApp/src/app/shows-list/shows-list.component.ts index 55cba30a..9628a091 100644 --- a/Kyoo/ClientApp/src/app/shows-list/shows-list.component.ts +++ b/Kyoo/ClientApp/src/app/shows-list/shows-list.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, ElementRef, Input, ViewChild } from '@angular/core'; +import { MatButton } from "@angular/material/button"; import { DomSanitizer } from "@angular/platform-browser"; import { Show } from "../../models/show"; @@ -7,37 +8,37 @@ import { Show } from "../../models/show"; templateUrl: './shows-list.component.html', styleUrls: ['./shows-list.component.scss'] }) -export class ShowsListComponent implements OnInit +export class ShowsListComponent { @Input() shows: Show[]; - private showsScroll: HTMLElement; + @ViewChild("scrollView", { static: true }) private scrollView: ElementRef; + @ViewChild("leftBtn", { static: false }) private leftBtn: MatButton; + @ViewChild("rightBtn", { static: false }) private rightBtn: MatButton; constructor(private sanitizer: DomSanitizer) { } - ngOnInit() - { - this.showsScroll = document.getElementById("showsScroll"); - } - scrollLeft() { - let scroll: number = this.showsScroll.offsetWidth * 0.80; - this.showsScroll.scrollBy({ top: 0, left: -scroll, behavior: "smooth" }); - - document.getElementById("pl-rightBtn").classList.remove("d-none"); - - if (this.showsScroll.scrollLeft - scroll <= 0) - document.getElementById("pl-leftBtn").classList.add("d-none"); + let scroll: number = this.scrollView.nativeElement.offsetWidth * 0.80; + this.scrollView.nativeElement.scrollBy({ top: 0, left: -scroll, behavior: "smooth" }); } scrollRight() { - let scroll: number = this.showsScroll.offsetWidth * 0.80; - this.showsScroll.scrollBy({ top: 0, left: scroll, behavior: "smooth" }); - document.getElementById("pl-leftBtn").classList.remove("d-none"); + let scroll: number = this.scrollView.nativeElement.offsetWidth * 0.80; + this.scrollView.nativeElement.scrollBy({ top: 0, left: scroll, behavior: "smooth" }); + } - if (this.showsScroll.scrollLeft + scroll >= this.showsScroll.scrollWidth - this.showsScroll.clientWidth) - document.getElementById("pl-rightBtn").classList.add("d-none"); + onScroll() + { + if (this.scrollView.nativeElement.scrollLeft <= 0) + this.leftBtn._elementRef.nativeElement.classList.add("d-none"); + else + this.leftBtn._elementRef.nativeElement.classList.remove("d-none"); + if (this.scrollView.nativeElement.scrollLeft >= this.scrollView.nativeElement.scrollWidth - this.scrollView.nativeElement.clientWidth) + this.rightBtn._elementRef.nativeElement.classList.add("d-none"); + else + this.rightBtn._elementRef.nativeElement.classList.remove("d-none"); } getThumb(slug: string)