xorbitlab
/
metube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 调整媒体库网格视图的滚动与布局结构

This commit is contained in:
tigerenwork 2026-08-15 01:36:04 +08:00
parent e87c927a09
commit 0df086a7f4
2 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/app/library-browser.component.html
View File

@ -67,7 +67,8 @@
</div> </div>
</div> </div>
<div class="grid" *ngIf="view === 'grid'"> <div class="grid-wrap" *ngIf="view === 'grid'">
<div class="grid">
<div class="card" *ngFor="let file of filteredFiles; trackBy: trackByName" [class.selected]="isSelected(filePath(file))"> <div class="card" *ngFor="let file of filteredFiles; trackBy: trackByName" [class.selected]="isSelected(filePath(file))">
<input type="checkbox" class="card-check" [checked]="isSelected(filePath(file))" (change)="toggleSelect(filePath(file), $event.target.checked)" [attr.aria-label]="'选择 ' + file.name"> <input type="checkbox" class="card-check" [checked]="isSelected(filePath(file))" (change)="toggleSelect(filePath(file), $event.target.checked)" [attr.aria-label]="'选择 ' + file.name">
<div class="thumb clickable" (click)="play.emit(file)"> <div class="thumb clickable" (click)="play.emit(file)">
@ -94,6 +95,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="batchbar" [class.show]="selected.size > 0"> <div class="batchbar" [class.show]="selected.size > 0">
<span class="batch-count">已选 {{ selected.size }} 项</span> <span class="batch-count">已选 {{ selected.size }} 项</span>

4
ui/src/app/library-browser.component.sass
View File

@ -252,11 +252,13 @@
gap: 2px gap: 2px
// Grid view // Grid view
.grid .grid-wrap
flex: 1 flex: 1
min-height: 0 min-height: 0
overflow-y: auto overflow-y: auto
padding: 14px padding: 14px
.grid
display: grid display: grid
grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)) grid-template-columns: repeat(auto-fill, minmax(218px, 1fr))
gap: 14px gap: 14px