From 87800d80c866f9c895d4bc74d39d0ee40984f1a2 Mon Sep 17 00:00:00 2001
From: twanariens <twanariens@gmail.com>
Date: Tue, 18 May 2021 22:55:06 +0200
Subject: [PATCH] Smaller menu for mobile devices. Made custom logo idiot proof

---
 .../landingpage/landingpage.component.html    | 17 +++---
 .../landingpage/landingpage.component.scss    | 57 +++++++++++++++----
 .../src/app/login/login.component.html        |  2 +-
 .../src/app/login/login.component.scss        |  5 ++
 .../src/app/my-nav/my-nav.component.scss      | 17 ++++++
 5 files changed, 79 insertions(+), 19 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html
index 90e1cb599..abad6473f 100644
--- a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html
+++ b/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">
-                    <img src="{{baseUrl}}/images/logo.png" style="width:100%" />
+                <div *ngIf="!customizationSettings.logo && customizationSettings.applicationName" class="logo">
+                    {{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>
 
diff --git a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.scss b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.scss
index e05400aff..7eb4a4b3c 100644
--- a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.scss
+++ b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.scss
@@ -1,10 +1,14 @@
-
-    .small-middle-container{
-        margin: auto;
-        width: 75%;
-        padding-top: 15%;
+@import "~styles/variables.scss";
+.small-middle-container{
+        height:100vh;
     }
 
+.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;
 }
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/login/login.component.html b/src/Ombi/ClientApp/src/app/login/login.component.html
index 62dcc7d30..c0932999b 100644
--- a/src/Ombi/ClientApp/src/app/login/login.component.html
+++ b/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)">
 
diff --git a/src/Ombi/ClientApp/src/app/login/login.component.scss b/src/Ombi/ClientApp/src/app/login/login.component.scss
index 3cea34099..4ad645dd8 100644
--- a/src/Ombi/ClientApp/src/app/login/login.component.scss
+++ b/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;
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
index 64b377ac9..753759af1 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
+++ b/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;
 }