diff options
author | Chocobozzz <me@florianbigard.com> | 2021-04-01 11:10:27 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-04-01 16:54:49 +0200 |
commit | 0f7407d926cf7774f8f730dba08327569c11680c (patch) | |
tree | 6b44be72187390514d9068b78851b48b1a9b7244 /client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss | |
parent | 33253c1aa6b82284ddd0a9cb516ad85e276ca3a3 (diff) | |
download | PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.tar.gz PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.tar.zst PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.zip |
Refactor video miniature
Less dirty code, better responsive
Prepare for some regressions
Increase default miniature size
Diffstat (limited to 'client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss')
-rw-r--r-- | client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss | 119 |
1 files changed, 75 insertions, 44 deletions
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss index 1b16dbb01..c5be5f292 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss | |||
@@ -4,6 +4,7 @@ | |||
4 | 4 | ||
5 | .miniature { | 5 | .miniature { |
6 | display: inline-block; | 6 | display: inline-block; |
7 | width: 100%; | ||
7 | 8 | ||
8 | &.no-videos:not(.to-manage){ | 9 | &.no-videos:not(.to-manage){ |
9 | a { | 10 | a { |
@@ -17,62 +18,92 @@ | |||
17 | display: none; | 18 | display: none; |
18 | } | 19 | } |
19 | } | 20 | } |
21 | } | ||
20 | 22 | ||
21 | .miniature-thumbnail { | 23 | .miniature-thumbnail { |
22 | @include miniature-thumbnail; | 24 | @include miniature-thumbnail; |
23 | 25 | ||
24 | .miniature-playlist-info-overlay { | 26 | .miniature-playlist-info-overlay { |
25 | @include static-thumbnail-overlay; | 27 | @include static-thumbnail-overlay; |
26 | 28 | ||
27 | position: absolute; | 29 | position: absolute; |
28 | right: 0; | 30 | right: 0; |
29 | bottom: 0; | 31 | bottom: 0; |
30 | height: $video-thumbnail-height; | 32 | height: 100%; |
31 | padding: 0 10px; | 33 | padding: 0 10px; |
32 | display: flex; | 34 | display: flex; |
33 | align-items: center; | 35 | align-items: center; |
34 | font-size: 14px; | 36 | font-size: 14px; |
35 | font-weight: $font-semibold; | 37 | font-weight: $font-semibold; |
36 | } | ||
37 | } | 38 | } |
39 | } | ||
38 | 40 | ||
39 | .miniature-info { | 41 | .miniature-info { |
40 | width: 200px; | ||
41 | margin-top: 2px; | ||
42 | line-height: normal; | ||
43 | |||
44 | .miniature-name { | ||
45 | @include miniature-name; | ||
46 | 42 | ||
47 | @include ellipsis-multiline(1.3em, 2); | 43 | .miniature-name { |
44 | @include miniature-name; | ||
45 | @include ellipsis-multiline(1.3em, 2); | ||
48 | 46 | ||
49 | margin: 0; | 47 | margin: 0; |
50 | } | 48 | } |
51 | 49 | ||
52 | .by { | 50 | .by { |
53 | @include disable-default-a-behaviour; | 51 | @include disable-default-a-behaviour; |
54 | 52 | ||
55 | display: block; | 53 | display: block; |
56 | color: pvar(--greyForegroundColor); | 54 | color: pvar(--greyForegroundColor); |
57 | } | 55 | } |
58 | 56 | ||
59 | .privacy-date { | 57 | .privacy-date { |
60 | margin-top: 5px; | 58 | margin-top: 5px; |
61 | 59 | ||
62 | .video-info-privacy { | 60 | .video-info-privacy { |
63 | font-size: 14px; | 61 | font-size: 14px; |
64 | font-weight: $font-semibold; | 62 | font-weight: $font-semibold; |
65 | 63 | ||
66 | &::after { | 64 | &::after { |
67 | content: '-'; | 65 | content: '-'; |
68 | margin: 0 3px; | 66 | margin: 0 3px; |
69 | } | ||
70 | } | 67 | } |
71 | } | 68 | } |
69 | } | ||
72 | 70 | ||
73 | .video-info-description { | 71 | .video-info-description { |
74 | margin-top: 10px; | 72 | margin-top: 10px; |
75 | color: pvar(--greyForegroundColor); | 73 | color: pvar(--greyForegroundColor); |
76 | } | 74 | } |
75 | } | ||
76 | |||
77 | .miniature:not(.display-as-row) { | ||
78 | .miniature-thumbnail { | ||
79 | margin-top: 10px; | ||
80 | margin-bottom: 5px; | ||
81 | } | ||
82 | } | ||
83 | |||
84 | .miniature.display-as-row { | ||
85 | --rowThumbnailWidth: #{$video-thumbnail-width}; | ||
86 | --rowThumbnailHeight: #{$video-thumbnail-height}; | ||
87 | |||
88 | display: flex; | ||
89 | |||
90 | .miniature-thumbnail { | ||
91 | width: var(--rowThumbnailWidth); | ||
92 | height: var(--rowThumbnailHeight); | ||
93 | margin-right: 10px; | ||
94 | } | ||
95 | } | ||
96 | |||
97 | @include on-small-main-col { | ||
98 | .miniature.display-as-row { | ||
99 | --rowThumbnailWidth: #{$video-thumbnail-medium-width}; | ||
100 | --rowThumbnailHeight: #{$video-thumbnail-medium-height}; | ||
101 | } | ||
102 | } | ||
103 | |||
104 | @include on-mobile-main-col { | ||
105 | .miniature.display-as-row { | ||
106 | --rowThumbnailWidth: #{$video-thumbnail-small-width}; | ||
107 | --rowThumbnailHeight: #{$video-thumbnail-small-height}; | ||
77 | } | 108 | } |
78 | } | 109 | } |