Smaller menu for mobile devices. Made custom logo idiot proof

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

@@ -3,12 +3,15 @@
 
     <div class="small-middle-container">
         <div class="row">
-            <div class="col-md-push-3 col-md-6">
+            <div class="col-md-push-3 col-md-6 logo-container">
                 <div *ngIf="customizationSettings.logo">
-                    <img [src]="customizationSettings.logo" style="width:100%"/>
+                    <img class="logo-img" [src]="customizationSettings.logo"/>
                 </div>
-                <div *ngIf="!customizationSettings.logo">
+                <div *ngIf="!customizationSettings.logo && customizationSettings.applicationName" class="logo">
-                    <img src="{{baseUrl}}/images/logo.png" style="width:100%" />
+                    {{customizationSettings.applicationName}}
+                </div>
+                <div *ngIf="!customizationSettings.logo && !customizationSettings.applicationName" class="logo">
+                    OMBI
                 </div>
             </div>
             <div class="col-md-4 col-md-push-3 vcenter">
@@ -39,11 +42,11 @@
                         <span [translate]="'LandingPage.OfflineParagraph'"></span>
                         <p [translate]="'LandingPage.CheckPageForUpdates'"></p>
                     </div>
+                    <div class="button-continue">
+                        <button id="continue" mat-raised-button [routerLink]="['/login', 'true']" color="accent" type="submit" data-cy="continue">{{ 'Common.ContinueButton' | translate }}</button>
+                    </div>
                 </div>
             </div>
-            <div class="col-md-3 offset-md-6 vcenter">
-                <button id="continue" mat-raised-button [routerLink]="['/login', 'true']" color="accent" type="submit" data-cy="continue">{{ 'Common.ContinueButton' | translate }}</button>
-            </div>
         </div>
     </div>
 

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

@@ -1,10 +1,14 @@
-
+@import "~styles/variables.scss";
-    .small-middle-container{
+.small-middle-container{
-        margin: auto;
+        height:100vh;
-        width: 75%;
-        padding-top: 15%;
     }
 
+.row{
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    height:100vh;
+}
 
 @media only screen and (max-width: 992px) {
     div.centered {
@@ -32,12 +36,6 @@ div.bg {
     position: fixed;
 }
 
-.vcenter {
-    display: inline-block;
-    vertical-align: middle;
-    float: none;
-}
-
 .online{
     color:lightgreen;
 }
@@ -61,4 +59,41 @@ span, b, i, p {
 
 ::ng-deep body {
     background-color:#303030 !important;
+}
+
+.logo{
+    font:700 6em 'Montserrat', sans-serif;
+    text-align:center;
+    text-transform: uppercase;
+    color: $ombi-active;
+    padding:40px 20px;
+    white-space: normal;
+}
+
+@media (max-width: 1000px) {
+    .logo{
+        font:700 5em 'Montserrat', sans-serif;
+    }
+}
+
+@media (max-width: 800px) {
+    .logo{
+        font:700 4em 'Montserrat', sans-serif;
+    }
+}
+
+@media (max-width: 767px) {
+    .vcenter{
+        text-align:center;
+    }
+}
+
+.logo-img{
+    max-width:420px;
+    max-height:420px;
+}
+
+.logo-container{
+    display:flex;
+    justify-content: center;
 }

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

@@ -8,7 +8,7 @@
         <mat-card class="mat-elevation-z8 top-margin login-card">
             <H1 *ngIf="!customizationSettings.logo && !customizationSettings.applicationName" class="login_logo">OMBI</H1>
             <H1 *ngIf="customizationSettings.applicationName && !customizationSettings.logo" [ngClass]="{'bigText': customizationSettings.applicationName.length >= 7 && customizationSettings.applicationName.length < 14, 'hugeText': customizationSettings.applicationName.length >= 14 }" class="login_logo custom">{{customizationSettings.applicationName}}</H1>
-            <img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo">
+            <img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo" class="logo-img">
             <mat-card-content id="login-box" *ngIf="!authenticationSettings.enableOAuth || loginWithOmbi">
                 <form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 

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

@@ -210,6 +210,11 @@ div.bg {
     margin-bottom:70px;
 }
 
+.logo-img{
+    max-width:420px;
+    max-height:420px;
+}
+
 @media (max-width: 700px){
     .login-card H1.login_logo{
         font-size:20vw;

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

@@ -174,6 +174,23 @@
     }
 }
 
+@media (max-width: 600px) {
+    .sidenav-container .sidenav{
+        .application-name{
+            font-size:2em;
+            max-width:200px;
+        }
+        .mat-list-item{
+            width:14rem;
+            padding:10px 0px;
+        }
+        .active-list-item{
+            width:14rem;
+            padding:10px 0px;
+        }
+    }
+}
+
 .outer-profile .profile-img-container {
     background: inherit;
 }