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 6ce1bd59..6c23bd24 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 @@
-
+
@@ -8,6 +8,6 @@
{{episode.overview}}
-
-
+
+
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 ab088d1f..9118300f 100644
--- a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss
+++ b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss
@@ -24,10 +24,34 @@
min-width: 100%;
flex-shrink: 0;
flex-direction: row;
+ visibility: hidden;
+
+ &:hover
+ {
+ visibility: visible;
+ }
+
+ &::-webkit-scrollbar
+ {
+ height: 4px;
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb
+ {
+ background-color: #999;
+ border-radius: 90px;
+
+ &:hover
+ {
+ background-color: rgb(134, 127, 127);
+ }
+ }
}
.episode
{
+ visibility: visible;
display: inline-block;
padding: .25rem;
flex-shrink: 0;
@@ -82,15 +106,28 @@
{
font-weight: 600;
margin-bottom: 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
.overview
{
font-weight: 300;
+ display: -webkit-box;
+ -webkit-line-clamp: 4;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
&:hover
{
+ .img
+ {
+ outline: solid var(--accentColor);
+ }
+
.title
{
text-decoration: underline;
@@ -121,14 +158,14 @@
bottom: 60%;
display: none;
- leftBtn
+ el-leftBtn
{
left: 0;
padding-left: 10px;
padding-right: 2px;
}
- rightBtn
+ el-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 7af8badc..73bce387 100644
--- a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts
+++ b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts
@@ -29,25 +29,25 @@ export class EpisodesListComponent implements OnInit
let scroll: number = this.roundScroll(this.root.offsetWidth * 0.80);
this.root.scrollBy({ top: 0, left: -scroll, behavior: "smooth" });
- document.getElementById("rightBtn").classList.remove("d-none");
+ document.getElementById("el-rightBtn").classList.remove("d-none");
if (this.root.scrollLeft - scroll <= 0)
- document.getElementById("leftBtn").classList.add("d-none");
+ 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("leftBtn").classList.remove("d-none");
+ document.getElementById("el-leftBtn").classList.remove("d-none");
if (this.root.scrollLeft + scroll >= this.root.scrollWidth - this.root.clientWidth)
- document.getElementById("rightBtn").classList.add("d-none");
+ document.getElementById("el-rightBtn").classList.add("d-none");
}
roundScroll(offset: number): number
{
- let episodeSize: number = document.getElementById("1").scrollWidth;
+ let episodeSize: number = document.getElementById("el-1").scrollWidth;
offset = Math.round(offset / episodeSize) * episodeSize;
if (offset == 0)
diff --git a/Kyoo/ClientApp/src/app/show-details/show-details.component.html b/Kyoo/ClientApp/src/app/show-details/show-details.component.html
index 23f88054..24dcfbee 100644
--- a/Kyoo/ClientApp/src/app/show-details/show-details.component.html
+++ b/Kyoo/ClientApp/src/app/show-details/show-details.component.html
@@ -13,7 +13,7 @@
-