Automatic colspan for tables

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 14c62f1af0bb2bddb468880fe44e154af1993308..3326d59db552f78f0f2db9d79f58fb595a307c91 100644 (file)
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -72,7 +72,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No follower found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>Your instance doesn't have any follower.</ng-container>

diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index f46f3637551bd09af56eebaeaf9c5a53037f93c3..07495a74ced08271c82cc478f96dabc178f06044 100644 (file)
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -79,7 +79,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No host found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>Your instance is not following anyone.</ng-container>

diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
index 2b52d3fd8750e6375c404feaf0e0f78f1eb1ef94..85b9d8913131e027b2c74447140d13201f9873fe 100644 (file)
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
@@ -57,7 +57,7 @@
 
   <ng-template pTemplate="rowexpansion" let-redundancy>
     <tr *ngIf="redundancy.redundancies.files.length !== 0">
-      <td class="expand-cell" [attr.colspan]="getColspan()">
+      <td class="expand-cell" myAutoColspan>
         <div *ngFor="let file of redundancy.redundancies.files" class="expansion-block">
           <my-video-redundancy-information [redundancyElement]="file"></my-video-redundancy-information>
         </div>
@@ -65,7 +65,7 @@
     </tr>
 
     <tr *ngIf="redundancy.redundancies.streamingPlaylists.length !== 0">
-      <td class="expand-cell" [attr.colspan]="getColspan()">
+      <td class="expand-cell" myAutoColspan>
         <div *ngFor="let playlist of redundancy.redundancies.streamingPlaylists">
           <my-video-redundancy-information [redundancyElement]="playlist"></my-video-redundancy-information>
         </div>
@@ -75,7 +75,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="isDisplayingRemoteVideos()" i18n>Your instance doesn't mirror any video.</ng-container>
           <ng-container *ngIf="!isDisplayingRemoteVideos()" i18n>Your instance has no mirrored videos.</ng-container>

diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index d65467a4d28541a67e47818e685a16a811082237..efcefd5099c6514b138160a9a2d9332d94af16ed 100644 (file)
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -63,12 +63,6 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
         })
   }
 
-  getColspan () {
-    if (this.isDisplayingRemoteVideos()) return 5
-
-    return 4
-  }
-
   isDisplayingRemoteVideos () {
     return this.displayType === 'remote-videos'
   }

diff --git a/client/src/app/+admin/moderation/registration-list/registration-list.component.html b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
index a2b88810142236de41c7d7f125d1ce5fc2972f6c..8e5e2cf494276c9d49190fed7e60f23ac9e206a8 100644 (file)
--- a/client/src/app/+admin/moderation/registration-list/registration-list.component.html
+++ b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
@@ -102,7 +102,7 @@
 
   <ng-template pTemplate="rowexpansion" let-registration>
     <tr>
-      <td colspan="9">
+      <td myAutoColspan>
         <div class="moderation-expanded">
           <div class="left">
             <div class="d-flex">
@@ -122,7 +122,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="9">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No registrations found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No registrations found.</ng-container>

diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index 28109d007a4a29b06f00c2a6975e3f17d8d55b5d..53bc6a178cb967035e9c65d288f2ff8ff0e22961 100644 (file)
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -68,7 +68,7 @@
 
   <ng-template pTemplate="rowexpansion" let-videoBlock>
     <tr>
-      <td class="expand-cell" colspan="6">
+      <td class="expand-cell" myAutoColspan>
         <div class="d-flex moderation-expanded">
 
           <div class="left">
@@ -87,7 +87,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No blocked video found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No blocked video found.</ng-container>

diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.html b/client/src/app/+admin/overview/comments/video-comment-list.component.html
index b0d8131bfaa1266e3ff766021ccadb1220d10d25..df9bccc0ad8e4d4cc02bbce864220257bb4b388d 100644 (file)
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.html
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.html
@@ -93,7 +93,7 @@
 
   <ng-template pTemplate="rowexpansion" let-videoComment>
     <tr>
-      <td class="expand-cell" colspan="5">
+      <td class="expand-cell" myAutoColspan>
         <div [innerHTML]="videoComment.textHtml"></div>
       </td>
     </tr>
@@ -101,7 +101,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="7">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No comments found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No comments found.</ng-container>

diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index 30859a3ad167f3d1a8f4b1bec42dde1f91177d12..e37ad2a3ea5a1dda1ada5a0725d55b99662d4fc5 100644 (file)
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@@ -146,7 +146,7 @@
 
   <ng-template pTemplate="rowexpansion" let-user>
     <tr class="user-blocked-reason">
-      <td colspan="7">
+      <td myAutoColspan>
         <span i18n class="ban-reason-label">Ban reason:</span>
         {{ user.blockedReason }}
       </td>

diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index 35b1f9dbd00b11ba4cfcb0f852f1296955c2dad8..c4f78cadc7f7f56224dcb8d6d9dc3259f9f3b30a 100644 (file)
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -100,7 +100,7 @@
 
   <ng-template pTemplate="rowexpansion" let-video>
     <tr>
-      <td class="video-info expand-cell" colspan="7">
+      <td class="video-info expand-cell" myAutoColspan>
         <div>
           <div *ngIf="isWebTorrent(video)">
             WebTorrent:

diff --git a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
index 5356e0e03766977bc410f355c35ad9ff3233549b..a759e91865d74be784e3994dec473a661bfe11e8 100644 (file)
--- a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
@@ -87,7 +87,7 @@
 
   <ng-template pTemplate="rowexpansion" let-runnerJob>
     <tr>
