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) { @media screen and (max-width: 1279px) {
flex-direction: column; 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) { @if (activeTab === 0) {
<div class="flex-container"> <div class="flex-container">
<div style="flex: 1 1 0"> <div style="flex: 1 1 0">
<div class="field is-grouped"> <div class="field is-grouped is-grouped-multiline action-buttons">
<div class="control"> <div class="control">
<button class="button is-danger" (click)="showDeleteModal()">Delete Torrent</button> <button class="button is-danger" (click)="showDeleteModal()">Delete Torrent</button>
</div> </div>
@ -44,7 +44,7 @@
</div> </div>
<div class="field"> <div class="field">
<label class="label">Hash</label> <label class="label">Hash</label>
{{ torrent.hash }} <span class="break-all">{{ torrent.hash }}</span>
</div> </div>
<div class="field"> <div class="field">
<label class="label">Priority</label> <label class="label">Priority</label>
@ -240,72 +240,75 @@
@if (activeTab === 1) { @if (activeTab === 1) {
<div> <div>
<div class="field"> <div class="field">
<table class="table is-fullwidth"> <div class="table-container">
<thead> <table class="table is-fullwidth">
<tr> <thead>
<th>ID</th>
<th>Path</th>
<th>Size</th>
<th>Selected</th>
</tr>
</thead>
<tbody>
@for (file of torrent.files; track file.id) {
<tr> <tr>
<td> <th>ID</th>
{{ file.id }} <th>Path</th>
</td> <th>Size</th>
<td> <th>Selected</th>
{{ 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> </tr>
} </thead>
</tbody> <tbody>
</table> @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>
</div> </div>
} }
@if (activeTab === 2) { @if (activeTab === 2) {
<div> <div>
<div class="field"> <div class="field">
<table class="table is-fullwidth is-hoverable"> <div class="table-container">
<thead> <table class="table is-fullwidth is-hoverable">
<tr> <thead>
<th style="width: 35px"></th> <tr>
<th>Link</th> <th style="width: 35px"></th>
<th>Size</th> <th>Link</th>
<th>Status</th> <th>Size</th>
</tr> <th>Status</th>
</thead> </tr>
<tbody> </thead>
@for (download of torrent.downloads; track download.downloadId) { <tbody>
@let expanded = downloadExpanded[download.downloadId]; @for (download of torrent.downloads; track download.downloadId) {
<tr (click)="downloadExpanded[download.downloadId] = !expanded"> @let expanded = downloadExpanded[download.downloadId];
<td style="width: 35px"> <tr (click)="downloadExpanded[download.downloadId] = !expanded">
@if (!expanded) { <td style="width: 35px">
<i class="fas fa-caret-right"></i> @if (!expanded) {
} @else { <i class="fas fa-caret-right"></i>
<i class="fas fa-caret-down"></i> } @else {
} <i class="fas fa-caret-down"></i>
</td> }
<td> </td>
@if (download.link) { <td class="break-all">
{{ download.link | decodeURI }} @if (download.link) {
} {{ download.link | decodeURI }}
@if (!download.link) { }
{{ download.path }} @if (!download.link) {
} {{ download.path }}
</td> }
</td>
<td> <td>
{{ download.bytesTotal | filesize }} {{ download.bytesTotal | filesize }}
</td> </td>
@ -335,10 +338,10 @@
<div class="field"> <div class="field">
<label class="label">Real-Debrid Unrestricted Link</label> <label class="label">Real-Debrid Unrestricted Link</label>
@if (download.link) { @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>
<div class="field"> <div class="field break-all">
<label class="label">Real-Debrid Link</label> <label class="label">Real-Debrid Link</label>
{{ download.path }} {{ download.path }}
</div> </div>
@ -431,8 +434,9 @@
</tr> </tr>
} }
} }
</tbody> </tbody>
</table> </table>
</div>
</div> </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 { .flex-container {
display: flex; display: flex;
flex: 1 1 0; flex: 1 1 0;
@ -18,3 +22,24 @@ table {
flex-direction: column; 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;
}
}
}