Verified Commit 5d6395af authored by Chocobozzz's avatar Chocobozzz
Browse files

Add max rows to videos list

parent 61cbafc1
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
} }
.margin-content { .margin-content {
@include grid-videos-miniature-layout; @include grid-videos-miniature-layout-with-margins;
} }
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
} }
.margin-content { .margin-content {
@include grid-videos-miniature-layout; @include grid-videos-miniature-layout-with-margins;
} }
.section { .section {
......
.custom-markup-container { .custom-markup-container {
::ng-deep .peertube-container { ::ng-deep .peertube-container {
margin: 30px 0 15px;
h4 {
margin-bottom: 0;
}
.layout-row { &.layout-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap;
} }
.layout-column { &.layout-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.header {
margin: 30px 0 15px;
}
h4 {
margin-bottom: 0;
}
} }
} }
...@@ -168,11 +168,15 @@ export class CustomMarkupService { ...@@ -168,11 +168,15 @@ export class CustomMarkupService {
const model = { const model = {
onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false, onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false,
maxRows: this.buildNumber(data.maxRows) ?? -1,
sort: data.sort || '-publishedAt', sort: data.sort || '-publishedAt',
count: this.buildNumber(data.count) || 10,
categoryOneOf: this.buildArrayNumber(data.categoryOneOf) ?? [], categoryOneOf: this.buildArrayNumber(data.categoryOneOf) ?? [],
languageOneOf: this.buildArrayString(data.languageOneOf) ?? [], languageOneOf: this.buildArrayString(data.languageOneOf) ?? [],
filter: this.buildBoolean(data.onlyLocal) ? 'local' as VideoFilter : undefined,
count: this.buildNumber(data.count) || 10 filter: this.buildBoolean(data.onlyLocal) ? 'local' as VideoFilter : undefined
} }
this.dynamicElementService.setModel(component, model) this.dynamicElementService.setModel(component, model)
...@@ -183,11 +187,16 @@ export class CustomMarkupService { ...@@ -183,11 +187,16 @@ export class CustomMarkupService {
private containerBuilder (el: HTMLElement) { private containerBuilder (el: HTMLElement) {
const data = el.dataset as ContainerMarkupData const data = el.dataset as ContainerMarkupData
// Move inner HTML in the new element we'll create
const content = el.innerHTML
el.innerHTML = ''
const root = document.createElement('div') const root = document.createElement('div')
root.innerHTML = content
const layoutClass = data.layout const layoutClass = data.layout
? 'layout-' + data.layout ? 'layout-' + data.layout
: 'layout-row' : 'layout-column'
root.classList.add('peertube-container', layoutClass) root.classList.add('peertube-container', layoutClass)
...@@ -195,16 +204,23 @@ export class CustomMarkupService { ...@@ -195,16 +204,23 @@ export class CustomMarkupService {
root.setAttribute('width', data.width) root.setAttribute('width', data.width)
} }
if (data.title || data.description) {
const headerElement = document.createElement('div')
headerElement.classList.add('header')
if (data.title) { if (data.title) {
const titleElement = document.createElement('h4') const titleElement = document.createElement('h4')
titleElement.innerText = data.title titleElement.innerText = data.title
root.appendChild(titleElement) headerElement.appendChild(titleElement)
} }
if (data.description) { if (data.description) {
const descriptionElement = document.createElement('div') const descriptionElement = document.createElement('div')
descriptionElement.innerText = data.description descriptionElement.innerText = data.description
root.appendChild(descriptionElement) headerElement.append(descriptionElement)
}
root.insertBefore(headerElement, root.firstChild)
} }
return root return root
......
<div class="videos"> <div class="root">
<div class="videos" [ngStyle]="limitRowsStyle()">
<div class="video-wrapper" *ngFor="let video of videos">
<my-video-miniature <my-video-miniature
*ngFor="let video of videos"
[video]="video" [user]="getUser()" [displayAsRow]="false" [video]="video" [user]="getUser()" [displayAsRow]="false"
[displayVideoActions]="false" [displayOptions]="displayOptions" [displayVideoActions]="false" [displayOptions]="displayOptions"
> >
</my-video-miniature> </my-video-miniature>
</div>
</div>
</div> </div>
@import '_variables'; @import '_variables';
@import '_mixins'; @import '_mixins';
@import '_miniature';
my-video-miniature { .root {
@include margin-right(15px); @include grid-videos-miniature-layout;
display: inline-block;
min-width: $video-thumbnail-width;
max-width: $video-thumbnail-width;
} }
...@@ -20,6 +20,7 @@ export class VideosListMarkupComponent implements OnInit { ...@@ -20,6 +20,7 @@ export class VideosListMarkupComponent implements OnInit {
@Input() count: number @Input() count: number
@Input() onlyDisplayTitle: boolean @Input() onlyDisplayTitle: boolean
@Input() filter: VideoFilter @Input() filter: VideoFilter
@Input() maxRows: number
videos: Video[] videos: Video[]
...@@ -43,6 +44,16 @@ export class VideosListMarkupComponent implements OnInit { ...@@ -43,6 +44,16 @@ export class VideosListMarkupComponent implements OnInit {
return this.auth.getUser() return this.auth.getUser()
} }
limitRowsStyle () {
if (this.maxRows <= 0) return {}
return {
'grid-template-rows': `repeat(${this.maxRows}, 1fr)`,
'grid-auto-rows': '0', // Set height to 0 for autogenerated grid rows
'overflow-y': 'hidden' // Hide grid items that overflow
}
}
ngOnInit () { ngOnInit () {
if (this.onlyDisplayTitle) { if (this.onlyDisplayTitle) {
for (const key of Object.keys(this.displayOptions)) { for (const key of Object.keys(this.displayOptions)) {
......
...@@ -51,7 +51,7 @@ $icon-size: 16px; ...@@ -51,7 +51,7 @@ $icon-size: 16px;
} }
.margin-content { .margin-content {
@include grid-videos-miniature-layout; @include grid-videos-miniature-layout-with-margins;
} }
.display-as-row.videos { .display-as-row.videos {
......
...@@ -118,8 +118,6 @@ ...@@ -118,8 +118,6 @@
} }
@mixin grid-videos-miniature-layout { @mixin grid-videos-miniature-layout {
@include grid-videos-miniature-margins;
@media screen and (min-width: $mobile-view) { @media screen and (min-width: $mobile-view) {
.videos, .videos,
.playlists { .playlists {
...@@ -156,3 +154,8 @@ ...@@ -156,3 +154,8 @@
} }
} }
} }
@mixin grid-videos-miniature-layout-with-margins {
@include grid-videos-miniature-margins;
@include grid-videos-miniature-layout;
}
...@@ -25,14 +25,16 @@ export type ChannelMiniatureMarkupData = { ...@@ -25,14 +25,16 @@ export type ChannelMiniatureMarkupData = {
export type VideosListMarkupData = { export type VideosListMarkupData = {
onlyDisplayTitle?: string // boolean onlyDisplayTitle?: string // boolean
maxRows?: string // number
sort?: string sort?: string
count?: string count?: string // number
categoryOneOf?: string // coma separated values categoryOneOf?: string // coma separated values
languageOneOf?: string // coma separated values languageOneOf?: string // coma separated values
onlyLocal?: string // boolean onlyLocal?: string // boolean
} }
export type ButtonMarkupData = { export type ButtonMarkupData = {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment