fix: Fix various styling issues (#4935)

Ombi-app · May 27, 2023 · 90b934a · 90b934a
1 parent f4af21b
commit 90b934a
Show file tree

Hide file tree

Showing 19 changed files with 330 additions and 341 deletions.
diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.html b/src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.html
@@ -5,13 +5,13 @@
     <!-- <div class="row"> -->
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group">
-            <button type="button" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.AllRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.PendingRequests' | translate}}</button>
+            <button type="button" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.AllRequests' | translate}}</button>
+            <button type="button" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.PendingRequests' | translate}}</button>
             <button type="button" (click)="switchFilter(RequestFilter.Processing)" [attr.color]="currentFilter === RequestFilter.Processing ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Processing ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.ProcessingRequests' | translate}}</button>
+                class="grow">{{'Requests.ProcessingRequests' | translate}}</button>
             <button type="button" (click)="switchFilter(RequestFilter.Available)" [attr.color]="currentFilter === RequestFilter.Available ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Available ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.AvailableRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.DeniedRequests' | translate}}</button>
+                class="grow">{{'Requests.AvailableRequests' | translate}}</button>
+            <button type="button" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.DeniedRequests' | translate}}</button>
         </div>
     </div>
 
@@ -69,4 +69,4 @@
     </table>
 
     <mat-paginator [length]="resultsLength" [pageSize]="gridCount"></mat-paginator>
-</div>
+</div>
diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html b/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html
@@ -5,13 +5,13 @@
     <!-- <div class="row"> -->
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group">
-            <button type="button" id="filterAll" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.AllRequests' | translate}}</button>
-            <button type="button" id="filterPending" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.PendingRequests' | translate}}</button>
+            <button type="button" id="filterAll" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.AllRequests' | translate}}</button>
+            <button type="button" id="filterPending" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.PendingRequests' | translate}}</button>
             <button type="button" id="filterProcessing" (click)="switchFilter(RequestFilter.Processing)" [attr.color]="currentFilter === RequestFilter.Processing ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Processing ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.ProcessingRequests' | translate}}</button>
+                class="grow">{{'Requests.ProcessingRequests' | translate}}</button>
             <button type="button" id="filterAvailable" (click)="switchFilter(RequestFilter.Available)" [attr.color]="currentFilter === RequestFilter.Available ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Available ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.AvailableRequests' | translate}}</button>
-            <button type="button" id="filterDenied" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.DeniedRequests' | translate}}</button>
+                class="grow">{{'Requests.AvailableRequests' | translate}}</button>
+            <button type="button" id="filterDenied" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.DeniedRequests' | translate}}</button>
         </div>
     </div>
 

diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html b/src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html
@@ -5,13 +5,13 @@
 
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group">
-            <button type="button" id="filterAll" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.AllRequests' | translate}}</button>
-            <button type="button" id="filterPending" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.PendingRequests' | translate}}</button>
+            <button type="button" id="filterAll" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.AllRequests' | translate}}</button>
+            <button type="button" id="filterPending" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.PendingRequests' | translate}}</button>
             <button type="button" id="filterProcessing" (click)="switchFilter(RequestFilter.Processing)" [attr.color]="currentFilter === RequestFilter.Processing ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Processing ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.ProcessingRequests' | translate}}</button>
+                class="grow">{{'Requests.ProcessingRequests' | translate}}</button>
             <button type="button" id="filterAvailable" (click)="switchFilter(RequestFilter.Available)" [attr.color]="currentFilter === RequestFilter.Available ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Available ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.AvailableRequests' | translate}}</button>
-            <button type="button" id="filterDenied" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.DeniedRequests' | translate}}</button>
+                class="grow">{{'Requests.AvailableRequests' | translate}}</button>
+            <button type="button" id="filterDenied" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.DeniedRequests' | translate}}</button>
         </div>
     </div>
 
@@ -63,7 +63,7 @@
         <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef> </th>
             <td mat-cell *matCellDef="let element">
-                <a id="detailsButton{{element.id}}" mat-raised-button color="accent" [routerLink]="'/details/tv/' + element.parentRequest.externalProviderId">{{'Requests.Details' | translate}}</a> 
+                <a id="detailsButton{{element.id}}" mat-raised-button color="accent" [routerLink]="'/details/tv/' + element.parentRequest.externalProviderId">{{'Requests.Details' | translate}}</a>
                 <button id="optionsButton{{element.id}}" mat-raised-button color="warn" (click)="openOptions(element)" *ngIf="isAdmin">{{'Requests.Options' | translate}}</button>
             </td>
         </ng-container>

diff --git a/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.html b/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.html
@@ -2,26 +2,35 @@
 <settings-menu></settings-menu>
 
 <div class="small-middle-container">
-<table class="table table-striped table-hover table-responsive table-condensed">
-    <thead>
-        <tr>
-            <td>Title</td>
-            <td>Type</td>
-            <td>Retry Count</td>
-            <td>Error Description</td>
-            <td>Delete</td>
-        </tr>
-    </thead>
-    <tbody>
-        <tr *ngFor="let v of vm">
-            <td class="vcenter">
-                {{v.title}}
-            </td>
-            <td>{{RequestType[v.type] | humanize}}</td>
-            <td class="vcenter">{{v.retryCount}}</td>
-            <td class="vcenter"> <i [pTooltip]="v.error" class="fas fa-info-circle"></i></td>
-            <td class="vcenter"><button type="button" class="mat-focus-indicator mat-flat-button mat-button-base mat-warn" (click)="remove(v)">Remove</button></td>
-        </tr>
-    </tbody>
-</table>
+  <table mat-table [dataSource]="vm">
+
+    <ng-container matColumnDef="title">
+      <th mat-header-cell *matHeaderCellDef>Title</th>
+      <td mat-cell *matCellDef="let v">{{v.title}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="type">
+      <th mat-header-cell *matHeaderCellDef>Type</th>
+      <td mat-cell *matCellDef="let v">{{RequestType[v.type] | humanize}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="retryCount">
+      <th mat-header-cell *matHeaderCellDef>Retry Count</th>
+      <td mat-cell *matCellDef="let v">{{v.retryCount}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="errorDescription">
+      <th mat-header-cell *matHeaderCellDef>Error Description</th>
+      <td mat-cell *matCellDef="let v"><i [pTooltip]="v.error" class="fas fa-info-circle"></i></td>
+    </ng-container>
+
+    <ng-container matColumnDef="deleteBtn">
+      <th mat-header-cell *matHeaderCellDef>Delete</th>
+      <td mat-cell *matCellDef="let v"><button mat-raised-button color="warn" (click)="remove(v)">Remove</button></td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+    <tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
+
+  </table>
 </div>
diff --git a/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.ts b/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.ts
@@ -8,6 +8,7 @@ import { RequestRetryService } from "../../services";
 })
 export class FailedRequestsComponent implements OnInit {
 
+    public columnsToDisplay = ["title", "type", "retryCount", "errorDescription", "deleteBtn"];
     public vm: IFailedRequestsViewModel[];
     public RequestType = RequestType;
 

diff --git a/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html b/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html
@@ -48,12 +48,11 @@
     <div class="col-md-6">
         <div *ngIf="categories">
             <div class="form-group row">
-                <div class="col-md-12">
-                    <label for="categoryToAdd" class="control-label">Add Category</label>
-                </div>
                 <div class="col-md-9">
-                    <input type="text" [(ngModel)]="categoryToAdd.value" class="form-control form-control-custom " id="categoryToAdd"
-                        name="categoryToAdd" value="{{categoryToAdd.value}}">
+                    <mat-form-field appearance="outline">
+                        <mat-label>Add Category</mat-label>
+                        <input matInput type="text" [(ngModel)]="categoryToAdd.value" id="categoryToAdd" name="categoryToAdd" value="{{categoryToAdd.value}}">
+                  </mat-form-field>
                 </div>
                 <div class="col-md-3">
                     <button mat-raised-button (click)="addCategory()">Add</button>
@@ -74,4 +73,4 @@
         </div>
     </div>
 </fieldset>
-</div>
+</div>