Automatic colspan for tables

6 files changed, 31 insertions, 5 deletions

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 2571cc952..5833e3465 100644
--- 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
index 000000000..8da89b668
--- /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 f72d60313..6ea494129 100644
--- 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 0bdf27263..d3ec31d6e 100644
--- 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 8cf9aa4c9..609a8cecd 100644
--- 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 1a13e0207..a98333339 100644
--- 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>