This is an automated email from the git hooks/post-receive script. New commit to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit a51dafd8589ea944e7b03df731dcbcb35bdfadc9 Author: Kevin Morin <morin@codelutin.com> Date: Thu May 18 18:24:09 2017 +0200 Mise en page du login et de la creation de compte --- pollen-ui-riot-js/src/main/web/css/main.css | 35 +++++++++++----- pollen-ui-riot-js/src/main/web/index.html | 2 +- pollen-ui-riot-js/src/main/web/tag/Home.tag.html | 10 +---- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 8 ++++ .../src/main/web/tag/PollenHeader.tag.html | 47 +++++++++++++--------- .../src/main/web/tag/SignCheck.tag.html | 28 ++++++++----- pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html | 23 ++++++++++- pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html | 14 +++++-- .../src/main/web/tag/popup/AccountCreated.tag.html | 1 + 9 files changed, 113 insertions(+), 55 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/css/main.css b/pollen-ui-riot-js/src/main/web/css/main.css index 10adfa9..1c9266f 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -56,24 +56,35 @@ input, textarea { position: absolute; } -.body-content { - flex-grow: 1; - overflow: hidden; -} - .body-container { display: flex; - flex-flow: column wrap; - - + flex-wrap: wrap; margin-left: auto; margin-right: auto; justify-content: center; - align-items: center; margin-bottom: 30px; } -a.mainColorBackground, input.mainColorBackground { +.body-content { + flex-grow: 1; + overflow: hidden; +} + +@media (orientation: portrait) { + .body-content { + width: 100%; + flex-direction: row; + } +} + +@media (orientation: landscape) { + .body-content { + height: 100%; + flex-direction: column; + } +} + +a.mainColorBackground, input.mainColorBackground, button.mainColorBackground { background-color: #13a2ff; } @@ -140,4 +151,8 @@ ul { .cursor-pointer { cursor: pointer; +} + +.c-overlay, .o-modal { + position: fixed; } \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/index.html b/pollen-ui-riot-js/src/main/web/index.html index 1b1e9a3..7bc1e49 100644 --- a/pollen-ui-riot-js/src/main/web/index.html +++ b/pollen-ui-riot-js/src/main/web/index.html @@ -25,10 +25,10 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pollen</title> - <link href="./css/main.css" rel="stylesheet"> <link href="./css/blaze.min.css" rel="stylesheet"> <link href="./css/font-awesome.css" rel="stylesheet"> <link href="./css/nprogress.css" rel="stylesheet"> + <link href="./css/main.css" rel="stylesheet"> </head> <body> <Pollen/> diff --git a/pollen-ui-riot-js/src/main/web/tag/Home.tag.html b/pollen-ui-riot-js/src/main/web/tag/Home.tag.html index 19e5998..cf10391 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Home.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Home.tag.html @@ -24,9 +24,6 @@ <button class="c-button c-button--ghost u-xlarge c-button--ghost-info" onclick="{createOther}"> <i class="fa fa-list-ol"/> {__.createOtherPoll} </button> - <button class="c-button c-button--ghost u-xlarge c-button--ghost-info" onclick="{createDate}"> - <i class="fa fa-calendar"/> {__.createDatePoll} - </button> </div> </div> @@ -43,7 +40,6 @@ this.createDate = () => { route("/poll/new/date"); }; - </script> <style> @@ -69,8 +65,7 @@ margin: 10px } - - @media (max-width: 640px) { + @media (orientation: portrait) { .wrapper { flex-direction: column; /* affichage vertical */ } @@ -80,8 +75,5 @@ } } - - - </style> </Home> diff --git a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html index 659759c..396b0de 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html @@ -62,6 +62,7 @@ require("./favoriteList/FavoriteList.tag.html"); }; this.bus.on("pageChanged", (title) => { + this.bus.trigger("closeSignIn"); this.pageTitle = title; this.updatePageTitle(); }); @@ -95,14 +96,17 @@ require("./favoriteList/FavoriteList.tag.html"); this.bus.trigger("pageChanged", "home"); riot.mount(this.refs.content, "createpoll"); }); + route("/signup", () => { this.bus.trigger("pageChanged", "signup"); riot.mount(this.refs.content, "signup"); }); + route("/signup/validate", () => { this.bus.trigger("pageChanged", "signup"); riot.mount(this.refs.content, "signup", {validate: true}); }); + route("/signcheck/*/*", (userId, token) => { this.bus.trigger("pageChanged", "signcheck"); riot.mount(this.refs.content, "signcheck", {userId: userId, token: token}); @@ -236,6 +240,10 @@ require("./favoriteList/FavoriteList.tag.html"); this.refs.signIn.open(); }); + this.bus.on("closeSignIn", () => { + this.refs.signIn.close(); + }); + window.onkeydown = e => { if (e.keyCode === 27) { this.bus.trigger("escape"); diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html index 4fd8d90..d4b19d7 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html @@ -36,30 +36,30 @@ require("./HeaderI18n.tag.html"); </div> </div> - <HeaderI18n/> - - <div class="dropdown"> + <div class="dropdown" if={user}> <a class="header-link"> - <i class="fa fa-{user ? 'user' : 'ellipsis-v'}"/> - <span if={user} class="user-name"> {user && user.name}</span> + <i class="fa fa-user"/> + <span class="user-name"> {user && user.name}</span> </a> <div class="dropdown-content right"> - <virtual if="{!user}"> - <a onclick="{signIn}">{__.signin}</a> - <a href="#signup">{__.signup}</a> - </virtual> - <virtual if="{user}"> - <a href="#user/profile">{__.myProfile}</a> - <a href="#poll/created">{__.myPolls}</a> - <a href="#poll/invited">{__.myInvitedPolls}</a> - <a href="#poll/participated">{__.myParticipatedPolls}</a> - <a href="#favoriteLists">{__.myFavoriteLists}</a> - <span role="separator" class="divider"></span> - <a onclick="{signOut}">{__.signout}</a> - </virtual> + <a href="#user/profile">{__.myProfile}</a> + <a href="#poll/created">{__.myPolls}</a> + <a href="#poll/invited">{__.myInvitedPolls}</a> + <a href="#poll/participated">{__.myParticipatedPolls}</a> + <a href="#favoriteLists">{__.myFavoriteLists}</a> + <span role="separator" class="divider"></span> + <a onclick="{signOut}">{__.signout}</a> </div> </div> + <div if="{!user}"> + <a id="loginButton" class="c-button mainColorBackground" onclick="{signIn}"> + <i class="fa fa-sign-in" aria-hidden="true" /> {__.signin} + </a> + </div> + + <HeaderI18n/> + <script type="es6"> let route = require("riot-route"); let session = require("../js/Session"); @@ -171,5 +171,16 @@ require("./HeaderI18n.tag.html"); } } + #loginButton { + border: 2px solid #FFF; + margin-right: 5px; + font-weight: bold; + } + + #loginButton:hover { + background-color: #FFF; + color: #13a2ff; + } + </style> </PollenHeader> diff --git a/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag.html index e8f001a..a7c695f 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag.html @@ -35,7 +35,7 @@ <div class="actions"> <a show={succes} class="c-button c-button--info pull-right" - href="#signin"> + onclick={signin}> <i class="fa fa-sign-in" aria-hidden="true"></i> {__.signin} </a> @@ -50,22 +50,28 @@ <script type="es6"> let authService = require("../js/AuthService"); let session = require("../js/Session"); + let route = require("riot-route"); this.installBundle(session, "signcheck"); this.waiting = true; this.error = false; this.succes = false; authService.validateEmail(this.opts.userId, this.opts.token) - .then(() => { - this.waiting = false; - this.succes = true; - this.update(); - }) - .catch(() => { - this.waiting = false; - this.error = true; - this.update(); - }); + .then(() => { + this.waiting = false; + this.succes = true; + this.update(); + }) + .catch(() => { + this.waiting = false; + this.error = true; + this.update(); + }); + + this.signin = () => { + route("/home"); + this.bus.trigger("signIn"); + }; </script> diff --git a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html index 99dc95c..1b58988 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html @@ -19,9 +19,10 @@ * #L% */ require("./popup/NewPassword.tag.html"); +require("./SignUp.tag.html"); <SignIn> - <div class="sign-in-layer" show={openSignIn}> - <div class="container"> + <div class="body-container sign-in-layer" show={openSignIn}> + <div class="body-content"> <h1 class="c-heading">{__.title}</h1> <form class="signin" onsubmit={signIn}> <div class="o-form-element"> @@ -56,7 +57,12 @@ require("./popup/NewPassword.tag.html"); </form> </div> + <SignUp/> + <NewPassword ref="newPassword"/> + + <a id="closeLogin" class="cursor-pointer" onclick="{close}"><i class="fa fa-times" aria-hidden="true"/></a> + </div> <script type="es6"> @@ -66,6 +72,7 @@ require("./popup/NewPassword.tag.html"); this.installBundle(session, "signin"); this.message = ""; this.openSignIn = false; + this.newPassword = () => { this.refs.newPassword.open(this.refs.login.value || ""); }; @@ -75,6 +82,12 @@ require("./popup/NewPassword.tag.html"); this.update(); }; + this.close = () => { + console.log("close !"); + this.openSignIn = false; + this.update(); + }; + this.signIn = (e) => { e.preventDefault(); e.stopPropagation(); @@ -103,6 +116,12 @@ require("./popup/NewPassword.tag.html"); background-color: white; } + #closeLogin { + position: absolute; + right: 10px; + top: 10px; + } + .signin { width: 250px; margin: 0 auto; diff --git a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html index 049b672..d614cb3 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html @@ -22,7 +22,7 @@ let route = require("riot-route"); require("./popup/ResendValidation.tag.html"); require("./popup/AccountCreated.tag.html"); -<SignUp> +<SignUp class="body-content"> <div class="container"> <h1 class="c-heading"><i class="fa fa-user-plus"/> {__.title}</h1> <form ref="user" class="signup" onsubmit="{signUp}"> @@ -79,7 +79,7 @@ require("./popup/AccountCreated.tag.html"); placeholder="{__.repeat_password_placeholder}" onblur="{checkPassword}" onkeypress="{clearPasswordError}" - required> + required/> <div if="{errors.repeatPassword}" class="c-hint--static c-hint--error"> {errors.repeatPassword} @@ -162,7 +162,8 @@ require("./popup/AccountCreated.tag.html"); <style> .container { - max-width: 450px + max-width: 450px; + margin-top: 0px; } .c-heading { @@ -184,11 +185,16 @@ require("./popup/AccountCreated.tag.html"); display: inline-block; } - .signup .resend-validation, .signup .c-hint--static { margin-left: 35%; } } + @media (max-width: 1034px) { + .container { + margin: 0px auto 0 auto; + } + } + </style> </SignUp> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag.html index 2aa94bd..f184914 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag.html @@ -66,6 +66,7 @@ this.action = () => { this.close(); route("home", null, true); + this.bus.trigger("closeSignIn"); }; </script> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.