Fixed #3760 and #3690

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html

@@ -1,29 +1,42 @@
 <mat-sidenav-container *ngIf="showNav" class="sidenav-container">
-    <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
+    <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
+        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
+        [opened]="!(isHandset$ | async)">
         <mat-toolbar>{{applicationName}}</mat-toolbar>
         <mat-nav-list>
             <span *ngFor="let nav of navItems">
 
-              <div *ngIf="(nav.requiresAdmin && isAdmin || !nav.requiresAdmin) && nav.enabled">
+                <div *ngIf="(nav.requiresAdmin && isAdmin || !nav.requiresAdmin) && nav.enabled">
 
 
-              <a *ngIf="nav.externalLink" mat-list-item [href]="nav.link" target="_blank" matTooltip="{{nav.toolTipMessage | translate}}" matTooltipPosition="right" [routerLinkActive]="getTheme()">
+                    <a *ngIf="nav.externalLink" mat-list-item [href]="nav.link" target="_blank"
+                        matTooltip="{{nav.toolTipMessage | translate}}" matTooltipPosition="right"
+                        [routerLinkActive]="'active-list-item'">
 
-                <mat-icon *ngIf="nav.icon" aria-label="Side nav toggle icon" [style]="nav.style" >{{nav.icon}}</mat-icon>
-                <i *ngIf="nav.faIcon" class="fa fa-lg {{nav.faIcon}}" style="padding-left: 5px; padding-right: 5px;" aria-hidden="true"></i>
-                &nbsp;{{nav.name | translate}}
-              </a>
-              <a *ngIf="!nav.externalLink" mat-list-item [routerLink]="nav.link" [style]="nav.color" [routerLinkActive]="getTheme()">
+                        <mat-icon *ngIf="nav.icon" aria-label="Side nav toggle icon" [style]="nav.style">{{nav.icon}}
+                        </mat-icon>
+                        <i *ngIf="nav.faIcon" class="fa fa-lg {{nav.faIcon}}"
+                            style="padding-left: 5px; padding-right: 5px;" aria-hidden="true"></i>
+                        &nbsp;{{nav.name | translate}}
+                    </a>
+                    <a *ngIf="!nav.externalLink" mat-list-item [routerLink]="nav.link" [style]="nav.color"
+                        [routerLinkActive]="'active-list-item'">
 
-                <mat-icon aria-label="Side nav toggle icon">{{nav.icon}}</mat-icon>
-                &nbsp;{{nav.name | translate}}
-              </a>
-            </div>
+                        <mat-icon aria-label="Side nav toggle icon">{{nav.icon}}</mat-icon>
+                        &nbsp;{{nav.name | translate}}
+                    </a>
+                </div>
             </span>
 
-            <a id="nav-logout" class="bottom-nav-link" mat-list-item [routerLinkActive]="getTheme()" aria-label="Toggle sidenav" (click)="logOut();">
+            <a id="nav-theme" mat-list-item (click)="switchTheme()">
+                <mat-icon *ngIf="theme === 'dark'" aria-label="Side nav toggle icon">wb_incandescent</mat-icon>
+                <mat-icon *ngIf="theme === 'light'" aria-label="Side nav toggle icon">brightness_4</mat-icon>
+                &nbsp;{{ 'NavigationBar.ChangeTheme' | translate }}
+            </a>
+            <a id="nav-logout" class="bottom-nav-link" mat-list-item [routerLinkActive]="'active-list-item'"
+                aria-label="Toggle sidenav" (click)="logOut();">
                 <mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
-                {{ 'NavigationBar.Logout' | translate }}
+                &nbsp;{{ 'NavigationBar.Logout' | translate }}
             </a>
 
 
@@ -31,28 +44,20 @@
     </mat-sidenav>
     <mat-sidenav-content>
         <mat-toolbar color="primary">
-            <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
-        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
-      </button>
-
-            <div class="col-md-10 offset-md-1 col-8">
-                <span class="middle justify-content-center align-items-center">
-          <!-- Search Bar -->
-          <div style="width: 50%;">
-          <app-nav-search></app-nav-search>
-        </div>
-        </span>
-
-
-            </div>
-            <div class="col-1">
-                <div class="float-right">
-                    <a mat-list-item (click)="switchTheme()">
-                        <mat-icon *ngIf="theme === 'dark'" aria-label="Side nav toggle icon">wb_incandescent</mat-icon>
-                        <mat-icon *ngIf="theme === 'light'" aria-label="Side nav toggle icon">brightness_4</mat-icon>
-                    </a>
-                </div>
+            <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
+                *ngIf="isHandset$ | async">
+                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+            </button>
+
+            <div class="col-10">
+                <span class="justify-content-center align-items-center">
+                    <!-- Search Bar -->
+                    <div>
+                        <app-nav-search></app-nav-search>
+                    </div>
+                </span>
             </div>
+
         </mat-toolbar>
 
         <!-- Page -->

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss

@@ -55,6 +55,15 @@
     font-weight:500;
 }
 
