danvics/rdt-client
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add mobile compatibility for torrent-table

Browse source 
(cherry picked from commit 65e843489dfefcb621b3874e55e81dc8cbd3ffb3)
This commit is contained in:
Sylvain DUARTE 2026-03-14 11:46:15 +01:00
parent b7090eeb3a
commit 004ed45144
No known key found for this signature in database
2 changed files with 111 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
client/src/app/torrent-table/torrent-table.component.html
View file

@ -21,7 +21,7 @@
</div>
}
<div class="table-container">
<table class="table is-fullwidth is-hoverable">
<table class="table is-fullwidth is-hoverable desktop-table">
<thead>
<tr>
<th>
@ -84,6 +84,35 @@
</tbody>
</table>
<div class="mobile-cards">
@for (torrent of torrents | sort: sortProperty : sortDirection; track torrent.torrentId) {
<div class="box mobile-card" [class.is-selected]="selectedTorrents.includes(torrent.torrentId)">
<div class="mobile-card-checkbox">
<input
type="checkbox"
(click)="toggleSelect(torrent.torrentId)"
[checked]="selectedTorrents.includes(torrent.torrentId)"
/>
</div>
<div class="mobile-card-body" (click)="openTorrent(torrent.torrentId)">
<p class="mobile-card-name">{{ torrent.rdName }}</p>
<div class="tags mb-2">
<span class="tag is-info is-light">{{ torrent | status }}</span>
@if (torrent.category) {
<span class="tag is-light">{{ torrent.category }}</span>
}
</div>
<div class="mobile-card-details">
<span class="mobile-card-detail"><span class="detail-label">Size</span> {{ torrent.rdSize | filesize }}</span>
<span class="mobile-card-detail"><span class="detail-label">Seeders</span> {{ torrent.rdSeeders }}</span>
<span class="mobile-card-detail"><span class="detail-label">Files</span> {{ torrent.files.length | number }}</span>
<span class="mobile-card-detail"><span class="detail-label">Downloads</span> {{ torrent.downloads.length | number }}</span>
</div>
</div>
</div>
}
</div>
<div class="flex-container">
@if (torrents.length > 0) {
<button class="button is-danger" (click)="showDeleteModal()" [disabled]="selectedTorrents.length === 0">

87
client/src/app/torrent-table/torrent-table.component.scss
View file

@ -5,12 +5,86 @@ table {
word-break: break-all;
}
}
// Make table horizontally scrollable on small screens
@media screen and (max-width: 768px) {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.desktop-table {
display: table;
@media screen and (max-width: 768px) {
display: none;
}
}
.mobile-cards {
display: none;
@media screen and (max-width: 768px) {
display: block;
}
}
.mobile-card {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.875rem 0.75rem !important;
margin-bottom: 0.5rem !important;
cursor: pointer;
&.is-selected {
border-left: 3px solid hsl(217, 71%, 53%);
}
&:active {
background-color: hsl(0, 0%, 96%);
}
}
.mobile-card-checkbox {
flex-shrink: 0;
padding-top: 0.125rem;
input[type='checkbox'] {
width: 1.1rem;
height: 1.1rem;
cursor: pointer;
}
}
.mobile-card-body {
flex: 1;
min-width: 0;
}
.mobile-card-name {
font-weight: 600;
font-size: 0.9rem;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0.375rem;
color: hsl(0, 0%, 21%);
}
.mobile-card-details {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
}
.mobile-card-detail {
font-size: 0.8rem;
color: hsl(0, 0%, 29%);
white-space: nowrap;
.detail-label {
color: hsl(0, 0%, 48%);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-right: 0.2em;
}
}
.flex-container {
@ -18,6 +92,7 @@ table {
flex: 1 1 0;
gap: 20px;
flex-direction: row;
margin-top: 1rem;
@media screen and (max-width: 1279px) {
flex-direction: column;