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

Add max rows to videos list

parent 61cbafc1
......@@ -14,7 +14,7 @@
}
.margin-content {
@include grid-videos-miniature-layout;
@include grid-videos-miniature-layout-with-margins;
}
@media screen and (max-width: $mobile-view) {
......
......@@ -8,7 +8,7 @@
}
.margin-content {
@include grid-videos-miniature-layout;
@include grid-videos-miniature-layout-with-margins;
}
.section {
......
.custom-markup-container {
::ng-deep .peertube-container {
margin: 30px 0 15px;
h4 {
margin-bottom: 0;
}
.layout-row {
&.layout-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.layout-column {
&.layout-column {
display: flex;
flex-direction: column;
}
.header {
margin: 30px 0 15px;
}
h4 {
margin-bottom: 0;
}
}
}
......@@ -168,11 +168,15 @@ export class CustomMarkupService {
const model = {
onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false,
maxRows: this.buildNumber(data.maxRows) ?? -1,
sort: data.sort || '-publishedAt',
count: this.buildNumber(data.count) || 10,
categoryOneOf: this.buildArrayNumber(data.categoryOneOf) ?? [],
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)
......@@ -183,11 +187,16 @@ export class CustomMarkupService {
private containerBuilder (el: HTMLElement) {
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')
root.innerHTML = content
const layoutClass = data.layout
? 'layout-' + data.layout
: 'layout-row'
: 'layout-column'
root.classList.add('peertube-container', layoutClass)
......@@ -195,16 +204,23 @@ export class CustomMarkupService {
root.setAttribute('width', data.width)
}
if (data.title) {
const titleElement = document.createElement('h4')
titleElement.innerText = data.title
root.appendChild(titleElement)
}
if (data.title || data.description) {
const headerElement = document.createElement('div')
headerElement.classList.add('header')
if (data.title) {
const titleElement = document.createElement('h4')
titleElement.innerText = data.title
headerElement.appendChild(titleElement)
}
if (data.description) {
const descriptionElement = document.createElement('div')
descriptionElement.innerText = data.description
headerElement.append(descriptionElement)
}
if (data.description) {
const descriptionElement = document.createElement('div')
descriptionElement.innerText = data.description
root.appendChild(descriptionElement)
root.insertBefore(headerElement, root.firstChild)
}
return root
......
<div class="videos">
<my-video-miniature
*ngFor="let video of videos"
[video]="video" [user]="getUser()" [displayAsRow]="false"
[displayVideoActions]="false" [displayOptions]="displayOptions"
>
</my-video-miniature>
<div class="root">
<div class="videos" [ngStyle]="limitRowsStyle()">
<div class="video-wrapper" *ngFor="let video of videos">
<my-video-miniature
[video]="video" [user]="getUser()" [displayAsRow]="false"
[displayVideoActions]="false" [displayOptions]="displayOptions"
>
</my-video-miniature>
</div>
</div>
</div>
@import '_variables';
@import '_mixins';
@import '_miniature';
my-video-miniature {
@include margin-right(15px);
display: inline-block;
min-width: $video-thumbnail-width;
max-width: $video-thumbnail-width;
.root {
@include grid-videos-miniature-layout;
}
......@@ -20,6 +20,7 @@ export class VideosListMarkupComponent implements OnInit {
@Input() count: number
@Input() onlyDisplayTitle: boolean
@Input() filter: VideoFilter
@Input() maxRows: number
videos: Video[]
......@@ -43,6 +44,16 @@ export class VideosListMarkupComponent implements OnInit {
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 () {
if (this.onlyDisplayTitle) {
for (const key of Object.keys(this.displayOptions)) {
......
......@@ -51,7 +51,7 @@ $icon-size: 16px;
}
.margin-content {
@include grid-videos-miniature-layout;
@include grid-videos-miniature-layout-with-margins;
}
.display-as-row.videos {
......
......@@ -118,8 +118,6 @@
}
@mixin grid-videos-miniature-layout {
@include grid-videos-miniature-margins;
@media screen and (min-width: $mobile-view) {
.videos,
.playlists {
......@@ -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 = {
export type VideosListMarkupData = {
onlyDisplayTitle?: string // boolean
maxRows?: string // number
sort?: string
count?: string
count?: string // number
categoryOneOf?: string // coma separated values
languageOneOf?: string // coma separated values
onlyLocal?: string // boolean
}
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