New login form layout

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>

scripts/pi-hole/php/loginpage.php

@@ -10,7 +10,7 @@
   <div class="panel panel-default">
     <div class="panel-heading">
       <div class="text-center">
-        <img src="img/logo.svg" alt="Pi-hole logo" style="width: <?php if ($boxedlayout) { ?>50%<?php } else { ?>30%<?php } ?>;">
+        <img src="img/logo.svg" alt="Pi-hole logo" class="loginpage-logo">
       </div>
       <br>
 
@@ -26,31 +26,24 @@
 
     <div class="panel-body">
       <form action="" id="loginform" method="post">
-        <div class="form-group has-feedback <?php if ($wrongpassword) { ?>has-error<?php } ?>">
-          <input type="password" id="loginpw" name="pw" class="form-control" placeholder="Password" autocomplete="current-password" autofocus>
-          <span class="fa fa-key form-control-feedback"></span>
-        </div>
-        <div class="row">
-          <div class="col-xs-12 col-md-12">
-            <button type="submit" class="btn btn-primary form-control"><i class="fas fa-sign-in-alt"></i>&nbsp;&nbsp;&nbsp;Log in</button>
+        <div class="form-group login-options has-feedback<?php if ($wrongpassword) { ?> has-error<?php } ?>">
+          <div class="pwd-field">
+            <input type="password" id="loginpw" name="pw" class="form-control" placeholder="Password" autocomplete="current-password" autofocus>
+            <span class="fa fa-key form-control-feedback"></span>
+          </div>
+          <div>
+            <input type="checkbox" id="logincookie" name="persistentlogin">
+            <label for="logincookie">Remember me for 7 days</label>
           </div>
         </div>
-        <br>
-        <div class="row">
-          <div class="col-xs-8 hidden-xs hidden-sm">
-            <ul>
-              <li><kbd>Return</kbd> &rarr; Log in and go to requested page (<?php echo $scriptname; ?>)</li>
-              <li><kbd>Ctrl</kbd>+<kbd>Return</kbd> &rarr; Log in and go to Settings page</li>
-            </ul>
-          </div>
-          <div class="col-xs-12 col-md-4">
-            <div>
-              <input type="checkbox" id="logincookie" name="persistentlogin">
-              <label for="logincookie">Remember me for 7 days</label>
-            </div>
-          </div>
+        <div class="form-group">
+          <button type="submit" class="btn btn-primary form-control"><i class="fas fa-sign-in-alt"></i>&nbsp;&nbsp;&nbsp;Log in</button>
         </div>
-        <br>
+        <div class="box login-help hidden-xs">
+          <p><kbd>Return</kbd> &#10140; Log in and go to requested page (<?php echo $scriptname; ?>)</p>
+          <p><kbd>Ctrl</kbd> + <kbd>Return</kbd> &#10140; Log in and go to Settings page</p>
+        </div>
+
         <div class="row">
           <div class="col-xs-12">
             <div class="box box-<?php if (!$wrongpassword) { ?>info collapsed-box<?php } else { ?>danger<?php }?>">

style/pi-hole.css

@@ -495,11 +495,64 @@ td.details-control {
   }
 }
 
-/* Fix the icon position (login password field) */
+/*** Login form ***/
 .form-control-feedback {
   right: 12px;
 }
 
+.loginpage-logo {
+  width: 30%;
+}
+.layout-boxed .loginpage-logo {
+  width: 50%;
+}
+
+.login-options {
+  display: flex;
+  margin: 0 0 15px -15px;
+  flex-wrap: wrap;
+}
+
+.login-options div {
+  position: relative;
+  margin-left: 15px;
+}
+
+.login-options div:last-child {
+  margin-right: 2px;
+  margin-bottom: 0 !important;
+  flex: 0 1 auto;
+  font-size: 95%;
+}
+
+.pwd-field {
+  flex: 1 0 auto;
+}
+
+.login-help {
+  padding: 6px;
+  background: rgba(127, 127, 127,0.05);
+  text-align: center;
+}
+
+.login-help p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+@media screen and (min-width: 768px) {
+  .layout-boxed:not(.sidebar-collapse) .login-help p {
+    font-size: clamp(12px, (min(100vw, 1250px) - 230px) / 60, 15px);
+  }
+}
+
+/*** Accessibility - Add focus for checkboxes and radio buttons (icheck) ***/
+[class*=icheck-]>input:first-child:focus+label::before  {
+  outline: 1px #3c8dbc solid;
+  border-color: #3c8dbc;
+}
+
 /* Fix some datatables layout on small screens */
 @media screen and (max-width: 660px), screen and (min-width: 767px) and (max-width: 960px) {
   #domainsTable_wrapper .table-responsive {

style/themes/lcars.css

@@ -381,6 +381,10 @@ p.login-box-msg,
   background: #f00;
 }
 
+.login-help p {
+  font-size: 13px;
+}
+
 .input-group .input-group-addon {
   border-radius: 8px 0 0 8px;
   border-right: none;