Set thumbnail height

[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _miniature.scss

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 36d4e84d36a4a1ad99a3a3ba3ec9ed9f4ea7eaad..4926adb08e3185fb678ee53fa597d03ce0d18c10 100644 (file)
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -2,16 +2,13 @@
 @import '_mixins';
 
 @mixin miniature-name {
-  @include ellipsis-multiline(
-    $font-size: 1rem,
-    $line-height: 1,
-    $lines-to-show: 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 {
@@ -31,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;
@@ -45,8 +43,8 @@ $play-overlay-width: 18px;
     right: 0;
     bottom: 0;
 
-    width: $video-thumbnail-width;
-    height: $video-thumbnail-height;
+    width: inherit;
+    height: inherit;
     opacity: 0;
     background-color: rgba(0, 0, 0, 0.7);
 
@@ -87,8 +85,8 @@ $play-overlay-width: 18px;
   }
 
   img {
-    width: $video-thumbnail-width;
-    height: $video-thumbnail-height;
+    width: inherit;
+    height: inherit;
 
     &.blur-filter {
       filter: blur(5px);
@@ -97,6 +95,13 @@ $play-overlay-width: 18px;
   }
 }
 
+@mixin thumbnail-size-component ($width, $height) {
+  /deep/ .video-thumbnail {
+    width: $width;
+    height: $height;
+  }
+}
+
 @mixin static-thumbnail-overlay {
   display: inline-block;
   background-color: rgba(0, 0, 0, 0.7);
@@ -114,6 +119,7 @@ $play-overlay-width: 18px;
 
     .video-miniature-information {
       width: 100% !important;
+      text-align: left;
 
       span {
         width: 100%;
@@ -121,12 +127,13 @@ $play-overlay-width: 18px;
     }
 
     .video-thumbnail {
-      width: 100%;
-      height: auto;
+      margin: 0 -15px 10px -15px;
+      width: 100vw;
+      height: calc(100vw / #{$video-thumbnail-ratio});
 
       img {
         width: 100%;
-        height: auto;
+        height: 100%;
       }
     }
   }