-      <td colspan="9">
+      <td myAutoColspan>
         <div class="mt-2 fs-7 font-monospace">
           Parent job: {{ runnerJob.parent?.uuid || '-' }} <br />
           Processed on {{ (runnerJob.startedAt || '-') }} <br />
@@ -111,7 +111,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="9">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container i18n>No runner jobs found.</ng-container>
         </div>

diff --git a/client/src/app/+admin/system/runners/runner-list/runner-list.component.html b/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
index 606eb9afd2020734d115a80f56a4b1d8e7faec0c..b131d1a7479cfb28bbaeca98af69b163745c4a6d 100644 (file)
--- a/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
@@ -51,7 +51,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container i18n>No remote runners found.</ng-container>
         </div>

diff --git a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
index 2fd23e2fc6e8cb2d8a8c117ee4c55fc7a53083c8..3e5cea8813bed02b075eece705ca6692c7d7016d 100644 (file)
--- a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
@@ -55,7 +55,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="4">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container i18n>No registration token found for remote runners.</ng-container>
         </div>

diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index 5db1a9bb2d957b90c0c3760f29c17e9b522c000b..40bfdcdf16e4acaab937cba2918d2a5081b0b69d 100644 (file)
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -67,7 +67,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container i18n>No ownership change request found.</ng-container>
         </div>

diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
index 92a4a4a525404e36337c56b7280fa31e1b4f5391..d25eff24ce7470bd06a6c23b69ac37527e227468 100644 (file)
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
@@ -72,7 +72,7 @@
 
   <ng-template pTemplate="rowexpansion" let-videoImport>
     <tr class="video-import-error" *ngIf="videoImport.error">
-      <td colspan="6">
+      <td myAutoColspan>
         <pre>{{ videoImport.error }}</pre>
       </td>
     </tr>

diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 2571cc952008cf2ed3232dab07bd173657fd3831..5833e3465cf3d138d8ba951d5f50fef71cedbbc0 100644 (file)
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -136,10 +136,10 @@
 
   <ng-template pTemplate="rowexpansion" let-abuse>
       <tr>
-        <td *ngIf="isAdminView()" class="expand-cell" colspan="8">
+        <td *ngIf="isAdminView()" class="expand-cell" myAutoColspan>
           <my-abuse-details [abuse]="abuse" [isAdminView]="true"></my-abuse-details>
         </td>
-        <td *ngIf="!isAdminView()" class="expand-cell" colspan="6">
+        <td *ngIf="!isAdminView()" class="expand-cell" myAutoColspan>
           <my-abuse-details [abuse]="abuse" [isAdminView]="false"></my-abuse-details>
         </td>
       </tr>
@@ -147,7 +147,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No abuses found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No abuses found.</ng-container>

diff --git a/client/src/app/shared/shared-main/angular/auto-colspan.directive.ts b/client/src/app/shared/shared-main/angular/auto-colspan.directive.ts
new file mode 100644 (file)
index 0000000..8da89b6
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/auto-colspan.directive.ts
@@ -0,0 +1,22 @@
+import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core'
+
+@Directive({
+  selector: '[myAutoColspan]'
+})
+export class AutoColspanDirective implements AfterViewInit {
+
+  constructor (
+    private host: ElementRef,
+    private renderer: Renderer2
+  ) { }
+
+  ngAfterViewInit () {
+    const el = this.host.nativeElement as HTMLElement
+    const table = el.closest('table')
+    if (!table) throw new Error('table element not found')
+
+    const th = table.querySelectorAll('th')
+
+    this.renderer.setAttribute(el, 'colspan', th.length + '')
+  }
+}

diff --git a/client/src/app/shared/shared-main/angular/index.ts b/client/src/app/shared/shared-main/angular/index.ts
index f72d603132e5efda526faa15dd92c359c4e5ac33..6ea494129e59340183ae6c2dd47350bd6a51d793 100644 (file)
--- a/client/src/app/shared/shared-main/angular/index.ts
+++ b/client/src/app/shared/shared-main/angular/index.ts
@@ -1,3 +1,4 @@
+export * from './auto-colspan.directive'
 export * from './autofocus.directive'
 export * from './bytes.pipe'
 export * from './defer-loading.directive'

diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 0bdf272634fbf2496643bb7a7c06595d7a1efc1c..d3ec31d6eea84e110e06c7fb1a3cc71457589d27 100644 (file)
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -18,6 +18,7 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { AccountService, SignupLabelComponent } from './account'
 import {
+  AutoColspanDirective,
   AutofocusDirective,
   BytesPipe,
   DeferLoadingDirective,
@@ -89,6 +90,7 @@ import { VideoChannelService } from './video-channel'
     DurationFormatterPipe,
     AutofocusDirective,
     DeferLoadingDirective,
+    AutoColspanDirective,
 
     InfiniteScrollerDirective,
     PeerTubeTemplateDirective,
@@ -150,6 +152,7 @@ import { VideoChannelService } from './video-channel'
     DurationFormatterPipe,
     AutofocusDirective,
     DeferLoadingDirective,
+    AutoColspanDirective,
 
     InfiniteScrollerDirective,
     PeerTubeTemplateDirective,

diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index 8cf9aa4c9649d9d0d11bf40296d7bacf49fd0b58..609a8cecd3dc17054ef530abdbb32cca9bb468ca 100644 (file)
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -49,7 +49,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="3">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No account found.</ng-container>

diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index 1a13e0207fadbc413a3666723870bb83118dded3..a98333339c7de7b242ead777e291dc7752b5928f 100644 (file)
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -51,7 +51,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="3">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No server found.</ng-container>