Merge pull request #6 from wish-cheng/feature/pageLayoutFix

notadd · Nov 27, 2018 · 9f4e595 · 9f4e595
2 parents 70f3d9f + 12ec932
commit 9f4e595
Show file tree

Hide file tree

Showing 16 changed files with 132 additions and 81 deletions.
diff --git a/src/app/layout/layout.component.html b/src/app/layout/layout.component.html
@@ -4,7 +4,9 @@
         <ng-container *ngTemplateOutlet="toolbar"></ng-container>
     </ng-container>
 
-    <mat-sidenav-container autosize>
+    <mat-sidenav-container autosize
+        [ngClass]="{'full-height': notaddConfig.layout.toolbar.hidden}">
+
         <!-- navbar -->
         <mat-sidenav
             [ngClass]="{'collapsed': notaddConfig.layout.navbar.collapsed}"

diff --git a/src/app/layout/layout.component.scss b/src/app/layout/layout.component.scss
@@ -18,6 +18,10 @@ layout {
 
         mat-sidenav-container {
             height: calc(100% - #{$height__main-toolbar});
+
+            &.full-height {
+                height: 100%;
+            }
         }
 
         mat-sidenav-content {

diff --git a/src/app/main/elements/basic-ui/cards/cards.component.html b/src/app/main/elements/basic-ui/cards/cards.component.html
@@ -107,7 +107,7 @@ <h3>LIST</h3>
     <div class="header center">
         <h1 class="mt-16">EXTRA</h1>
     </div>
-    <div class="content center" fxLayout="row nowarp" fxLayoutAlign="space-between start">
+    <div class="content center" fxLayout="row nowrap" fxLayoutAlign="space-between start">
         <div class="content-area pb-12" fxLayout="column nowrap" fxLayoutGap="30px" fxFlex="49">
             <h3>HEADER AND FOOTER</h3>
             <mat-card>
@@ -171,7 +171,7 @@ <h2 class="mt-12">Lorem ipsum dolor sit amet</h2>
     <div class="header center">
         <h1 class="mt-16">VARIANTS</h1>
     </div>
-    <div class="content center" fxLayout="column nowarp" fxLayoutAlign="space-between start">
+    <div class="content center" fxLayout="column nowrap" fxLayoutAlign="space-between start">
         <h3>DECKS</h3>
         <div class="content-area" fxLayout="row nowrap" fxLayoutGap="30px">
             <mat-card fxFlex="1 0 0%" class="card-deck">

diff --git a/src/app/main/general/pages/errors/errors.component.html b/src/app/main/general/pages/errors/errors.component.html
@@ -1,6 +1,6 @@
 <div class="pages-errors layout-full">
-    <div fxLayout="row nowarp" fxLayoutAlign="center center" class="h-100-p">
-        <div class="error-box text-center">
+    <div class="h-100-p text-center vertical-align">
+        <div class="error-box vertical-align-middle">
             <h1>{{code}}</h1>
             <p class="error-info">Page Not Found !</p>
             <p class="error-advise">YOU SEEM TO BE TRYING TO FIND HIS WAY HOME</p>

diff --git a/src/app/main/general/pages/errors/errors.component.scss b/src/app/main/general/pages/errors/errors.component.scss
@@ -7,15 +7,29 @@
     height: 100%;
 }
 
+.vertical-align {
+    &::before {
+        display: inline-block;
+        height: 100%;
+        vertical-align: middle;
+        content: "";
+    }
+
+    .vertical-align-middle {
+        display: inline-block;
+        vertical-align: middle;
+    }
+}
+
 .copyright {
     margin-top: 60px;
-    font-size: .858rem;
+    font-size: 12px;
     font-weight: 500;
     color: #424242;
     letter-spacing: 1px;
 
     p {
-        margin: 0 0 1rem;
+        margin: 0 0 14px;
     }
 }
 
@@ -27,11 +41,12 @@
 
 .pages-errors {
     .error-box {
+        padding: 20px 10px;
         font-family: Roboto, sans-serif;
 
         h1 {
             margin: 22px 0 11px;
-            font-size: 10em;
+            font-size: 128px;
             font-weight: bold;
             color: #424242;
         }
@@ -46,7 +61,7 @@
 
         .error-advise {
             margin: 0 0 25px;
-            font-size: 1rem;
+            font-size: 14px;
             font-weight: bold;
             color: #a9afb5;
         }

diff --git a/src/app/main/general/pages/forgot-password/forgot-password.component.html b/src/app/main/general/pages/forgot-password/forgot-password.component.html
@@ -1,6 +1,6 @@
 <div class="pages-forgot-password layout-full">
-    <div fxLayout="row" fxLayoutAlign="center center" class="h-100-p">
-        <div class="forgot-password-box text-center">
+    <div class="h-100-p text-center vertical-align">
+        <div class="forgot-password-box vertical-align-middle">
             <h3>Forgot Your Password ?</h3>
             <p class="info mt-0 mb-20">Input your registered email to reset your password</p>
             <div class="mt-20 mb-20">

diff --git a/src/app/main/general/pages/forgot-password/forgot-password.component.scss b/src/app/main/general/pages/forgot-password/forgot-password.component.scss
@@ -12,11 +12,14 @@
 .pages-forgot-password {
 
     .forgot-password-box {
+        padding: 20px 10px;
+
         h3 {
-            margin: 22px 0 11px 0;
-            font-size: 36px;
+            margin: 22px 0;
+            font-size: 31px;
             font-weight: 400;
             line-height: 1.2;
+            letter-spacing: 1px;
             color: #424242;
         }
 

diff --git a/src/app/main/general/pages/lockscreen/lockscreen.component.html b/src/app/main/general/pages/lockscreen/lockscreen.component.html
@@ -1,6 +1,6 @@
 <div class="pages-lockscreen layout-full">
-    <div fxLayout="row" fxLayoutAlign="center center" class="page overlay-bg h-100-p text-center">
-        <div class="page-content auth-box">
+    <div class="page h-100-p text-center vertical-align">
+        <div class="page-content auth-box vertical-align-middle">
             <div class="avatar s-50 mb-20">
                 <img src="../../../../../assets/images/avatars/tianhun.jpg">
             </div>

diff --git a/src/app/main/general/pages/lockscreen/lockscreen.component.scss b/src/app/main/general/pages/lockscreen/lockscreen.component.scss
@@ -6,6 +6,13 @@
         background-image: url("../../../../../assets/images/bg_lockscreen.jpg");
     }
 
+    .page-content {
+        display: inline-block;
+        width: 400px;
+        max-width: 100%;
+        padding: 30px;
+    }
+
     .avatar {
         width: 50px;
         height: 50px;

diff --git a/src/app/main/general/pages/login-v2/login-v2.component.html b/src/app/main/general/pages/login-v2/login-v2.component.html
@@ -1,46 +1,48 @@
 <div class="layout-full pages-login-v2">
-    <div class="page overlay-bg text-center">
-        <div fxLayout="row" fxLayoutAlign="space-between start" fxLayoutAlign.lt-md="center start" class="h-100-p">
+    <div class="page text-center" notaddPerfectScrollbar>
+        <div fxLayout="row nowrap" fxLayoutAlign="space-between stretch" fxLayoutAlign.lt-md="center start" class="h-100-p">
             <div class="brand-info mt-200 pt-100" fxHide.lt-md>
                 <div class="brand text-left pl-60">
                     <mat-icon fontSet="NotaddIcon" fontIcon="icon-logo" class="s-48"></mat-icon>
                 </div>
                 <p class="s-20">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                     tempor incididunt ut labore et dolore magna aliqua.</p>
             </div>
-            <div class="auth-box auth-main">
-                <div class="brand mb-20 text-left">
-                    <mat-icon fontSet="NotaddIcon" fontIcon="icon-logo" class="s-36"></mat-icon>
-                </div>
-                <p class="mt-0 mb-20 text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-                <div class="mt-20 mb-20">
-                    <mat-form-field required-color-red color="accent" class="w-100-p">
-                        <input matInput type="email" autocomplete placeholder="Email" required>
-                    </mat-form-field>
-                    <mat-form-field required-color-red color="accent" class="w-100-p">
-                        <input matInput type="password" autocomplete placeholder="Password" required>
-                    </mat-form-field>
-                    <div class="mb-40" fxLayoutAlign="space-between end">
-                        <mat-checkbox>Remember me</mat-checkbox>
-                        <a class="float-right" routerLink="/general/pages/forgot-password">Forgot password?</a>
+            <div class="auth-box auth-main vertical-align">
+                <div class="auth-main-inner vertical-align-middle">
+                    <div class="brand mt-20 mb-20 text-left">
+                        <mat-icon fontSet="NotaddIcon" fontIcon="icon-logo" class="s-36"></mat-icon>
                     </div>
-                    <button mat-flat-button class="w-100-p" color="accent">Sign in</button>
-                </div>
-                <p class="mt-0 text-left">No account? <a routerLink="/general/pages/register-v2">Sign Up</a></p>
+                    <p class="mt-0 mb-20 text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                    <div class="mt-20 mb-20">
+                        <mat-form-field required-color-red color="accent" class="w-100-p">
+                            <input matInput type="email" autocomplete placeholder="Email" required>
+                        </mat-form-field>
+                        <mat-form-field required-color-red color="accent" class="w-100-p">
+                            <input matInput type="password" autocomplete placeholder="Password" required>
+                        </mat-form-field>
+                        <div class="mb-40" fxLayoutAlign="space-between end">
+                            <mat-checkbox>Remember me</mat-checkbox>
+                            <a class="float-right" routerLink="/general/pages/forgot-password">Forgot password?</a>
+                        </div>
+                        <button mat-flat-button class="w-100-p" color="accent">Sign in</button>
+                    </div>
+                    <p class="mt-0 text-left">No account? <a routerLink="/general/pages/register-v2">Sign Up</a></p>
 
-                <div class="copyright">
-                    <p>WEBSITE BY Notadd</p>
-                    <p>© 2018. All RIGHT RESERVED.</p>
-                    <div class="social pt-20">
-                        <button mat-mini-fab>
-                            <mat-icon size="1" svgIcon="mdi:twitter" class="secondary-text s-24"></mat-icon>
-                        </button>
-                        <button mat-mini-fab color="primary" class="ml-20 mr-20">
-                            <mat-icon size="1" svgIcon="mdi:facebook" class="secondary-text s-24"></mat-icon>
-                        </button>
-                        <button mat-mini-fab color="warn">
-                            <mat-icon size="1" svgIcon="mdi:google" class="secondary-text s-24"></mat-icon>
-                        </button>
+                    <div class="copyright">
+                        <p>WEBSITE BY Notadd</p>
+                        <p>© 2018. All RIGHT RESERVED.</p>
+                        <div class="social pt-20">
+                            <button mat-mini-fab>
+                                <mat-icon size="1" svgIcon="mdi:twitter" class="secondary-text s-24"></mat-icon>
+                            </button>
+                            <button mat-mini-fab color="primary" class="ml-20 mr-20">
+                                <mat-icon size="1" svgIcon="mdi:facebook" class="secondary-text s-24"></mat-icon>
+                            </button>
+                            <button mat-mini-fab color="warn">
+                                <mat-icon size="1" svgIcon="mdi:google" class="secondary-text s-24"></mat-icon>
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/src/app/main/general/pages/login-v2/login-v2.component.scss b/src/app/main/general/pages/login-v2/login-v2.component.scss
@@ -18,9 +18,17 @@
 
     .auth-main {
         width: 500px;
-        height: 100%;
-        padding: 150px 60px 180px;
         background: #fff;
         color: #424242;
+
+        .auth-main-inner {
+            padding: 20px 60px;
+            background: #fff;
+
+            @media only screen and (max-width: 400px) {
+                padding: 20px 30px;
+            }
+        }
+
     }
 }
diff --git a/src/app/main/general/pages/login/login.component.html b/src/app/main/general/pages/login/login.component.html
@@ -1,6 +1,6 @@
 <div class="pages-login layout-full">
-    <div class="page overlay-bg text-center pt-100">
-        <div class="page-content auth-box">
+    <div class="page text-center vertical-align" notaddPerfectScrollbar>
+        <div class="page-content auth-box vertical-align-middle">
             <div class="brand mb-20 text-left pl-80">
                 <mat-icon fontSet="NotaddIcon" fontIcon="icon-logo" class="s-36"></mat-icon>
             </div>
@@ -39,7 +39,5 @@
                 </div>
             </div>
         </div>
-
     </div>
-
 </div>
diff --git a/src/app/main/general/pages/login/login.component.scss b/src/app/main/general/pages/login/login.component.scss
@@ -1,7 +1,5 @@
 .layout-full {
-    position: fixed;
-    top: 0;
-    left: 0;
+    position: absolute;
     z-index: 0;
     width: 100%;
     height: 100%;
@@ -17,29 +15,31 @@
         height: 100%;
         content: "";
         background-position: center top;
-        -webkit-background-size: cover;
         background-size: cover;
     }
 
+    &::after {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        content: "";
+        background-color: rgba(33, 33, 33, .6);
+    }
+
     .page {
+        position: relative;
         height: 100%;
         padding: 0;
         margin: 0;
-        background-color: rgba(0, 0, 0, .5);
-
-        &::before {
-            display: table;
-            content: "";
-            clear: both;
-        }
-    }
-
-    .overlay-bg {
-        background-color: rgba(33, 33, 33, .6);
+        background: transparent;
     }
 
 }
 
+
 .auth-box {
 
     .copyright {
@@ -60,6 +60,21 @@
     }
 }
 
+.vertical-align {
+    &::before {
+        display: inline-block;
+        height: 100%;
+        vertical-align: middle;
+        content: "";
+    }
+
+    .vertical-align-middle {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+}
+
 .pages-login {
 
     &::before {
@@ -69,6 +84,7 @@
     .page-content {
         display: inline-block;
         width: 400px;
+        max-width: 100%;
         padding: 30px;
     }
 

diff --git a/src/app/main/general/pages/register-v2/register-v2.component.html b/src/app/main/general/pages/register-v2/register-v2.component.html
@@ -1,16 +1,16 @@
 <div class="layout-full pages-register-v2">
-    <div class="page overlay-bg text-center">
-        <div fxLayout="row" fxLayoutAlign="space-between start" fxLayoutAlign.lt-md="center start" class="h-100-p">
+    <div class="page text-center" notaddPerfectScrollbar>
+        <div fxLayout="row nowrap" fxLayoutAlign="space-between stretch" fxLayoutAlign.lt-md="center start" class="h-100-p">
             <div class="brand-info mt-200 pt-100" fxHide.lt-md>
                 <div class="brand text-left pl-60">
                     <mat-icon fontSet="NotaddIcon" fontIcon="icon-logo" class="s-48"></mat-icon>
                 </div>
                 <p class="s-20">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                     tempor incididunt ut labore et dolore magna aliqua.</p>
             </div>
-            <div class="auth-box auth-main" fxLayout="column nowrap" fxLayoutAlign="center center">
-                <div>
-                    <div class="brand mb-20 text-left">
+            <div class="auth-box auth-main vertical-align">
+                <div class="auth-main-inner vertical-align-middle">
+                    <div class="brand mt-20 mb-20 text-left">
                         <mat-icon fontSet="NotaddIcon" fontIcon="icon-logo" class="s-36"></mat-icon>
                     </div>
                     <p class="mt-0 mb-20 text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
@@ -29,7 +29,7 @@
                         </mat-form-field>
                         <div class="mb-40" fxLayoutAlign="start end" fxLayoutGap="15px">
                             <mat-checkbox></mat-checkbox>
-                            <b class="secondary-text">By clicking Sign Up, you agree to our <a>Terms</a>.</b>
+                            <b class="secondary-text text-left">By clicking Sign Up, you agree to our <a>Terms</a>.</b>
                         </div>
                         <button mat-flat-button class="w-100-p" color="accent">Sign Up</button>
                     </div>

diff --git a/src/app/main/general/pages/register-v2/register-v2.component.scss b/src/app/main/general/pages/register-v2/register-v2.component.scss
@@ -3,8 +3,4 @@
 
 .pages-register-v2 {
     @extend .pages-login-v2;
-
-    .auth-main {
-        padding: 0 60px;
-    }
 }