Merge pull request #3776 from tidusjar/feature/landing-page

Fixed up the landing page

src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="landingPageSettings && customizationSettings">
     <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background"></div>
 
-    <div class="centered col-md-12">
+    <div class="small-middle-container">
         <div class="row">
             <div class="col-md-push-3 col-md-6">
                 <div *ngIf="customizationSettings.logo">
@@ -11,20 +11,21 @@
                     <img src="{{baseUrl}}/images/logo.png" style="width:100%" />
                 </div>
             </div>
-        </div>
-        <div class="row">
             <div class="col-md-4 col-md-push-3 vcenter">
                 <div *ngIf="landingPageSettings.noticeEnabled">
-                    <h3><i class="fa fa-bell-o"></i> <b>Notice</b></h3>
+                    <h3><i class="fa fa-bell-o"></i>&nbsp;<b>Notice</b></h3>
                     <span [innerHtml]="landingPageSettings.noticeText"></span>
                 </div>
+                <br>
+                <div *ngIf="!mediaServerStatus">
+                    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
+                </div>
                 <div *ngIf="mediaServerStatus">
                     <div *ngIf="mediaServerStatus.fullyAvailable">
                         <h3 class="online"><i class="fa fa-check-circle "></i> {{ 'LandingPage.OnlineHeading' | translate }}</h3>
                         <span [translate]="'LandingPage.OnlineParagraph'"></span>
                         <p [translate]="'LandingPage.CheckPageForUpdates'"></p>
                     </div>
-                    
                     <div *ngIf="mediaServerStatus.partiallyDown">
                         <h3 class="partial"><i class="fa fa-exclamation-triangle "></i> {{ 'LandingPage.PartiallyOnlineHeading' | translate }}</h3>
                         <span [translate]="'LandingPage.PartiallyOnlineParagraph'"></span>
@@ -40,8 +41,8 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-3 col-md-push-4 vcenter">
-                <button [routerLink]="['/login', 'true']" class="btn btn-lg btn-success-outline" [translate]="'Common.ContinueButton'"></button>
+            <div class="col-md-3 offset-md-6 vcenter">
+                <button id="continue" mat-raised-button [routerLink]="['/login', 'true']" color="accent" type="submit">{{ 'Common.ContinueButton' | translate }}</button>
             </div>
         </div>
     </div>

src/Ombi/ClientApp/src/app/landingpage/landingpage.component.scss

@@ -1,4 +1,12 @@
-@media only screen and (max-width: 992px) {
+
+    .small-middle-container{
+        margin: auto;
+        width: 75%;
+        padding-top: 15%;
+    }
+
+
+@media only screen and (max-width: 992px) {
     div.centered {
         max-height: 100%;
         overflow-y: auto;
@@ -45,4 +53,12 @@ div.bg {
 
 p {
     font-size: 14px !important;
+}
+
+span, b, i, p {
+    color:white !important;
+}
+
+::ng-deep body {
+    background-color:#303030 !important;
 }

src/Ombi/ClientApp/src/app/landingpage/landingpage.component.ts

@@ -39,7 +39,7 @@ export class LandingPageComponent implements OnDestroy, OnInit {
         });
         this.timer = setInterval(() => {
             this.cycleBackground();
-        }, 15000);
+        }, 30000);
 
         const base = this.href;
         if (base.length > 1) {

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

@@ -11,7 +11,7 @@
             <div class="col-md-6 col-6 col-sm-6">
                 <div style="float:right;text-align:left;">
                     <div class="md-form-field">
-                        <mat-slide-toggle [(ngModel)]="settings.enable" [checked]="settings.enable">Enable</mat-slide-toggle>
+                        <mat-slide-toggle [(ngModel)]="settings.enable" (change)="toggle()" [checked]="settings.enable">Enable</mat-slide-toggle>
                     </div>
                 </div>
             </div>
@@ -90,7 +90,7 @@
         <div class="col-md-2">
             <div class="form-group">
                 <div>
-                    <button mat-raised-button [disabled]="!hasDiscovered" (click)="save()" type="submit" id="save" class="mat-focus-indicator mat-raised-button mat-button-base mat-accent">Submit</button>
+                    <button mat-raised-button [disabled]="!hasDiscoveredOrDirty" (click)="save()" type="submit" id="save" class="mat-focus-indicator mat-raised-button mat-button-base mat-accent">Submit</button>
                 </div>
             </div>
         </div>

src/Ombi/ClientApp/src/app/settings/emby/emby.component.ts

@@ -12,7 +12,7 @@ import {FormControl} from '@angular/forms';
 export class EmbyComponent implements OnInit {
 
     public settings: IEmbySettings;
-    public hasDiscovered: boolean;
+    public hasDiscoveredOrDirty: boolean;
     selected = new FormControl(0);
 
     constructor(private settingsService: SettingsService,
@@ -29,12 +29,12 @@ export class EmbyComponent implements OnInit {
         const result = await this.embyService.getPublicInfo(server).toPromise();
         this.settings.isJellyfin = result.isJellyfin;
         server.name = result.serverName;
-        this.hasDiscovered = true;
+        this.hasDiscoveredOrDirty = true;
     }
 
     public addTab(event: MatTabChangeEvent) {
         const tabName = event.tab.textLabel;
-        if (tabName == "Add Server"){ 
+        if (tabName == "Add Server"){
             if (this.settings.servers == null) {
                 this.settings.servers = [];
             }
@@ -53,6 +53,10 @@ export class EmbyComponent implements OnInit {
         }
     }
 
+    public toggle() {
+     this.hasDiscoveredOrDirty = true;
+    }
+
     public test(server: IEmbyServer) {
         this.testerService.embyTest(server).subscribe(x => {
             if (x === true) {