aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/video
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/shared/video
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/shared/video')
-rw-r--r--client/src/app/shared/video/abstract-video-list.html1
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss25
-rw-r--r--client/src/app/shared/video/feed.component.scss2
-rw-r--r--client/src/app/shared/video/modals/video-download.component.scss4
-rw-r--r--client/src/app/shared/video/video-miniature.component.html2
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss33
-rw-r--r--client/src/app/shared/video/video-miniature.component.ts1
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.scss8
8 files changed, 58 insertions, 18 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index a811fc0a8..cd8a5b840 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -36,6 +36,7 @@
36 </div> 36 </div>
37 37
38 <my-video-miniature 38 <my-video-miniature
39 [fitWidth]="true"
39 [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType" 40 [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
40 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions" 41 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
41 (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)" 42 (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 4149c9109..2aab40ea8 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -1,6 +1,24 @@
1@import '_bootstrap-variables';
2@import '_variables';
1@import '_mixins'; 3@import '_mixins';
2@import '_miniature'; 4@import '_miniature';
3 5
6.videos {
7 display: grid;
8 column-gap: calc(10px + .2%);
9 grid-template-columns: repeat(
10 auto-fill,
11 minmax(
12 var(--miniature-min-width, #{$video-thumbnail-width}),
13 1fr
14 )
15 );
16
17 @media screen and (min-width: #{breakpoint(xxl)}) {
18 --miniature-min-width: 300px;
19 }
20}
21
4.videos-header { 22.videos-header {
5 display: flex; 23 display: flex;
6 justify-content: space-between; 24 justify-content: space-between;
@@ -45,13 +63,16 @@
45 margin-top: -10px; 63 margin-top: -10px;
46 padding-top: 20px; 64 padding-top: 20px;
47 65
66 // make the element span a full grid row within .videos grid
67 grid-column: 1 / -1;
68
48 &:not(:first-child) { 69 &:not(:first-child) {
49 border-top: 1px solid $separator-border-color; 70 border-top: 1px solid $separator-border-color;
50 } 71 }
51} 72}
52 73
53.margin-content { 74:host-context(.main-col:not(.expanded)) .margin-content {
54 @include adapt-margin-content-width; 75 @include adapt-margin-content-width($fluid: true);
55} 76}
56 77
57@media screen and (max-width: $mobile-view) { 78@media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss
index f39e409a3..34dd0e937 100644
--- a/client/src/app/shared/video/feed.component.scss
+++ b/client/src/app/shared/video/feed.component.scss
@@ -15,6 +15,6 @@
15 position: relative; 15 position: relative;
16 top: -2px; 16 top: -2px;
17 17
18 @include apply-svg-color(var(--mainForegroundColor)) 18 @include apply-svg-color(pvar(--mainForegroundColor))
19 } 19 }
20} 20}
diff --git a/client/src/app/shared/video/modals/video-download.component.scss b/client/src/app/shared/video/modals/video-download.component.scss
index 7e2dd7d2f..b09078bea 100644
--- a/client/src/app/shared/video/modals/video-download.component.scss
+++ b/client/src/app/shared/video/modals/video-download.component.scss
@@ -41,13 +41,13 @@
41 min-width: 142px; 41 min-width: 142px;
42 padding-right: 5px; 42 padding-right: 5px;
43 display: inline-block; 43 display: inline-block;
44 color: var(--greyForegroundColor); 44 color: pvar(--greyForegroundColor);
45 font-weight: $font-bold; 45 font-weight: $font-bold;
46 } 46 }
47 47
48 a.metadata-attribute-value { 48 a.metadata-attribute-value {
49 @include disable-default-a-behaviour; 49 @include disable-default-a-behaviour;
50 color: var(--mainForegroundColor); 50 color: pvar(--mainForegroundColor);
51 51
52 &:hover { 52 &:hover {
53 opacity: 0.9; 53 opacity: 0.9;
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index c9ac97762..d354a2930 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -1,4 +1,4 @@
1<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()"> 1<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()">
2 <my-video-thumbnail 2 <my-video-thumbnail
3 [video]="video" [nsfw]="isVideoBlur" 3 [video]="video" [nsfw]="isVideoBlur"
4 [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)" 4 [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 23d918d00..849bd54bb 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -6,7 +6,6 @@ $more-button-width: 41px;
6$more-margin-right: 15px; 6$more-margin-right: 15px;
7 7
8.video-miniature { 8.video-miniature {
9 width: $video-miniature-width;
10 display: inline-flex; 9 display: inline-flex;
11 flex-direction: column; 10 flex-direction: column;
12 margin-bottom: $video-miniature-margin-bottom; 11 margin-bottom: $video-miniature-margin-bottom;
@@ -19,14 +18,16 @@ $more-margin-right: 15px;
19 .video-miniature-information { 18 .video-miniature-information {
20 width: $video-miniature-width - $more-button-width - $more-margin-right; 19 width: $video-miniature-width - $more-button-width - $more-margin-right;
21 line-height: normal; 20 line-height: normal;
21 font-size: 13px;
22 22
23 .video-miniature-name { 23 .video-miniature-name {
24 @include miniature-name; 24 @include miniature-name;
25 font-size: 110%;
25 } 26 }
26 27
27 .video-miniature-created-at-views { 28 .video-miniature-created-at-views {
28 display: block; 29 display: block;
29 font-size: 13px; 30 font-size: 95%;
30 } 31 }
31 32
32 .video-miniature-account, 33 .video-miniature-account,
@@ -35,8 +36,8 @@ $more-margin-right: 15px;
35 @include ellipsis; 36 @include ellipsis;
36 37
37 display: block; 38 display: block;
38 font-size: 13px; 39 font-size: 95%;
39 color: var(--greyForegroundColor); 40 color: pvar(--greyForegroundColor);
40 41
41 &:hover { 42 &:hover {
42 color: $grey-foreground-hover-color; 43 color: $grey-foreground-hover-color;
@@ -87,10 +88,6 @@ $more-margin-right: 15px;
87 @media screen and (max-width: $small-view) { 88 @media screen and (max-width: $small-view) {
88 .video-miniature-information { 89 .video-miniature-information {
89 margin: 0 10px; 90 margin: 0 10px;
90
91 .video-miniature-name {
92 margin-top: 0;
93 }
94 } 91 }
95 92
96 .video-actions { 93 .video-actions {
@@ -109,6 +106,24 @@ $more-margin-right: 15px;
109 opacity: 1; 106 opacity: 1;
110 } 107 }
111 108
109 &.fit-width {
110 width: 100%;
111 height: unset;
112 margin-bottom: $video-miniature-margin-bottom / 2;
113
114 .video-bottom {
115 width: 100% !important;
116
117 .video-miniature-information {
118 width: calc(100% - 40px) !important;
119 }
120 }
121
122 my-video-thumbnail {
123 @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
124 }
125 }
126
112 &.display-as-row { 127 &.display-as-row {
113 flex-direction: row; 128 flex-direction: row;
114 margin-bottom: 0; 129 margin-bottom: 0;
@@ -137,7 +152,7 @@ $more-margin-right: 15px;
137 .video-miniature-created-at-views, 152 .video-miniature-created-at-views,
138 .video-miniature-account, 153 .video-miniature-account,
139 .video-miniature-channel { 154 .video-miniature-channel {
140 font-size: 14px; 155 font-size: 95%;
141 width: fit-content; 156 width: fit-content;
142 } 157 }
143 158
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 88b21b3a5..a1d4f0e81 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -55,6 +55,7 @@ export class VideoMiniatureComponent implements OnInit {
55 } 55 }
56 @Input() displayAsRow = false 56 @Input() displayAsRow = false
57 @Input() displayVideoActions = true 57 @Input() displayVideoActions = true
58 @Input() fitWidth = false
58 59
59 @Output() videoBlacklisted = new EventEmitter() 60 @Output() videoBlacklisted = new EventEmitter()
60 @Output() videoUnblacklisted = new EventEmitter() 61 @Output() videoUnblacklisted = new EventEmitter()
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 5fca916f0..feff78a87 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -14,7 +14,7 @@
14 14
15 div { 15 div {
16 height: 100%; 16 height: 100%;
17 background-color: var(--mainColor); 17 background-color: pvar(--mainColor);
18 } 18 }
19 } 19 }
20 20
@@ -25,7 +25,8 @@
25 25
26 border-radius: 3px; 26 border-radius: 3px;
27 font-size: 12px; 27 font-size: 12px;
28 font-weight: $font-bold; 28 font-weight: $font-semibold;
29 line-height: 1.2;
29 z-index: z(miniature); 30 z-index: z(miniature);
30 } 31 }
31 32
@@ -34,6 +35,7 @@
34 padding: 0 5px; 35 padding: 0 5px;
35 left: 5px; 36 left: 5px;
36 top: 5px; 37 top: 5px;
38 font-weight: $font-bold;
37 39
38 &.warning { background-color: orange; } 40 &.warning { background-color: orange; }
39 &.danger { background-color: red; } 41 &.danger { background-color: red; }
@@ -41,7 +43,7 @@
41 43
42 .video-thumbnail-duration-overlay { 44 .video-thumbnail-duration-overlay {
43 position: absolute; 45 position: absolute;
44 padding: 0 5px; 46 padding: 0 3px;
45 right: 5px; 47 right: 5px;
46 bottom: 5px; 48 bottom: 5px;
47 } 49 }