This is an automated email from the git hooks/post-receive script. New commit to branch refonteUI-2017 in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit 3b4e267aaca304da597de620bd2f91a1d7a5ba73 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Feb 5 15:47:27 2020 +0100 Modification de l'affichage de l'écran de connexion, finalisation --- bow-ui/src/main/less/base/_header.less | 12 +++- bow-ui/src/main/less/common/_form.less | 18 ++++-- bow-ui/src/main/less/common/_tools.less | 7 --- bow-ui/src/main/less/components/connexion.less | 72 +++++++++++++++++++--- .../src/main/webapp/WEB-INF/jsp/forgotPassword.jsp | 30 +++++---- .../main/webapp/WEB-INF/jsp/inc/header-empty.jsp | 3 + bow-ui/src/main/webapp/WEB-INF/jsp/login.jsp | 27 ++++---- bow-ui/src/main/webapp/WEB-INF/jsp/register.jsp | 45 +++++++++----- 8 files changed, 153 insertions(+), 61 deletions(-) diff --git a/bow-ui/src/main/less/base/_header.less b/bow-ui/src/main/less/base/_header.less index 5656a9a..585e6e6 100644 --- a/bow-ui/src/main/less/base/_header.less +++ b/bow-ui/src/main/less/base/_header.less @@ -3,7 +3,7 @@ flex-direction: row; align-items: center; - height: @default-sidebar-width; + height: @default-header-height; & > a, & > div { @@ -13,9 +13,17 @@ } &.empty { - height: @default-sidebar-width; + height: @default-header-height; background-color: @color-sidebar-background; + + .header-logo { + text-align: center; + + img { + filter: brightness(0) invert(1); + } + } } } diff --git a/bow-ui/src/main/less/common/_form.less b/bow-ui/src/main/less/common/_form.less index c9680c1..12d5c36 100644 --- a/bow-ui/src/main/less/common/_form.less +++ b/bow-ui/src/main/less/common/_form.less @@ -8,6 +8,11 @@ margin: @default-marge--small auto @default-marge--large auto; } +label { + color: @color-form-label; + font-style: normal; +} + .bow-form-row { text-align: left; // border-bottom: 1px solid @color-separation-border; @@ -19,12 +24,10 @@ label { display: block; float: left; - font-style: normal; - font-weight: lighter; + margin-bottom: @default-marge--small; margin-top: @default-marge--small; font-size: 110%; - color: @color-form-label; min-width: 25%; } input[type="text"], @@ -32,9 +35,16 @@ input[type="number"], textarea { flex: 1; + + padding: @default-marge--small @default-marge--small; + + background-color: transparent; border: 1px solid @color-separation-border; border-radius: 3px; - padding: @default-marge--small @default-marge--small; + + &:focus { + border-color: @color-link-active; + } } } diff --git a/bow-ui/src/main/less/common/_tools.less b/bow-ui/src/main/less/common/_tools.less index 6b42f71..eaf6a87 100644 --- a/bow-ui/src/main/less/common/_tools.less +++ b/bow-ui/src/main/less/common/_tools.less @@ -20,13 +20,6 @@ float:right; } -.centered-wrapper { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} - .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { background: @color; background: -webkit-gradient(linear,left bottom,left top,color-stop(0, @start),color-stop(1, @stop)); diff --git a/bow-ui/src/main/less/components/connexion.less b/bow-ui/src/main/less/components/connexion.less index 4677a45..c7837e9 100644 --- a/bow-ui/src/main/less/components/connexion.less +++ b/bow-ui/src/main/less/components/connexion.less @@ -2,9 +2,9 @@ @import "../variables/_colors"; @import "../variables/_globals"; -#bow-login { - min-height: calc(~"100vh" - @default-footer-height); - .gradient(@color-main, @color-main, darken(@color-main, 15)); +.bow-login { + min-height: calc(~"100vh" - @default-header-height - @default-footer-height); + background-color: @color-main; color: #FFF; h1, @@ -17,10 +17,68 @@ a:hover { color: @color-link-hover; } + .bow-form-row { + min-width: 300px; + + input[type="text"], + input[type="password"] { + background-color: #FFF3; + border-color: #FFF; + + &:focus { + border-color: @color-link-active; + } + } + } .submit-button { - border-bottom-color: #FFF; - border-left-color: #FFF; - border-right-color: #AAA; - border-top-color: #AAA; + margin-bottom: @default-marge--medium; + margin-top: @default-marge--small; + padding: @default-marge--small @default-marge--medium; + + background-color: #FFF; + border-color: @color-black; + color: @color-black; + font-size: 16px; + + transition: background 0.3s ease , color 0.3s ease; + + &:hover, + &:focus { + background-color: transparent; + color: #FFF; + } + } +} + +.bow-form--login { + display: flex; + align-content: center; + align-items: center; + justify-content: center; + + height: calc(~"100vh" - @default-header-height - @default-footer-height); + + & > div { + padding: @default-marge--medium @default-marge--large; + + border-radius: 10px 10px 0 0; + box-shadow: 0 -16px 23px #0001; } } + +.filter { + position: relative; + -webkit-filter: contrast(110%) brightness(110%) sepia(30%) grayscale(100%); + filter: contrast(110%) brightness(110%) sepia(30%) grayscale(100%); +} +.filter::before { + content: ""; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + background: rgba(0, 0, 0, 0); +} \ No newline at end of file diff --git a/bow-ui/src/main/webapp/WEB-INF/jsp/forgotPassword.jsp b/bow-ui/src/main/webapp/WEB-INF/jsp/forgotPassword.jsp index f9361f5..7b56a2e 100644 --- a/bow-ui/src/main/webapp/WEB-INF/jsp/forgotPassword.jsp +++ b/bow-ui/src/main/webapp/WEB-INF/jsp/forgotPassword.jsp @@ -27,21 +27,27 @@ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <head> <title><s:text name="bow.forgotpwd.title" /></title> - <s:url var="css" value="/css/connexion.css" /> + <s:url var="css" value="/generated-css/components/connexion.css" /> <link href="${css}" rel="stylesheet" type="text/css" /> </head> <body> - <div id="content"> - <div id="formFrame fond"> - <h1><s:text name="bow.forgotpwd.title" /></h1> - <s:form action="forgotPassword"> - <p> - <s:textfield key="bow.login.email" name="email" labelposition="top" labelSeparator=" :" /> - <s:submit key="bow.forgotpwd.submit" name="submit" /> - </p> - </s:form> - <s:a action="login_input" id="loginLink"><s:text name="bow.login.title" /></s:a> - </div> + <div id="content" class="bow-login"> + <jsp:include page="inc/header-empty.jsp" flush="true"/> + + <s:form action="forgotPassword" cssClass="bow-form--login"> + <div> + <h1><s:text name="bow.forgotpwd.title" /></h1> + + <div class="bow-form-row"> + <s:textfield key="bow.login.email" name="email" labelposition="top" labelSeparator="" /> + </div> + <div class="bow-form-row"> + <s:submit type="button" key="bow.forgotpwd.submit" name="submit" cssClass="submit-button" /> + </div> + + <s:a action="login_input" id="loginLink"><s:text name="bow.login.title" /></s:a> + </div> + </s:form> </div> </body> </html> diff --git a/bow-ui/src/main/webapp/WEB-INF/jsp/inc/header-empty.jsp b/bow-ui/src/main/webapp/WEB-INF/jsp/inc/header-empty.jsp index 005524e..a2661c8 100644 --- a/bow-ui/src/main/webapp/WEB-INF/jsp/inc/header-empty.jsp +++ b/bow-ui/src/main/webapp/WEB-INF/jsp/inc/header-empty.jsp @@ -22,4 +22,7 @@ <%@taglib prefix="s" uri="/struts-tags" %> <div id="header" class="empty"> + <div class="header-logo"> + <img src="img/logos/bow-text.svg" alt="Bow" class="filter"/> + </div> </div> diff --git a/bow-ui/src/main/webapp/WEB-INF/jsp/login.jsp b/bow-ui/src/main/webapp/WEB-INF/jsp/login.jsp index df2f7a7..6cabb3e 100644 --- a/bow-ui/src/main/webapp/WEB-INF/jsp/login.jsp +++ b/bow-ui/src/main/webapp/WEB-INF/jsp/login.jsp @@ -24,35 +24,36 @@ <html xmlns:s="http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd" xmlns:jsp="http://java.sun.com/JSP/Page"> <head> + <title><s:text name="bow.login.title" /></title> <s:url var="css" value="/generated-css/components/connexion.css" /> <link href="${css}" rel="stylesheet" type="text/css" /> </head> - <title><s:text name="bow.login.title" /></title> <body> - <div id="bow-login"> + <div id="bow-login" class="bow-login"> <jsp:include page="inc/header-empty.jsp" flush="true"/> - <div class="centered-wrapper"> - <h1><s:text name="bow.login.title" /></h1> + <s:form action="login" cssClass="bow-form--login"> + <div> + <h1><s:text name="bow.login.title" /></h1> - <s:form action="login"> <div class="bow-form-row"> - <s:textfield key="bow.login.email" name="email" labelposition="top" labelSeparator=" :" /> + <s:textfield key="bow.login.email" name="email" labelposition="top" labelSeparator="" /> </div> <div class="bow-form-row"> - <s:password key="bow.login.password" name="password" labelposition="top" labelSeparator=" :" /> + <s:password key="bow.login.password" name="password" labelposition="top" labelSeparator="" /> </div> <div class="bow-form-row"> - <s:submit key="bow.login.submit" name="submit" cssClass="submit-button"/> + <s:submit type="button" key="bow.login.submit" name="submit" cssClass="submit-button"/> </div> - </s:form> - <s:a action="register_input" id="registerLink"><s:text name="bow.register.title" /></s:a><br /> - <s:a action="forgotPassword_input" id="forgotPwd"><s:text name="bow.forgotpwd.title" /></s:a> + <s:a action="register_input" id="registerLink"><s:text name="bow.register.title" /></s:a><br /> + <s:a action="forgotPassword_input" id="forgotPwd"><s:text name="bow.forgotpwd.title" /></s:a> + + <s:actionerror /> + </div> + </s:form> - <s:actionerror /> - </div> </div> </body> </html> diff --git a/bow-ui/src/main/webapp/WEB-INF/jsp/register.jsp b/bow-ui/src/main/webapp/WEB-INF/jsp/register.jsp index 65f479b..216206f 100644 --- a/bow-ui/src/main/webapp/WEB-INF/jsp/register.jsp +++ b/bow-ui/src/main/webapp/WEB-INF/jsp/register.jsp @@ -27,25 +27,38 @@ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <head> <title><s:text name="bow.register.title" /></title> - <s:url var="css" value="/css/connexion.css" /> + <s:url var="css" value="/generated-css/components/connexion.css" /> <link href="${css}" rel="stylesheet" type="text/css" /> </head> <body> - <div id="content"> - <div id="formFrame" class="fond"> - <h1><s:text name="bow.register.title" /></h1> - <s:form action="register"> - <s:actionerror /> - <p> - <s:textfield key="bow.login.email" name="email" labelposition="top" labelSeparator=" :" /> - <s:textfield name="name" labelposition="top" labelSeparator=" :" cssClass="registerSpecialField" /> - <s:password key="bow.login.password" name="password" labelposition="top" labelSeparator=" :" /> - <s:password key="bow.login.repeatPassword" name="repeatPassword" labelposition="top" labelSeparator=" :" /> - <s:submit key="bow.register.submit" name="submit" /> - </p> - </s:form> - <s:a action="login_input" id="loginLink"><s:text name="bow.login.title" /></s:a> - </div> + <div id="content" class="bow-login"> + <jsp:include page="inc/header-empty.jsp" flush="true"/> + + <s:form action="register" cssClass="bow-form--login"> + <div> + <h1><s:text name="bow.register.title" /></h1> + + <s:actionerror /> + + <div class="bow-form-row"> + <s:textfield key="bow.login.email" name="email" labelposition="top" labelSeparator="" /> + </div> + <div class="bow-form-row"> + <s:textfield name="name" labelposition="top" labelSeparator="" cssClass="registerSpecialField" /> + </div> + <div class="bow-form-row"> + <s:password key="bow.login.password" name="password" labelposition="top" labelSeparator="" /> + </div> + <div class="bow-form-row"> + <s:password key="bow.login.repeatPassword" name="repeatPassword" labelposition="top" labelSeparator="" /> + </div> + <div class="bow-form-row"> + <s:submit type="button" key="bow.register.submit" name="submit" cssClass="submit-button"/> + </div> + + <s:a action="login_input" id="loginLink"><s:text name="bow.login.title" /></s:a> + </div> + </s:form> </div> </body> </html> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.