aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-06-09 10:59:20 +0200
committerChocobozzz <me@florianbigard.com>2021-06-09 10:59:20 +0200
commit5d6395af72e01ba7c4393b485b7089bcb33e0155 (patch)
tree1f804edcb6bc43856a48081926b3d33d734db632 /client
parent61cbafc1f80a33a895b54b15751a42e0d78af231 (diff)
downloadPeerTube-5d6395af72e01ba7c4393b485b7089bcb33e0155.tar.gz
PeerTube-5d6395af72e01ba7c4393b485b7089bcb33e0155.tar.zst
PeerTube-5d6395af72e01ba7c4393b485b7089bcb33e0155.zip
Add max rows to videos list
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss2
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.scss2
-rw-r--r--client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss18
-rw-r--r--client/src/app/shared/shared-custom-markup/custom-markup.service.ts40
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html19
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss9
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts11
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.scss2
-rw-r--r--client/src/sass/include/_miniature.scss7
9 files changed, 73 insertions, 37 deletions
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
index 1e82ac765..b3131de7e 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -14,7 +14,7 @@
14} 14}
15 15
16.margin-content { 16.margin-content {
17 @include grid-videos-miniature-layout; 17 @include grid-videos-miniature-layout-with-margins;
18} 18}
19 19
20@media screen and (max-width: $mobile-view) { 20@media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index cb3ae2b9b..cb9308dda 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -8,7 +8,7 @@
8} 8}
9 9
10.margin-content { 10.margin-content {
11 @include grid-videos-miniature-layout; 11 @include grid-videos-miniature-layout-with-margins;
12} 12}
13 13
14.section { 14.section {
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss
index 862da7c18..704d908c3 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss
+++ b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss
@@ -1,20 +1,24 @@
1.custom-markup-container { 1.custom-markup-container {
2 2
3 ::ng-deep .peertube-container { 3 ::ng-deep .peertube-container {
4 margin: 30px 0 15px;
5 4
6 h4 { 5 &.layout-row {
7 margin-bottom: 0;
8 }
9
10 .layout-row {
11 display: flex; 6 display: flex;
12 flex-direction: row; 7 flex-direction: row;
8 flex-wrap: wrap;
13 } 9 }
14 10
15 .layout-column { 11 &.layout-column {
16 display: flex; 12 display: flex;
17 flex-direction: column; 13 flex-direction: column;
18 } 14 }
15
16 .header {
17 margin: 30px 0 15px;
18 }
19
20 h4 {
21 margin-bottom: 0;
22 }
19 } 23 }
20} 24}
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
index aa5dbe643..729cd296b 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
+++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
@@ -168,11 +168,15 @@ export class CustomMarkupService {
168 168
169 const model = { 169 const model = {
170 onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false, 170 onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false,
171 maxRows: this.buildNumber(data.maxRows) ?? -1,
172
171 sort: data.sort || '-publishedAt', 173 sort: data.sort || '-publishedAt',
174 count: this.buildNumber(data.count) || 10,
175
172 categoryOneOf: this.buildArrayNumber(data.categoryOneOf) ?? [], 176 categoryOneOf: this.buildArrayNumber(data.categoryOneOf) ?? [],
173 languageOneOf: this.buildArrayString(data.languageOneOf) ?? [], 177 languageOneOf: this.buildArrayString(data.languageOneOf) ?? [],
174 filter: this.buildBoolean(data.onlyLocal) ? 'local' as VideoFilter : undefined, 178
175 count: this.buildNumber(data.count) || 10 179 filter: this.buildBoolean(data.onlyLocal) ? 'local' as VideoFilter : undefined
176 } 180 }
177 181
178 this.dynamicElementService.setModel(component, model) 182 this.dynamicElementService.setModel(component, model)
@@ -183,11 +187,16 @@ export class CustomMarkupService {
183 private containerBuilder (el: HTMLElement) { 187 private containerBuilder (el: HTMLElement) {
184 const data = el.dataset as ContainerMarkupData 188 const data = el.dataset as ContainerMarkupData
185 189
190 // Move inner HTML in the new element we'll create
191 const content = el.innerHTML
192 el.innerHTML = ''
193
186 const root = document.createElement('div') 194 const root = document.createElement('div')
195 root.innerHTML = content
187 196
188 const layoutClass = data.layout 197 const layoutClass = data.layout
189 ? 'layout-' + data.layout 198 ? 'layout-' + data.layout
190 : 'layout-row' 199 : 'layout-column'
191 200
192 root.classList.add('peertube-container', layoutClass) 201 root.classList.add('peertube-container', layoutClass)
193 202
@@ -195,16 +204,23 @@ export class CustomMarkupService {
195 root.setAttribute('width', data.width) 204 root.setAttribute('width', data.width)
196 } 205 }
197 206
198 if (data.title) { 207 if (data.title || data.description) {
199 const titleElement = document.createElement('h4') 208 const headerElement = document.createElement('div')
200 titleElement.innerText = data.title 209 headerElement.classList.add('header')
201 root.appendChild(titleElement) 210
202 } 211 if (data.title) {
212 const titleElement = document.createElement('h4')
213 titleElement.innerText = data.title
214 headerElement.appendChild(titleElement)
215 }
216
217 if (data.description) {
218 const descriptionElement = document.createElement('div')
219 descriptionElement.innerText = data.description
220 headerElement.append(descriptionElement)
221 }
203 222
204 if (data.description) { 223 root.insertBefore(headerElement, root.firstChild)
205 const descriptionElement = document.createElement('div')
206 descriptionElement.innerText = data.description
207 root.appendChild(descriptionElement)
208 } 224 }
209 225
210 return root 226 return root
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html
index a2fd2fe40..15ef9d418 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html
@@ -1,8 +1,13 @@
1<div class="videos"> 1<div class="root">
2 <my-video-miniature 2 <div class="videos" [ngStyle]="limitRowsStyle()">
3 *ngFor="let video of videos" 3
4 [video]="video" [user]="getUser()" [displayAsRow]="false" 4 <div class="video-wrapper" *ngFor="let video of videos">
5 [displayVideoActions]="false" [displayOptions]="displayOptions" 5 <my-video-miniature
6 > 6 [video]="video" [user]="getUser()" [displayAsRow]="false"
7 </my-video-miniature> 7 [displayVideoActions]="false" [displayOptions]="displayOptions"
8 >
9 </my-video-miniature>
10 </div>
11
12 </div>
8</div> 13</div>
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
index 6b7274480..5a9a926fe 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
@@ -1,10 +1,7 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3@import '_miniature';
3 4
4my-video-miniature { 5.root {
5 @include margin-right(15px); 6 @include grid-videos-miniature-layout;
6
7 display: inline-block;
8 min-width: $video-thumbnail-width;
9 max-width: $video-thumbnail-width;
10} 7}
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
index fe084afd9..d4402dd9f 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
@@ -20,6 +20,7 @@ export class VideosListMarkupComponent implements OnInit {
20 @Input() count: number 20 @Input() count: number
21 @Input() onlyDisplayTitle: boolean 21 @Input() onlyDisplayTitle: boolean
22 @Input() filter: VideoFilter 22 @Input() filter: VideoFilter
23 @Input() maxRows: number
23 24
24 videos: Video[] 25 videos: Video[]
25 26
@@ -43,6 +44,16 @@ export class VideosListMarkupComponent implements OnInit {
43 return this.auth.getUser() 44 return this.auth.getUser()
44 } 45 }
45 46
47 limitRowsStyle () {
48 if (this.maxRows <= 0) return {}
49
50 return {
51 'grid-template-rows': `repeat(${this.maxRows}, 1fr)`,
52 'grid-auto-rows': '0', // Set height to 0 for autogenerated grid rows
53 'overflow-y': 'hidden' // Hide grid items that overflow
54 }
55 }
56
46 ngOnInit () { 57 ngOnInit () {
47 if (this.onlyDisplayTitle) { 58 if (this.onlyDisplayTitle) {
48 for (const key of Object.keys(this.displayOptions)) { 59 for (const key of Object.keys(this.displayOptions)) {
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index dd9ab18a8..c8dda2900 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -51,7 +51,7 @@ $icon-size: 16px;
51} 51}
52 52
53.margin-content { 53.margin-content {
54 @include grid-videos-miniature-layout; 54 @include grid-videos-miniature-layout-with-margins;
55} 55}
56 56
57.display-as-row.videos { 57.display-as-row.videos {
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index f782d374a..0d3f2b6e0 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -118,8 +118,6 @@
118} 118}
119 119
120@mixin grid-videos-miniature-layout { 120@mixin grid-videos-miniature-layout {
121 @include grid-videos-miniature-margins;
122
123 @media screen and (min-width: $mobile-view) { 121 @media screen and (min-width: $mobile-view) {
124 .videos, 122 .videos,
125 .playlists { 123 .playlists {
@@ -156,3 +154,8 @@
156 } 154 }
157 } 155 }
158} 156}
157
158@mixin grid-videos-miniature-layout-with-margins {
159 @include grid-videos-miniature-margins;
160 @include grid-videos-miniature-layout;
161}