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/sass/include/_miniature.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/sass/include/_miniature.scss')
-rw-r--r-- | client/src/sass/include/_miniature.scss | 171 |
1 files changed, 39 insertions, 132 deletions
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 7643a6816..9e1fc63e3 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss | |||
@@ -5,11 +5,10 @@ | |||
5 | @include ellipsis-multiline(1.1em, 2); | 5 | @include ellipsis-multiline(1.1em, 2); |
6 | 6 | ||
7 | word-break: break-all; | 7 | word-break: break-all; |
8 | word-wrap: break-word; | ||
8 | transition: color 0.2s; | 9 | transition: color 0.2s; |
9 | font-weight: $font-semibold; | 10 | font-weight: $font-semibold; |
10 | color: pvar(--mainForegroundColor); | 11 | color: pvar(--mainForegroundColor); |
11 | margin-top: 10px; | ||
12 | margin-bottom: 5px; | ||
13 | 12 | ||
14 | &:hover { | 13 | &:hover { |
15 | text-decoration: none; | 14 | text-decoration: none; |
@@ -21,20 +20,20 @@ | |||
21 | } | 20 | } |
22 | } | 21 | } |
23 | 22 | ||
24 | $play-overlay-transition: 0.2s ease; | ||
25 | $play-overlay-height: 26px; | ||
26 | $play-overlay-width: 18px; | ||
27 | |||
28 | @mixin miniature-thumbnail { | 23 | @mixin miniature-thumbnail { |
29 | @include disable-outline; | 24 | @include disable-outline; |
30 | 25 | ||
26 | $play-overlay-transition: 0.2s ease; | ||
27 | $play-overlay-height: 26px; | ||
28 | $play-overlay-width: 18px; | ||
29 | |||
31 | display: flex; | 30 | display: flex; |
32 | flex-direction: column; | 31 | flex-direction: column; |
33 | position: relative; | 32 | position: relative; |
34 | border-radius: 3px; | 33 | border-radius: 3px; |
34 | width: 100%; | ||
35 | height: 100%; | ||
35 | overflow: hidden; | 36 | overflow: hidden; |
36 | width: $video-thumbnail-width; | ||
37 | height: $video-thumbnail-height; | ||
38 | background-color: #ececec; | 37 | background-color: #ececec; |
39 | transition: filter $play-overlay-transition; | 38 | transition: filter $play-overlay-transition; |
40 | 39 | ||
@@ -98,140 +97,36 @@ $play-overlay-width: 18px; | |||
98 | color: #fff; | 97 | color: #fff; |
99 | } | 98 | } |
100 | 99 | ||
101 | @mixin miniature-rows { | ||
102 | &:first-child { | ||
103 | padding-top: 30px; | ||
104 | |||
105 | .section-title { | ||
106 | border-top: none !important; | ||
107 | } | ||
108 | } | ||
109 | |||
110 | .section-title { | ||
111 | font-size: 24px; | ||
112 | font-weight: $font-semibold; | ||
113 | padding-top: 15px; | ||
114 | margin-bottom: 15px; | ||
115 | display: flex; | ||
116 | justify-content: space-between; | ||
117 | |||
118 | &:not(h2) { | ||
119 | border-top: 1px solid $separator-border-color; | ||
120 | } | ||
121 | |||
122 | a { | ||
123 | &:hover, &:focus:not(.focus-visible), &:active { | ||
124 | text-decoration: none; | ||
125 | outline: none; | ||
126 | } | ||
127 | |||
128 | color: pvar(--mainForegroundColor); | ||
129 | } | ||
130 | } | ||
131 | |||
132 | &.channel { | ||
133 | .section-title { | ||
134 | a { | ||
135 | display: flex; | ||
136 | width: fit-content; | ||
137 | align-items: center; | ||
138 | |||
139 | img { | ||
140 | @include channel-avatar(28px); | ||
141 | |||
142 | margin-right: 8px; | ||
143 | } | ||
144 | } | ||
145 | |||
146 | .followers { | ||
147 | color: pvar(--greyForegroundColor); | ||
148 | font-weight: normal; | ||
149 | font-size: 14px; | ||
150 | margin-left: 10px; | ||
151 | position: relative; | ||
152 | top: 2px; | ||
153 | } | ||
154 | } | ||
155 | } | ||
156 | |||
157 | .show-more { | ||
158 | position: relative; | ||
159 | top: -5px; | ||
160 | display: inline-block; | ||
161 | font-size: 16px; | ||
162 | text-transform: uppercase; | ||
163 | color: pvar(--greyForegroundColor); | ||
164 | margin-bottom: 10px; | ||
165 | font-weight: $font-semibold; | ||
166 | text-decoration: none; | ||
167 | } | ||
168 | |||
169 | @media screen and (max-width: $mobile-view) { | ||
170 | max-height: initial; | ||
171 | overflow: initial; | ||
172 | |||
173 | .section-title { | ||
174 | font-size: 17px; | ||
175 | margin-left: 10px; | ||
176 | } | ||
177 | } | ||
178 | } | ||
179 | |||
180 | // Use margin by default, or padding if $margin is false | 100 | // Use margin by default, or padding if $margin is false |
181 | @mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) { | 101 | @mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) { |
182 | --fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)}; | 102 | --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)}; |
183 | 103 | ||
184 | @if $margin { | 104 | @if $margin { |
185 | margin-left: var(--fluidVideosMiniatureMargins) !important; | 105 | margin-left: var(--gridVideosMiniatureMargins) !important; |
186 | margin-right: var(--fluidVideosMiniatureMargins) !important; | 106 | margin-right: var(--gridVideosMiniatureMargins) !important; |
187 | } @else { | 107 | } @else { |
188 | padding-left: var(--fluidVideosMiniatureMargins) !important; | 108 | padding-left: var(--gridVideosMiniatureMargins) !important; |
189 | padding-right: var(--fluidVideosMiniatureMargins) !important; | 109 | padding-right: var(--gridVideosMiniatureMargins) !important; |
190 | } | 110 | } |
191 | 111 | ||
192 | @media screen and (max-width: $mobile-view) { | 112 | @media screen and (max-width: $mobile-view) { |
193 | --fluidVideosMiniatureMargins: $min-margin; | 113 | --gridVideosMiniatureMargins: #{$min-margin}; |
194 | 114 | ||
195 | width: auto; | 115 | width: auto; |
196 | } | 116 | } |
197 | } | 117 | } |
198 | 118 | ||
199 | @mixin fluid-videos-miniature-layout { | 119 | @mixin grid-videos-miniature-layout { |
200 | @include fluid-videos-miniature-margins; | 120 | @include grid-videos-miniature-margins; |
201 | |||
202 | @media screen and (max-width: $mobile-view) { | ||
203 | .videos { | ||
204 | text-align: center; | ||
205 | |||
206 | ::ng-deep .video-miniature { | ||
207 | padding-right: 0; | ||
208 | height: auto; | ||
209 | width: 100%; | ||
210 | margin-bottom: 25px; | ||
211 | |||
212 | .video-miniature-information { | ||
213 | width: 100% !important; | ||
214 | text-align: left; | ||
215 | |||
216 | span { | ||
217 | width: 100%; | ||
218 | } | ||
219 | } | ||
220 | |||
221 | .video-thumbnail { | ||
222 | border-radius: 0; | ||
223 | } | ||
224 | } | ||
225 | } | ||
226 | } | ||
227 | 121 | ||
228 | @media screen and (min-width: $mobile-view) { | 122 | @media screen and (min-width: $mobile-view) { |
229 | .videos { | 123 | .videos, |
230 | --miniatureMinWidth: #{$video-thumbnail-width - 15px}; | 124 | .playlists { |
125 | --miniatureMinWidth: #{$video-thumbnail-width - 25px}; | ||
231 | --miniatureMaxWidth: #{$video-thumbnail-width}; | 126 | --miniatureMaxWidth: #{$video-thumbnail-width}; |
232 | 127 | ||
233 | display: grid; | 128 | display: grid; |
234 | column-gap: 5px; | 129 | column-gap: 30px; |
235 | grid-template-columns: repeat( | 130 | grid-template-columns: repeat( |
236 | auto-fill, | 131 | auto-fill, |
237 | minmax( | 132 | minmax( |
@@ -240,21 +135,33 @@ $play-overlay-width: 18px; | |||
240 | ) | 135 | ) |
241 | ); | 136 | ); |
242 | 137 | ||
243 | @media screen and (min-width: #{breakpoint(fhd)}) { | 138 | .video-wrapper, |
244 | column-gap: 1%; | 139 | .playlist-wrapper { |
245 | --miniatureMinWidth: #{$video-thumbnail-width}; | ||
246 | } | ||
247 | |||
248 | .video-wrapper { | ||
249 | margin: 0 auto; | 140 | margin: 0 auto; |
250 | width: 100%; | 141 | width: 100%; |
251 | 142 | ||
252 | my-video-miniature { | 143 | my-video-miniature, |
144 | my-video-playlist-miniature { | ||
253 | display: block; | 145 | display: block; |
254 | min-width: var(--miniatureMinWidth); | 146 | min-width: var(--miniatureMinWidth); |
255 | max-width: var(--miniatureMaxWidth); | 147 | max-width: var(--miniatureMaxWidth); |
256 | } | 148 | } |
257 | } | 149 | } |
150 | |||
151 | @media screen and (min-width: #{breakpoint(xm)}) { | ||
152 | column-gap: 15px; | ||
153 | } | ||
154 | |||
155 | @media screen and (min-width: #{breakpoint(fhd)}) { | ||
156 | column-gap: 2%; | ||
157 | } | ||
158 | } | ||
159 | } | ||
160 | |||
161 | @media screen and (max-width: $mobile-view) { | ||
162 | .videos, | ||
163 | .playlists { | ||
164 | text-align: center; | ||
258 | } | 165 | } |
259 | } | 166 | } |
260 | } | 167 | } |