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 @@ } .margin-content { - @include grid-videos-miniature-layout; + @include grid-videos-miniature-layout-with-margins; } @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 @@ } .margin-content { - @include grid-videos-miniature-layout; + @include grid-videos-miniature-layout-with-margins; } .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 @@ .custom-markup-container { ::ng-deep .peertube-container { - margin: 30px 0 15px; + + &.layout-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + &.layout-column { + display: flex; + flex-direction: column; + } + + .header { + margin: 30px 0 15px; + } h4 { margin-bottom: 0; } - - .layout-row { - display: flex; - flex-direction: row; - } - - .layout-column { - display: flex; - flex-direction: column; - } } } 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 { 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.description) { - const descriptionElement = document.createElement('div') - descriptionElement.innerText = data.description - root.appendChild(descriptionElement) + 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) + } + + root.insertBefore(headerElement, root.firstChild) } 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 @@ -