mirror of
https://github.com/Myxelium/Bridge-Multi.git
synced 2026-04-11 22:29:38 +00:00
27 lines
1.4 KiB
HTML
27 lines
1.4 KiB
HTML
<table
|
|
id="resultTable"
|
|
class="ui stackable selectable single sortable fixed line striped compact small table"
|
|
[class.inverted]="settingsService.theme === 'dark'">
|
|
<!-- TODO: maybe have some of these tags customizable? E.g. small/large/compact/padded -->
|
|
<!-- TODO: learn semantic themes in order to change the $mobileBreakpoint global variable (better search table adjustment) -->
|
|
<thead>
|
|
<!-- NOTE: it would be nice to make this header sticky, but Fomantic-UI doesn't currently support that -->
|
|
<tr>
|
|
<th class="collapsing" id="checkboxColumn">
|
|
<div class="ui checkbox" id="checkbox" #checkboxColumn appCheckbox (checked)="checkAll($event)">
|
|
<input type="checkbox" />
|
|
</div>
|
|
</th>
|
|
<th class="four wide" [class.sorted]="sortColumn === 'name'" [ngClass]="sortDirection" (click)="onColClicked('name')">Name</th>
|
|
<th class="four wide" [class.sorted]="sortColumn === 'artist'" [ngClass]="sortDirection" (click)="onColClicked('artist')">Artist</th>
|
|
<th class="four wide" [class.sorted]="sortColumn === 'album'" [ngClass]="sortDirection" (click)="onColClicked('album')">Album</th>
|
|
<th class="four wide" [class.sorted]="sortColumn === 'genre'" [ngClass]="sortDirection" (click)="onColClicked('genre')">Genre</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (song of songs; track song) {
|
|
<tr app-result-table-row (click)="onRowClicked(song)" [class.active]="activeSong === song" [song]="song"></tr>
|
|
}
|
|
</tbody>
|
|
</table>
|