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

replace @angular/flex-layout in torrent-component

Browse source 
use `flex-container` class instead of `fxLayout` and set `style="flex: 1 1 0" to replicate `fxFlex`
This commit is contained in:
Cucumberrbob 2025-02-28 13:04:28 +00:00
parent 4a5be33247
commit d11900a127
No known key found for this signature in database
GPG key ID: 2B935C47401C3614
2 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,8 +18,8 @@
</div>
</div>
<div *ngIf="torrent !== null && torrent !== undefined">
<div fxLayout.lt-lg="column" fxLayout.gt-sm="row" fxLayoutGap="20px" *ngIf="activeTab === 0">
<div fxFlex>
<div class="flex-container" *ngIf="activeTab === 0">
<div style="flex: 1 1 0">
<div class="field is-grouped">
<div class="control">
<button class="button is-danger" (click)="showDeleteModal()">Delete Torrent</button>
@ -129,7 +129,7 @@
</ng-container>
</div>
</div>
<div fxFlex>
<div style="flex: 1 1 0">
<div class="field">
<label class="label">Real-Debrid ID</label>
{{ torrent.rdId }}
@ -251,8 +251,8 @@
<tr *ngIf="downloadExpanded[download.downloadId]" class="separator">
<td style="width: 35px"></td>
<td colspan="5">
<div fxLayout.lt-lg="column" fxLayout.gt-sm="row" fxLayoutGap="20px">
<div fxFlex>
<div class="flex-container">
<div style="flex: 1 1 0;">
<div class="field is-grouped">
<div class="control">
<button class="button is-primary" (click)="showDownloadRetryModal(download.downloadId)">
@ -285,7 +285,7 @@
{{ download.retryCount }} / {{ torrent.downloadRetryAttempts }}
</div>
</div>
<div fxFlex>
<div style="flex: 1 1 0;">
<div class="field">
<label class="label">Added</label>
<ng-container *ngIf="download.added">

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

@ -9,5 +9,16 @@ table {
}
.fa-download {
margin-left :12px;
}
margin-left: 12px;
}
.flex-container {
display: flex;
flex: 1 1 0;
gap: 20px;
flex-direction: row;
@media screen and (max-width: 1279px) {
flex-direction: column;
}
}