aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-06-09 09:33:28 +0200
committerGitHub <noreply@github.com>2020-06-09 09:33:28 +0200
commite66883b37ae0796256b3aba550670a2d76cfc98a (patch)
tree3cce3c78e9f9f327470f0370a1b4065fe7e0009e /client/src/app/videos
parent6ad971d5f5e9ea2adfc58bd83ba1790efa4a8d12 (diff)
downloadPeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.gz
PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.zst
PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.zip
`fitWidth` for `video-miniature`, fluid grid (#2830)
* Fluid abstract video list * normalize timestamp display on miniatures * use grid for abstract-video-list - refactor scss function var to pvar to avoid overriding css variables - move fluid-grid margins to adapt-margin-content-width mixin for maintainability - fix video-miniature-name margin-top on small screen * move sceenratio function in a mixin * display no miniature avatar in channel videos view
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss4
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss2
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.scss10
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss12
-rw-r--r--client/src/app/videos/+video-watch/video-watch-playlist.component.scss4
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss32
-rw-r--r--client/src/app/videos/video-list/video-overview.component.html6
7 files changed, 35 insertions, 35 deletions
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 0702ebf22..69b907288 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -17,7 +17,7 @@ label {
17} 17}
18 18
19.title-page a { 19.title-page a {
20 color: var(--mainForegroundColor); 20 color: pvar(--mainForegroundColor);
21 21
22 &:hover { 22 &:hover {
23 text-decoration: none; 23 text-decoration: none;
@@ -122,7 +122,7 @@ my-peertube-checkbox {
122 display: inline-block; 122 display: inline-block;
123 margin-right: 25px; 123 margin-right: 25px;
124 124
125 color: var(--greyForegroundColor); 125 color: pvar(--greyForegroundColor);
126 font-size: 15px; 126 font-size: 15px;
127 } 127 }
128 128
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 3b46475b4..1fef74994 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -3,7 +3,7 @@
3 3
4.first-step-block { 4.first-step-block {
5 .torrent-or-magnet { 5 .torrent-or-magnet {
6 @include divider($color: var(--inputPlaceholderColor), $background: var(--submenuColor)); 6 @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuColor));
7 7
8 &[data-content] { 8 &[data-content] {
9 margin: 1.5rem 0; 9 margin: 1.5rem 0;
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index 1316e09e4..0ad57d897 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -33,10 +33,10 @@ $nav-link-height: 40px;
33 &.active { 33 &.active {
34 border: $border-width $border-type $border-color; 34 border: $border-width $border-type $border-color;
35 border-bottom: none; 35 border-bottom: none;
36 background-color: var(--submenuColor) !important; 36 background-color: pvar(--submenuColor) !important;
37 37
38 span { 38 span {
39 border-bottom: 2px solid var(--mainColor); 39 border-bottom: 2px solid pvar(--mainColor);
40 font-weight: $font-bold; 40 font-weight: $font-bold;
41 } 41 }
42 } 42 }
@@ -47,7 +47,7 @@ $nav-link-height: 40px;
47 border: $border-width $border-type $border-color; 47 border: $border-width $border-type $border-color;
48 border-top: transparent; 48 border-top: transparent;
49 49
50 background-color: var(--submenuColor); 50 background-color: pvar(--submenuColor);
51 border-bottom-left-radius: 3px; 51 border-bottom-left-radius: 3px;
52 border-bottom-right-radius: 3px; 52 border-bottom-right-radius: 3px;
53 width: 100%; 53 width: 100%;
@@ -58,7 +58,7 @@ $nav-link-height: 40px;
58 align-items: center; 58 align-items: center;
59 59
60 &.dragover { 60 &.dragover {
61 border: 3px dashed var(--mainColor); 61 border: 3px dashed pvar(--mainColor);
62 } 62 }
63} 63}
64 64
@@ -72,7 +72,7 @@ $nav-link-height: 40px;
72 /* Hide active tab style to not have a moving tab effect */ 72 /* Hide active tab style to not have a moving tab effect */
73 a.nav-link.active { 73 a.nav-link.active {
74 border: none; 74 border: none;
75 background-color: var(--mainBackgroundColor) !important; 75 background-color: pvar(--mainBackgroundColor) !important;
76 } 76 }
77 } 77 }
78} 78}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
index 33204de3b..e7ef79561 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -70,7 +70,7 @@
70 a { 70 a {
71 @include disable-default-a-behaviour; 71 @include disable-default-a-behaviour;
72 72
73 color: var(--mainForegroundColor); 73 color: pvar(--mainForegroundColor);
74 } 74 }
75 75
76 .comment-account-fid { 76 .comment-account-fid {
@@ -80,7 +80,7 @@
80 80
81 .comment-date { 81 .comment-date {
82 font-size: 90%; 82 font-size: 90%;
83 color: var(--greyForegroundColor); 83 color: pvar(--greyForegroundColor);
84 margin-left: 5px; 84 margin-left: 5px;
85 text-decoration: none; 85 text-decoration: none;
86 } 86 }
@@ -95,7 +95,7 @@
95 &:not(.linkified-url) { 95 &:not(.linkified-url) {
96 @include disable-default-a-behaviour; 96 @include disable-default-a-behaviour;
97 97
98 color: var(--mainForegroundColor); 98 color: pvar(--mainForegroundColor);
99 99
100 font-weight: $font-semibold; 100 font-weight: $font-semibold;
101 } 101 }
@@ -108,7 +108,7 @@
108 } 108 }
109 109
110 &.comment-html-deleted { 110 &.comment-html-deleted {
111 color: var(--greyForegroundColor); 111 color: pvar(--greyForegroundColor);
112 margin-bottom: 1rem; 112 margin-bottom: 1rem;
113 } 113 }
114 } 114 }
@@ -120,12 +120,12 @@
120 ::ng-deep .dropdown-toggle, 120 ::ng-deep .dropdown-toggle,
121 .comment-action-reply, 121 .comment-action-reply,
122 .comment-action-delete { 122 .comment-action-delete {
123 color: var(--greyForegroundColor); 123 color: pvar(--greyForegroundColor);
124 cursor: pointer; 124 cursor: pointer;
125 margin-right: 10px; 125 margin-right: 10px;
126 126
127 &:hover { 127 &:hover {
128 color: var(--mainForegroundColor); 128 color: pvar(--mainForegroundColor);
129 } 129 }
130 } 130 }
131 131
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
index db36dcd8b..0b0a2a899 100644
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
@@ -7,7 +7,7 @@
7 min-width: 200px; 7 min-width: 200px;
8 max-width: 470px; 8 max-width: 470px;
9 height: 66vh; 9 height: 66vh;
10 background-color: var(--mainBackgroundColor); 10 background-color: pvar(--mainBackgroundColor);
11 overflow-y: auto; 11 overflow-y: auto;
12 border-bottom: 1px solid $separator-border-color; 12 border-bottom: 1px solid $separator-border-color;
13 13
@@ -22,7 +22,7 @@
22 } 22 }
23 23
24 .playlist-by-index { 24 .playlist-by-index {
25 color: var(--greyForegroundColor); 25 color: pvar(--greyForegroundColor);
26 display: flex; 26 display: flex;
27 27
28 .playlist-by { 28 .playlist-by {
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 431a21039..8be0bab1d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -166,7 +166,7 @@ $video-info-margin-left: 44px;
166 a { 166 a {
167 @include disable-default-a-behaviour; 167 @include disable-default-a-behaviour;
168 168
169 color: var(--mainForegroundColor); 169 color: pvar(--mainForegroundColor);
170 170
171 &:hover { 171 &:hover {
172 opacity: 0.8; 172 opacity: 0.8;
@@ -225,7 +225,7 @@ $video-info-margin-left: 44px;
225 ::ng-deep.action-button { 225 ::ng-deep.action-button {
226 @include peertube-button; 226 @include peertube-button;
227 @include button-with-icon(21px, 0, -1px); 227 @include button-with-icon(21px, 0, -1px);
228 @include apply-svg-color(var(--actionButtonColor)); 228 @include apply-svg-color(pvar(--actionButtonColor));
229 229
230 font-size: 100%; 230 font-size: 100%;
231 font-weight: $font-semibold; 231 font-weight: $font-semibold;
@@ -233,7 +233,7 @@ $video-info-margin-left: 44px;
233 padding: 0 10px 0 10px; 233 padding: 0 10px 0 10px;
234 white-space: nowrap; 234 white-space: nowrap;
235 background-color: transparent !important; 235 background-color: transparent !important;
236 color: var(--actionButtonColor); 236 color: pvar(--actionButtonColor);
237 text-transform: uppercase; 237 text-transform: uppercase;
238 238
239 &::after { 239 &::after {
@@ -255,36 +255,36 @@ $video-info-margin-left: 44px;
255 255
256 &.action-button-like.activated { 256 &.action-button-like.activated {
257 .count { 257 .count {
258 color: var(--activatedActionButtonColor); 258 color: pvar(--activatedActionButtonColor);
259 } 259 }
260 260
261 my-global-icon { 261 my-global-icon {
262 @include apply-svg-color(var(--activatedActionButtonColor)); 262 @include apply-svg-color(pvar(--activatedActionButtonColor));
263 } 263 }
264 } 264 }
265 265
266 &.action-button-dislike.activated { 266 &.action-button-dislike.activated {
267 .count { 267 .count {
268 color: var(--activatedActionButtonColor); 268 color: pvar(--activatedActionButtonColor);
269 } 269 }
270 270
271 my-global-icon { 271 my-global-icon {
272 @include apply-svg-color(var(--activatedActionButtonColor)); 272 @include apply-svg-color(pvar(--activatedActionButtonColor));
273 } 273 }
274 } 274 }
275 275
276 &.action-button-support { 276 &.action-button-support {
277 color: var(--supportButtonColor); 277 color: pvar(--supportButtonColor);
278 278
279 my-global-icon { 279 my-global-icon {
280 @include apply-svg-color(var(--supportButtonColor)); 280 @include apply-svg-color(pvar(--supportButtonColor));
281 } 281 }
282 } 282 }
283 283
284 &.action-button-support { 284 &.action-button-support {
285 my-global-icon { 285 my-global-icon {
286 ::ng-deep path:first-child { 286 ::ng-deep path:first-child {
287 fill: var(--supportButtonHeartColor) !important; 287 fill: pvar(--supportButtonHeartColor) !important;
288 } 288 }
289 } 289 }
290 } 290 }
@@ -325,7 +325,7 @@ $video-info-margin-left: 44px;
325 background-color: #909090; 325 background-color: #909090;
326 326
327 &.liked { 327 &.liked {
328 background-color: var(--activatedActionButtonColor); 328 background-color: pvar(--activatedActionButtonColor);
329 } 329 }
330 } 330 }
331 } 331 }
@@ -356,7 +356,7 @@ $video-info-margin-left: 44px;
356 .video-info-description-more { 356 .video-info-description-more {
357 cursor: pointer; 357 cursor: pointer;
358 font-weight: $font-semibold; 358 font-weight: $font-semibold;
359 color: var(--greyForegroundColor); 359 color: pvar(--greyForegroundColor);
360 font-size: 14px; 360 font-size: 14px;
361 361
362 .glyphicon { 362 .glyphicon {
@@ -379,13 +379,13 @@ $video-info-margin-left: 44px;
379 min-width: 142px; 379 min-width: 142px;
380 padding-right: 5px; 380 padding-right: 5px;
381 display: inline-block; 381 display: inline-block;
382 color: var(--greyForegroundColor); 382 color: pvar(--greyForegroundColor);
383 font-weight: $font-bold; 383 font-weight: $font-bold;
384 } 384 }
385 385
386 a.video-attribute-value { 386 a.video-attribute-value {
387 @include disable-default-a-behaviour; 387 @include disable-default-a-behaviour;
388 color: var(--mainForegroundColor); 388 color: pvar(--mainForegroundColor);
389 389
390 &:hover { 390 &:hover {
391 opacity: 0.9; 391 opacity: 0.9;
@@ -480,7 +480,7 @@ my-video-comments {
480 a { 480 a {
481 @include disable-default-a-behaviour; 481 @include disable-default-a-behaviour;
482 482
483 color: var(--mainColor); 483 color: pvar(--mainColor);
484 transition: color 0.3s; 484 transition: color 0.3s;
485 485
486 &:hover { 486 &:hover {
@@ -503,7 +503,7 @@ my-video-comments {
503 } 503 }
504 504
505 .privacy-concerns-okay { 505 .privacy-concerns-okay {
506 background-color: var(--mainColor); 506 background-color: pvar(--mainColor);
507 margin-left: 10px; 507 margin-left: 10px;
508 } 508 }
509} 509}
diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index 84999cfb2..72e101558 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -12,7 +12,7 @@
12 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> 12 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
13 </div> 13 </div>
14 14
15 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false"> 15 <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
16 </my-video-miniature> 16 </my-video-miniature>
17 </div> 17 </div>
18 18
@@ -21,7 +21,7 @@
21 <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> 21 <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
22 </div> 22 </div>
23 23
24 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false"> 24 <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
25 </my-video-miniature> 25 </my-video-miniature>
26 </div> 26 </div>
27 27
@@ -34,7 +34,7 @@
34 </a> 34 </a>
35 </div> 35 </div>
36 36
37 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false"> 37 <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
38 </my-video-miniature> 38 </my-video-miniature>
39 </div> 39 </div>
40 40