+
+.mat-drawer-content {
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    display: block;
+    height: 100%;
+    /* overflow: auto; */
+}
 // Changed color with !important and changed the font weight
 /*.active-list-item-dark {
     background: $accent-dark !important;

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts

@@ -36,6 +36,7 @@ export class MyNavComponent implements OnInit {
   public async ngOnInit() {
 
     this.issuesEnabled = await this.settingsService.issueEnabled().toPromise();
+    const customizationSettings = await this.settingsService.getCustomization().toPromise();
     console.log("issues enabled: " + this.issuesEnabled);
     this.theme = this.store.get("theme");
     if(!this.theme) {
@@ -48,6 +49,7 @@ export class MyNavComponent implements OnInit {
       { name: "NavigationBar.UserManagement", icon: "account_circle", link: "/usermanagement", requiresAdmin: true, enabled: true, faIcon: null },
       // { name: "NavigationBar.Calendar", icon: "calendar_today", link: "/calendar", requiresAdmin: false, enabled: true },
       { name: "NavigationBar.Donate", icon: "attach_money", link: "https://www.paypal.me/PlexRequestsNet", externalLink: true, requiresAdmin: true, enabled: true, toolTip: true, style: "color:red;", toolTipMessage: 'NavigationBar.DonateTooltip', faIcon: null },
+      { name: "NavigationBar.Donate", icon: "attach_money", link: customizationSettings.customDonationUrl, externalLink: true, requiresAdmin: false, enabled: customizationSettings.enableCustomDonations, toolTip: true, toolTipMessage: customizationSettings.customDonationMessage, faIcon: null },
       { name: "NavigationBar.FeatureSuggestion", icon: null, link: "https://features.ombi.io/", externalLink: true, requiresAdmin: false, enabled: true, toolTip: true, toolTipMessage: 'NavigationBar.FeatureSuggestionTooltip', faIcon: "fa-lightbulb-o" },
       { name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About", requiresAdmin: true, enabled: true, faIcon: null },
       { name: "NavigationBar.UserPreferences", icon: "person", link: "/user-preferences", requiresAdmin: false, enabled: true, faIcon: null },
@@ -71,10 +73,4 @@ export class MyNavComponent implements OnInit {
       this.themeChange.emit(newTheme);
     }
   }
-
-  // @TIDUSJAR Don't know if we need this method anymore?
-  public getTheme(){
-    return 'active-list-item';
-  }
-
 }

src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss

@@ -43,4 +43,5 @@ $ombi-accent: #258a6d;
 
   .options {
       margin-bottom: 5px;
-  }
+  }
+

src/Ombi/ClientApp/src/app/settings/customization/customization.component.html

@@ -6,21 +6,21 @@
 
     <div class="col-md-12 col-12 col-sm-12">
         <div class="md-form-field">
-            <mat-form-field appearance="outline" floatLabel=always>
+            <mat-form-field appearance="outline">
                 <mat-label>Application Name</mat-label>
-                <input matInput placeholder="Application Name" [(ngModel)]="settings.applicationName">
+                <input matInput [(ngModel)]="settings.applicationName">
             </mat-form-field>
         </div>
         <div class="md-form-field">
-            <mat-form-field appearance="outline" floatLabel=always>
+            <mat-form-field appearance="outline">
                 <mat-label>Application URL</mat-label>
-                <input matInput placeholder="Application URL" [(ngModel)]="settings.applicationUrl">
+                <input matInput [(ngModel)]="settings.applicationUrl">
             </mat-form-field>
         </div>
         <div class="md-form-field">
-            <mat-form-field appearance="outline" floatLabel=always>
+            <mat-form-field appearance="outline" >
                 <mat-label>Custom Logo</mat-label>
-                <input  matInput placeholder="Custom Logo" type="url"[(ngModel)]="settings.logo">
+                <input  matInput  type="url"[(ngModel)]="settings.logo">
             </mat-form-field>
         </div>
         <div class="md-form-field">
@@ -37,15 +37,15 @@
             </mat-checkbox>
         </div>
         <div class="md-form-field">
-            <mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline" floatLabel=always>
+            <mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline">
                 <mat-label>Custom Donation URL</mat-label>
-                <input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.customDonationUrl" matTooltip="A link to a Paypal address, or your custom donation url.">
+                <input matInput [(ngModel)]="settings.customDonationUrl" matTooltip="A link to a Paypal address, or your custom donation url.">
             </mat-form-field>
         </div>
         <div class="md-form-field">
-            <mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline" floatLabel=always>
-                <mat-label>Custom Donation URL</mat-label>
-                <input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.customDonationMessage" matTooltip="Set a custom message to be displayed in the navigation bar.">
+            <mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline">
+                <mat-label>Custom Donation Message</mat-label>
+                <input matInput  [(ngModel)]="settings.customDonationMessage" matTooltip="Set a custom message to be displayed in the navigation bar.">
             </mat-form-field>
         </div>
         <div class="md-form-field">
@@ -53,10 +53,10 @@
                 Enable Custom Page
             </mat-checkbox>
         </div>
-        <div class="md-form-field">        
-            <mat-form-field appearance="outline" floatLabel=always> 
+        <div class="md-form-field">
+            <mat-form-field appearance="outline"> 
                 <mat-label>Custom CSS</mat-label>
-                <textarea matInput [(ngModel)]="settings.customCss" placeholder="Custom CSS"></textarea>
+                <textarea matInput [(ngModel)]="settings.customCss"></textarea>
             </mat-form-field>
         </div>
         <div class="form-group">

src/Ombi/ClientApp/src/styles/shared.scss

@@ -43,13 +43,7 @@ body {
     scrollbar-width: thin; //firefox
     -webkit-overflow-scrolling: touch;
 }
-#main-container {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
+
 .spinner-container {
     position: relative;
     margin-left: 50%;