enhanced login/register box positioning

- added min-height update for login-/register-page in Layout.js
- updated login-/register-page to display flex
- updated login/register demo to load adminlte.min.js

build/js/Layout.js

@@ -30,7 +30,9 @@ const Layout = (($) => {
     WRAPPER        : '.wrapper',
     CONTROL_SIDEBAR: '.control-sidebar',
     LAYOUT_FIXED   : '.layout-fixed',
-    FOOTER         : '.main-footer'
+    FOOTER         : '.main-footer',
+    LOGIN_BOX      : '.login-box',
+    REGISTER_BOX   : '.register-box'
   }
 
   const ClassName = {
@@ -41,6 +43,8 @@ const Layout = (($) => {
     LAYOUT_FIXED   : 'layout-fixed',
     NAVBAR_FIXED   : 'layout-navbar-fixed',
     FOOTER_FIXED   : 'layout-footer-fixed',
+    LOGIN_PAGE     : 'login-page',
+    REGISTER_PAGE  : 'register-page',
   }
 
   const Default = {
@@ -76,7 +80,6 @@ const Layout = (($) => {
       $(Selector.CONTENT).css('min-height', max - heights.footer)
       
       if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
-        
         if (typeof $.fn.overlayScrollbars !== 'undefined') {
           $(Selector.SIDEBAR).overlayScrollbars({
             className       : this._config.scrollbarTheme,
@@ -104,7 +107,13 @@ const Layout = (($) => {
         this.fixLayoutHeight()
       })
 
-      $('body, html').css('height', 'auto')
+      if (!$('body').hasClass(ClassName.LOGIN_PAGE) && !$('body').hasClass(ClassName.REGISTER_PAGE)) {
+        $('body, html').css('height', 'auto')
+      } else if ($('body').hasClass(ClassName.LOGIN_PAGE) || $('body').hasClass(ClassName.REGISTER_PAGE)) {
+        let box_height = $(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).height()
+
+        $('body').css('min-height', box_height);
+      }
 
       $('body.hold-transition').removeClass('hold-transition')
     }

build/scss/pages/_login_and_register.scss

@@ -6,7 +6,7 @@
 .register-logo {
   font-size: 2.1rem;
   font-weight: 300;
-  margin-bottom: 0.9rem;
+  margin-bottom: .9rem;
   text-align: center;
 
   a {
@@ -16,12 +16,15 @@
 
 .login-page,
 .register-page {
+  align-items: center;
   background: $gray-200;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
 }
 
 .login-box,
 .register-box {
-  margin: 7% auto;
   width: 360px;
 
   @media (max-width: map-get($grid-breakpoints, sm)) {

pages/examples/login.html

@@ -89,6 +89,8 @@
 <script src="../../plugins/jquery/jquery.min.js"></script>
 <!-- Bootstrap 4 -->
 <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+<!-- AdminLTE App -->
+<script src="../../dist/js/adminlte.min.js"></script>
 
 </body>
 </html>

pages/examples/register.html

@@ -101,5 +101,7 @@
 <script src="../../plugins/jquery/jquery.min.js"></script>
 <!-- Bootstrap 4 -->
 <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+<!-- AdminLTE App -->
+<script src="../../dist/js/adminlte.min.js"></script>
 </body>
 </html>