This is an automated email from the ASF dual-hosted git repository.

nmalin pushed a commit to branch release22.01
in repository https://gitbox.apache.org/repos/asf/ofbiz-framework.git


The following commit(s) were added to refs/heads/release22.01 by this push:
     new 970857b420 Improved: Helveticus, improve keyboard navigation on login 
page (OFBIZ-12622)
970857b420 is described below

commit 970857b420b1461dddbabe53d3b9e8cf8dc6e30a
Author: Nicolas Malin <nicolas.ma...@nereide.fr>
AuthorDate: Fri May 20 17:13:20 2022 +0200

    Improved: Helveticus, improve keyboard navigation on login page 
(OFBIZ-12622)
    
    A few improvement to put directly the focus on username field when we 
arrive on login page for helveticus theme
    
    Thanks to Marine Desmarchelier for this
---
 themes/helveticus/template/Login.ftl               |  8 +-
 .../webapp/helveticus/helveticus-main-theme.less   | 99 +++++++++++++++++++++-
 2 files changed, 102 insertions(+), 5 deletions(-)

diff --git a/themes/helveticus/template/Login.ftl 
b/themes/helveticus/template/Login.ftl
index 667d8cb9b1..331b7b66f4 100644
--- a/themes/helveticus/template/Login.ftl
+++ b/themes/helveticus/template/Login.ftl
@@ -36,15 +36,15 @@ under the License.
       <form method="post" action="<@ofbizUrl>login</@ofbizUrl>" 
name="loginform">
         <label>
           ${uiLabelMap.CommonUsername}
-          <input type="text" name="USERNAME" value="${username}"/>
+          <input type="text" name="USERNAME" value="${username}" tabindex="0"/>
         </label>
         
         <label>
           <span>
             ${uiLabelMap.CommonPassword}
-            <a 
href="<@ofbizUrl>forgotPassword</@ofbizUrl>">${uiLabelMap.CommonForgotYourPassword}</a>
           </span>
-          <input type="password" name="PASSWORD" autocomplete="off" value=""/>
+          <input type="password" name="PASSWORD" autocomplete="off" value="" 
tabindex="0"/>
+            <a 
href="<@ofbizUrl>forgotPassword</@ofbizUrl>">${uiLabelMap.CommonForgotYourPassword}</a>
         </label>
 
         <#if ("Y" == useMultitenant) >
@@ -58,7 +58,7 @@ under the License.
           </#if>
         </#if>
 
-        <input type="submit" value="${uiLabelMap.CommonLogin}"/>
+        <input type="submit" value="${uiLabelMap.CommonLogin}"  tabindex="0"/>
         <input type="hidden" name="JavaScriptEnabled" value="N"/>
         
       </form>
diff --git a/themes/helveticus/webapp/helveticus/helveticus-main-theme.less 
b/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
index b61df5e466..b098be0de7 100644
--- a/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
+++ b/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
@@ -445,6 +445,7 @@ a.buttontext{
         border-radius: 4px;
         padding:0 2rem;
         box-shadow: 0 0 50px 0 @shadow-color;
+        padding:2rem;
         z-index: 15;
         color: @font-color-for-main;
         #user-name {
@@ -1176,7 +1177,7 @@ form .basic-table,
   align-items: center;
   justify-content: space-between;
   font-family: 'Quicksand', sans-serif !important;
-  z-index: 10;
+  z-index: 15;
   span {
     color: white;
     padding: 10px;
@@ -1407,3 +1408,99 @@ form .basic-table,
     width: auto;
     height: auto;
 }
+
+#loginBar {
+  width: 30%;
+  margin:0 auto;
+  #company-logo {
+    background: url("images/ofbiz_logo.svg") no-repeat center center / auto 
100%;
+    height: 12rem;
+    width: 100%;
+    margin:0.7rem 0 1.2rem 0;
+  }
+}
+
+.login-screenlet{
+  padding:5rem;
+  width: 400px;
+  margin:0 auto;
+  box-shadow: 0 0 15px 15px @shadow-color !important;
+  background-color: white;
+  h3{
+    text-align: center;
+    font-size:2.2rem;
+    font-weight: 600;
+  }
+  p{
+    text-align:center;
+    font-size: 1.5rem;
+    color:@grey;
+    font-weight: 500;
+  }
+  form[name="loginform"], form[name="forgotpassword"]{
+    margin-top:3.5rem;
+    display: flex;
+    flex-direction: column;
+    gap:4rem;
+    label{
+      font-size: 1.5rem;
+      font-weight: 600;
+      display: flex;
+      flex-direction: column;
+      gap:1rem;
+      a{
+        width:100%;
+        display:inline-block;
+        text-align:right;
+        font-size:1rem;
+      }
+    }
+    input[type="text"], input[type="password"]{
+      border:none;
+      background-color:@grey-light;
+      padding:1rem;
+      font-size:1.2rem;
+      opacity: 0.5;
+      outline: none !important;
+      &:focus{
+        opacity: 0.75;
+        border:none;
+      }
+    }
+    input[type="submit"]{
+      font-size:1.5rem;
+      font-family: 'Quicksand', sans-serif;
+      font-weight: 800;
+      padding:1rem;
+    }
+    .button-group{
+      display:flex;
+      justify-content: center;
+      gap:1rem;
+      .buttontext{
+        font-size: 1.5rem;
+        font-family: 'Quicksand', sans-serif;
+        font-weight: 800;
+        padding: 1rem;
+        margin:0;
+      }
+    }
+    .link{
+      background: transparent;
+      padding:0;
+      color:@main-color-theme;
+      &:hover{
+        text-decoration: underline;
+      }
+    }
+  }
+}
+.ui-dialog{
+  left: ~"calc(50% - 320px)" !important;
+  top: 2rem !important;
+  box-shadow: 0 0 15px 15px @shadow-color !important;
+}
+
+.hidden{
+  display: none;
+}
\ No newline at end of file

Reply via email to