Set thumbnail height

diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 0113427a34ecd4383509d29f71e9cde270dc1076..469b659e93170f37673cb8940847c62468f6942a 100644 (file)
--- 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 1e9e8d7499595fb88b166db75d1d426ec361d957..4926adb08e3185fb678ee53fa597d03ce0d18c10 100644 (file)
--- 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 900638a0e49a0167ccc4a1fa491a4ba96e575127..0dacc72724e8991155b354df50772237bc595c0b 100644 (file)
--- 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 0e71a18673180785e65bc3384b2cfc1018b7e673..c7b205b110b1e08f691da6f857fc1cd40ec0c9d0 100644 (file)
--- 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;