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

Merge pull request #953 from sylvaindd/mobile-torrent-view

Browse source 
Improve mobile layout and responsiveness for torrent components
This commit is contained in:
Roger Far 2026-04-06 20:39:33 -06:00 committed by GitHub
commit ea9fc0b167
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 101 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -85,4 +85,12 @@ table {
@media screen and (max-width: 1279px) {
flex-direction: column;
}
@media screen and (max-width: 768px) {
gap: 0.5rem;
.button {
width: 100%;
}
}
}

132
client/src/app/torrent/torrent.component.html
View file

@ -23,7 +23,7 @@
@if (activeTab === 0) {
<div class="flex-container">
<div style="flex: 1 1 0">
<div class="field is-grouped">
<div class="field is-grouped is-grouped-multiline action-buttons">
<div class="control">
<button class="button is-danger" (click)="showDeleteModal()">Delete Torrent</button>
</div>
@ -44,7 +44,7 @@
</div>
<div class="field">
<label class="label">Hash</label>
{{ torrent.hash }}
<span class="break-all">{{ torrent.hash }}</span>
</div>
<div class="field">
<label class="label">Priority</label>
@ -240,72 +240,75 @@
@if (activeTab === 1) {
<div>
<div class="field">
<table class="table is-fullwidth">
<thead>
<tr>
<th>ID</th>
<th>Path</th>
<th>Size</th>
<th>Selected</th>
</tr>
</thead>
<tbody>
@for (file of torrent.files; track file.id) {
<div class="table-container">
<table class="table is-fullwidth">
<thead>
<tr>
<td>
{{ file.id }}
</td>
<td>
{{ file.path }}
</td>
<td>
{{ file.bytes | filesize }}
</td>
<td>
@if (file.selected) {
<i class="fas fa-check" style="color: green"></i>
} @else {
<i class="fas fa-times" style="color: red"></i>
}
</td>
<th>ID</th>
<th>Path</th>
<th>Size</th>
<th>Selected</th>
</tr>
}
</tbody>
</table>
</thead>
<tbody>
@for (file of torrent.files; track file.id) {
<tr>
<td>
{{ file.id }}
</td>
<td class="break-all">
{{ file.path }}
</td>
<td>
{{ file.bytes | filesize }}
</td>
<td>
@if (file.selected) {
<i class="fas fa-check" style="color: green"></i>
} @else {
<i class="fas fa-times" style="color: red"></i>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
}
@if (activeTab === 2) {
<div>
<div class="field">
<table class="table is-fullwidth is-hoverable">
<thead>
<tr>
<th style="width: 35px"></th>
<th>Link</th>
<th>Size</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@for (download of torrent.downloads; track download.downloadId) {
@let expanded = downloadExpanded[download.downloadId];
<tr (click)="downloadExpanded[download.downloadId] = !expanded">
<td style="width: 35px">
@if (!expanded) {
<i class="fas fa-caret-right"></i>
} @else {
<i class="fas fa-caret-down"></i>
}
</td>
<td>
@if (download.link) {
{{ download.link | decodeURI }}
}
@if (!download.link) {
{{ download.path }}
}
</td>
<div class="table-container">
<table class="table is-fullwidth is-hoverable">
<thead>
<tr>
<th style="width: 35px"></th>
<th>Link</th>
<th>Size</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@for (download of torrent.downloads; track download.downloadId) {
@let expanded = downloadExpanded[download.downloadId];
<tr (click)="downloadExpanded[download.downloadId] = !expanded">
<td style="width: 35px">
@if (!expanded) {
<i class="fas fa-caret-right"></i>
} @else {
<i class="fas fa-caret-down"></i>
}
</td>
<td class="break-all">
@if (download.link) {
{{ download.link | decodeURI }}
}
@if (!download.link) {
{{ download.path }}
}
</td>
<td>
{{ download.bytesTotal | filesize }}
</td>
@ -335,10 +338,10 @@
<div class="field">
<label class="label">Real-Debrid Unrestricted Link</label>
@if (download.link) {
<a href="{{ download.link }}" target="_blank"> {{ download.link | decodeURI }}</a>
<a class="break-all" href="{{ download.link }}" target="_blank"> {{ download.link | decodeURI }}</a>
}
</div>
<div class="field">
<div class="field break-all">
<label class="label">Real-Debrid Link</label>
{{ download.path }}
</div>
@ -431,8 +434,9 @@
</tr>
}
}
</tbody>
</table>
</tbody>
</table>
</div>
</div>
</div>
}

25
client/src/app/torrent/torrent.component.scss
View file

@ -8,6 +8,10 @@ table {
}
}
.break-all {
word-break: break-all;
}
.flex-container {
display: flex;
flex: 1 1 0;
@ -18,3 +22,24 @@ table {
flex-direction: column;
}
}
@media screen and (max-width: 768px) {
.action-buttons {
.control {
width: 100%;
.button {
width: 100%;
}
}
}
.tabs ul {
flex-wrap: wrap;
li {
flex-grow: 1;
text-align: center;
}
}
}