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%;
}
}
} }

16
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,6 +240,7 @@
@if (activeTab === 1) { @if (activeTab === 1) {
<div> <div>
<div class="field"> <div class="field">
<div class="table-container">
<table class="table is-fullwidth"> <table class="table is-fullwidth">
<thead> <thead>
<tr> <tr>
@ -255,7 +256,7 @@
<td> <td>
{{ file.id }} {{ file.id }}
</td> </td>
<td> <td class="break-all">
{{ file.path }} {{ file.path }}
</td> </td>
<td> <td>
@ -274,10 +275,12 @@
</table> </table>
</div> </div>
</div> </div>
</div>
} }
@if (activeTab === 2) { @if (activeTab === 2) {
<div> <div>
<div class="field"> <div class="field">
<div class="table-container">
<table class="table is-fullwidth is-hoverable"> <table class="table is-fullwidth is-hoverable">
<thead> <thead>
<tr> <tr>
@ -298,7 +301,7 @@
<i class="fas fa-caret-down"></i> <i class="fas fa-caret-down"></i>
} }
</td> </td>
<td> <td class="break-all">
@if (download.link) { @if (download.link) {
{{ download.link | decodeURI }} {{ download.link | decodeURI }}
} }
@ -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>
@ -435,6 +438,7 @@
</table> </table>
</div> </div>
</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;
}
}
}