myxelium/Bridge-Multi
1
0
Fork 0
mirror of https://github.com/Myxelium/Bridge-Multi.git synced 2026-04-11 22:29:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Column spaceing and selection

Browse Source
This commit is contained in:
SocksOnHead
2025-08-06 03:19:51 +02:00
parent 57e8cea5d0
commit 2925a5a237
3 changed files with 45 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src-angular/app/components/browse/result-table/result-table.component.html
View File

@@ -1,21 +1,42 @@
<div class="flex-1 flex flex-col overflow-hidden">
<div class="flex-shrink-0">
<table class="table table-zebra w-full" [class.table-xs]="settingsService.isCompactTable" style="table-layout: fixed">
<thead class="bg-base-100">
<ng-container *ngTemplateOutlet="headerTemplate; context: { isVisible: true }"></ng-container>
</thead>
</table>
</div>
<cdk-virtual-scroll-viewport
#viewport
class="flex-1 overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full"
[itemSize]="tableRowHeight"
(scroll)="onViewportScroll()">
<table class="table table-zebra w-full" [class.table-xs]="settingsService.isCompactTable" style="table-layout: fixed">
<!-- Invisible header for column alignment -->
<thead class="invisible absolute opacity-0" style="height: 0; overflow: hidden">
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<table class="table table-zebra w-full" [class.table-xs]="settingsService.isCompactTable">
<thead>
<tr [style.top]="tableHeaderPosition" class="sticky top-0 bg-base-100 z-10">
<th class="collapsing" id="checkboxColumn">
<input type="checkbox" class="checkbox" [(ngModel)]="allSelected" />
</th>
<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('name')">
Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('artist')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('artist')">
Artist
<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('album')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('album')">
Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('genre')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('genre')">
Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('year')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('year')">
Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('charter')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('charter')">
Charter <i *ngIf="sortColumn === 'charter'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('length')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('length')">
Length (min) <i *ngIf="sortColumn === 'length'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('difficulty')" [ngClass]="sortDirection" class="cursor-pointer">Difficulty</th>
<th *ngIf="hasColumn('uploaded')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('modifiedTime')">
Upload Date <i *ngIf="sortColumn === 'modifiedTime'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
</tr>
</thead>
<tbody>
<tr
@@ -30,37 +51,3 @@
</table>
</cdk-virtual-scroll-viewport>
</div>
<ng-template #headerTemplate>
<tr>
<th class="collapsing" id="checkboxColumn">
<input type="checkbox" class="checkbox" [(ngModel)]="allSelected" />
</th>
<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('name')">
Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('artist')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('artist')">
Artist
<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('album')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('album')">
Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('genre')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('genre')">
Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('year')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('year')">
Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('charter')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('charter')">
Charter <i *ngIf="sortColumn === 'charter'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('length')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('length')">
Length (min) <i *ngIf="sortColumn === 'length'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('difficulty')" [ngClass]="sortDirection" class="cursor-pointer">Difficulty</th>
<th *ngIf="hasColumn('uploaded')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('modifiedTime')">
Upload Date <i *ngIf="sortColumn === 'modifiedTime'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
</tr>
</ng-template>

9
src-angular/app/components/browse/result-table/result-table.component.ts
View File

@@ -119,6 +119,15 @@ export class ResultTableComponent implements OnInit, OnDestroy {
}
}
public get tableHeaderPosition(): string {
if (!this.viewport) {
return '-0px'
}
const offset = this.viewport.getOffsetToRenderedContentStart()
return `-${offset}px`
}
@HostListener('window:resize', ['$event'])
onResize() {
if (this.viewport) {