forks
/
peertube
1
0
Fork 0
Code Releases Activity

Set thumbnail height

This commit is contained in:
Chocobozzz 2019-04-03 14:18:23 +02:00
parent 0c9945d900
commit 8fc02e4768
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
4 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/shared/video/video-thumbnail.component.scss
View File

@ -8,8 +8,8 @@
.progress-bar { .progress-bar {
height: 3px; height: 3px;
width: 100%; width: 100%;
position: relative; position: absolute;
top: -3px; bottom: 0;
background-color: rgba(0, 0, 0, 0.20); background-color: rgba(0, 0, 0, 0.20);
div { div {

15
client/src/sass/include/_miniature.scss
View File

@ -2,13 +2,13 @@
@import '_mixins'; @import '_mixins';
@mixin miniature-name { @mixin miniature-name {
@include ellipsis-multiline(16px, 2); @include ellipsis-multiline(1.1em, 2);
transition: color 0.2s; transition: color 0.2s;
font-size: 16px; font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;
color: var(--mainForegroundColor); color: var(--mainForegroundColor);
margin-top: 5px; margin-top: 10px;
margin-bottom: 5px; margin-bottom: 5px;
&:hover { &:hover {
@ -28,7 +28,8 @@ $play-overlay-width: 18px;
@mixin miniature-thumbnail { @mixin miniature-thumbnail {
@include disable-outline; @include disable-outline;
display: inline-block; display: flex;
flex-direction: column;
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
@ -126,13 +127,13 @@ $play-overlay-width: 18px;
} }
.video-thumbnail { .video-thumbnail {
width: calc(100% + 30px); margin: 0 -15px 10px -15px;
height: auto; width: 100vw;
margin: 0 -15px; height: calc(100vw / #{$video-thumbnail-ratio});
img { img {
width: 100%; width: 100%;
height: auto; height: 100%;
} }
} }
} }

4
client/src/sass/include/_mixins.scss
View File

@ -32,9 +32,7 @@
max-height: $font-size * $number-of-lines; max-height: $font-size * $number-of-lines;
/* Fallback for non-webkit */ /* Fallback for non-webkit */
font-size: $font-size; font-size: $font-size;
line-height: $font-size - 0.1; line-height: $font-size;
-webkit-line-clamp: $number-of-lines;
-webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

1
client/src/sass/include/_variables.scss
View File

@ -49,6 +49,7 @@ $separator-border-color: rgba(0, 0, 0, 0.10);
$video-miniature-width: 238px; $video-miniature-width: 238px;
$video-thumbnail-height: 122px; $video-thumbnail-height: 122px;
$video-thumbnail-width: 223px; $video-thumbnail-width: 223px;
$video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height;
$theater-bottom-space: 115px; $theater-bottom-space: 115px;