From 8fc02e476869276d35759d19248ddfe7f84ec09c Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 3 Apr 2019 14:18:23 +0200
Subject: [PATCH] Set thumbnail height

---
 .../shared/video/video-thumbnail.component.scss   |  4 ++--
 client/src/sass/include/_miniature.scss           | 15 ++++++++-------
 client/src/sass/include/_mixins.scss              |  4 +---
 client/src/sass/include/_variables.scss           |  1 +
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 0113427a3..469b659e9 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -8,8 +8,8 @@
   .progress-bar {
     height: 3px;
     width: 100%;
-    position: relative;
-    top: -3px;
+    position: absolute;
+    bottom: 0;
     background-color: rgba(0, 0, 0, 0.20);
 
     div {
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 1e9e8d749..4926adb08 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -2,13 +2,13 @@
 @import '_mixins';
 
 @mixin miniature-name {
-  @include ellipsis-multiline(16px, 2);
+  @include ellipsis-multiline(1.1em, 2);
 
   transition: color 0.2s;
   font-size: 16px;
   font-weight: $font-semibold;
   color: var(--mainForegroundColor);
-  margin-top: 5px;
+  margin-top: 10px;
   margin-bottom: 5px;
 
   &:hover {
@@ -28,7 +28,8 @@ $play-overlay-width: 18px;
 @mixin miniature-thumbnail {
   @include disable-outline;
 
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
   position: relative;
   border-radius: 3px;
   overflow: hidden;
@@ -126,13 +127,13 @@ $play-overlay-width: 18px;
     }
 
     .video-thumbnail {
-      width: calc(100% + 30px);
-      height: auto;
-      margin: 0 -15px;
+      margin: 0 -15px 10px -15px;
+      width: 100vw;
+      height: calc(100vw / #{$video-thumbnail-ratio});
 
       img {
         width: 100%;
-        height: auto;
+        height: 100%;
       }
     }
   }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 900638a0e..0dacc7272 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -32,9 +32,7 @@
   max-height: $font-size * $number-of-lines;
   /* Fallback for non-webkit */
   font-size: $font-size;
-  line-height: $font-size - 0.1;
-  -webkit-line-clamp: $number-of-lines;
-  -webkit-box-orient: vertical;
+  line-height: $font-size;
   overflow: hidden;
   text-overflow: ellipsis;
 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 0e71a1867..c7b205b11 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -49,6 +49,7 @@ $separator-border-color: rgba(0, 0, 0, 0.10);
 $video-miniature-width: 238px;
 $video-thumbnail-height: 122px;
 $video-thumbnail-width: 223px;
+$video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height;
 
 $theater-bottom-space: 115px;