From 56d983017642900e1506c2e6ac2d878e4dc98a78 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 13 Oct 2017 14:39:46 +0300
Subject: [PATCH] Fixed: Lock page layout issues

---
 .../authentication/lock/lock.component.html   |  8 ++-
 .../authentication/lock/lock.component.scss   | 58 +++++++++++++------
 2 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/src/app/main/content/pages/authentication/lock/lock.component.html b/src/app/main/content/pages/authentication/lock/lock.component.html
index ce59abe1..a22dea14 100644
--- a/src/app/main/content/pages/authentication/lock/lock.component.html
+++ b/src/app/main/content/pages/authentication/lock/lock.component.html
@@ -4,18 +4,21 @@
 
         <div id="lock-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayout.sm="column" fxLayoutAlign.sm="center center">
+            <div class="lock-form-header" fxLayout="column" fxLayoutAlign="center center"
+                 fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center">
+
                 <div class="avatar-container">
                     <img class="avatar big" src="assets/images/avatars/katherine.jpg">
                     <mat-icon class="s-36">lock</mat-icon>
                 </div>
 
-                <div fxLayout="column" fxLayoutAlign="start" fxLayoutAlign.sm="center center" fxFlex>
+                <div>
                     <div class="title">YOUR SESSION IS LOCKED</div>
                     <div class="subtitle">
                         Due to inactivity, your session is locked. Enter your password to continue.
                     </div>
                 </div>
+
             </div>
 
             <form name="lockForm" [formGroup]="lockForm" novalidate>
@@ -35,6 +38,7 @@
                         aria-label="UNLOCK" [disabled]="lockForm.invalid">
                     UNLOCK
                 </button>
+
             </form>
 
             <div class="message">
diff --git a/src/app/main/content/pages/authentication/lock/lock.component.scss b/src/app/main/content/pages/authentication/lock/lock.component.scss
index 9e21c047..fd806147 100644
--- a/src/app/main/content/pages/authentication/lock/lock.component.scss
+++ b/src/app/main/content/pages/authentication/lock/lock.component.scss
@@ -17,8 +17,10 @@
             }
 
             #lock-form {
-                width: 384px;
-                max-width: 384px;
+                display: flex;
+                flex-direction: column;
+                width: 420px;
+                max-width: 420px;
                 padding: 48px 32px 32px 32px;
                 background: #FFFFFF;
                 @include mat-elevation(7);
@@ -28,24 +30,46 @@
                     width: 100%;
                 }
 
-                .title {
-                    font-size: 20px;
-                    margin-bottom: 8px;
-                }
+                .lock-form-header {
+                    display: flex;
+                    flex: 1 0 auto;
 
-                .subtitle {
-                    color: rgba(0, 0, 0, 0.54);
-                }
+                    .avatar-container {
+                        position: relative;
+                        margin-right: 16px;
 
-                .avatar-container {
-                    position: relative;
-                    margin-right: 16px;
+                        .avatar {
+                            margin: 0;
+                        }
 
-                    mat-icon {
-                        position: absolute;
-                        bottom: 0;
-                        right: 0;
-                        color: mat-color($mat-red, 500);
+                        @include media-breakpoint('xs') {
+                            margin-right: 0;
+                        }
+
+                        mat-icon {
+                            position: absolute;
+                            bottom: 0;
+                            right: 0;
+                            color: mat-color($mat-red, 500);
+                        }
+                    }
+
+                    .title {
+                        font-size: 20px;
+                        margin-bottom: 8px;
+
+                        @include media-breakpoint('xs') {
+                            margin-top: 16px;
+                            text-align: center;
+                        }
+                    }
+
+                    .subtitle {
+                        color: rgba(0, 0, 0, 0.54);
+
+                        @include media-breakpoint('xs') {
+                            text-align: center;
+                        }
                     }
                 }