This is an automated email from the git hooks/post-receive script. New commit to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit f3ace7279dd692866eaab378cae8265295fb1aac Author: kaufmann <kaufmann@codelutin.com> Date: Mon Apr 13 14:50:58 2020 +0200 Nouvelle UI - Page de connexion --- web/public/favicon.png | Bin 4267 -> 570 bytes web/public/index.html | 2 +- web/src/assets/less/_animations.less | 10 ++++ web/src/assets/less/_base.less | 18 ++++++ web/src/assets/less/_colors.less | 30 +++++----- web/src/assets/less/_templates.less | 18 ++++++ web/src/assets/less/main.less | 4 +- web/src/views/Login.vue | 111 +++++++++++++++++++++++++++++++---- 8 files changed, 167 insertions(+), 26 deletions(-) diff --git a/web/public/favicon.png b/web/public/favicon.png index 49de5d9..ab99bfe 100644 Binary files a/web/public/favicon.png and b/web/public/favicon.png differ diff --git a/web/public/index.html b/web/public/index.html index 239bee3..c053282 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -5,7 +5,7 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.png"> - <title><%= htmlWebpackPlugin.options.title %></title> + <title>Bow - <%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> diff --git a/web/src/assets/less/_animations.less b/web/src/assets/less/_animations.less new file mode 100644 index 0000000..4d4c729 --- /dev/null +++ b/web/src/assets/less/_animations.less @@ -0,0 +1,10 @@ +@keyframes reveal-down { + 0% { + opacity: 0; + margin-top: -30px; + } + 100% { + opacity: 1; + margin-top: 0; + } +} \ No newline at end of file diff --git a/web/src/assets/less/_base.less b/web/src/assets/less/_base.less index 933cd34..76246a0 100644 --- a/web/src/assets/less/_base.less +++ b/web/src/assets/less/_base.less @@ -4,3 +4,21 @@ vertical-align: baseline; box-sizing: border-box; } + +input[type="text"], +input[type="password"], +input[type="number"], +textarea { + flex: 1; + + padding: var(--margin--small); + + background-color: transparent; + color: var(--color-black); + border: 1px solid var(--color-grey); + border-radius: 3px; + + &:focus { + border-color: var(--color-active); + } +} \ No newline at end of file diff --git a/web/src/assets/less/_colors.less b/web/src/assets/less/_colors.less index fa5e3db..6821bad 100644 --- a/web/src/assets/less/_colors.less +++ b/web/src/assets/less/_colors.less @@ -1,20 +1,22 @@ * { - --color-main : #079992; - --color-main--darker : #057974; - --color-complementary : #b71540; - --color-analog : #0a3d62; - --color-black : #1e2a2f; - --color-white : #FFF; - - --color-hover : var(--color-complementary); - --color-bg : var(--color-white); - --color-bg-sidebar : var(--color-black); + --color-main : #09827C; //#079992; + --color-main--darker : #07625E; //#057974; + --color-complementary : #b71540; + --color-complementary--darker : #450818; //darken(@color-red, 25%); + --color-analog : #0a3d62; + --color-black : #1e2a2f; + --color-grey : #999999; + --color-white : #FFF; + + --color-hover : var(--color-complementary); + --color-active : var(--color-complementary--darker); + --color-bg : var(--color-white); + --color-bg-sidebar : var(--color-black); } - /* --color-green-2 : #057974; ---color-grey : #999; + --color-grey : #999; --color-grey-pale : #f4f4f4; --color-blue-pale : #E9F2F5; @@ -30,8 +32,8 @@ @color-menu-link : #FFF; @color-menu-link-hover : @color-red; @color-link : @color-main; -@color-link-hover : @color-red; //darken(@color-green, 25%); -@color-link-active : darken(@color-red, 25%); + @color-link-hover : @color-red; //darken(@color-green, 25%); + @color-link-active : darken(@color-red, 25%); @color-button-border-1 : @color-main; @color-button-border-2 : @color-green-2; diff --git a/web/src/assets/less/_templates.less b/web/src/assets/less/_templates.less new file mode 100644 index 0000000..d194b2c --- /dev/null +++ b/web/src/assets/less/_templates.less @@ -0,0 +1,18 @@ +.template-form-row { + padding-top: var(--margin--small); + padding-bottom: var(--margin--small); + display: flex; + flex-direction: column; + + text-align: left; + + label { + display: block; + float: left; + + margin-bottom: var(--margin--small); + margin-top: var(--margin--small); + font-size: 110%; + min-width: 25%; + } +} \ No newline at end of file diff --git a/web/src/assets/less/main.less b/web/src/assets/less/main.less index d0eae96..3f3bd60 100644 --- a/web/src/assets/less/main.less +++ b/web/src/assets/less/main.less @@ -1,5 +1,7 @@ +@import "_animations"; @import "_base"; @import "_colors"; -@import "_sizes"; // @import "_font"; @import "_icons"; +@import "_sizes"; +@import "_templates"; diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue index 931b5fd..c35977d 100644 --- a/web/src/views/Login.vue +++ b/web/src/views/Login.vue @@ -1,25 +1,42 @@ <template> <div class="login"> - <div>{{ errorMsg }}</div> <form> - <input - v-model="data.email" - type="text" - name="login" - placeholder="somebody@somewhere.world" - /> - <input v-model="data.password" type="password" name="password" /> - <button class="btn btn-primary" @click.prevent="login">login</button> + <h1>Connexion</h1> + + <div class="form-row"> + <label for="login">Login</label> + <input + v-model="data.email" + type="text" + name="login" + placeholder="somebody@somewhere.world" + /> + </div> + + <div class="form-row"> + <label for="password">Password</label> + <input v-model="data.password" type="password" name="password" /> + </div> + + <div class="form-row"> + <Button class="button" v-on:click.prevent="login">Login</Button> + </div> + + <a href="#">Register</a><br /> + <a href="#">Forgottent password ?</a> + </form> + <div v-if="errorMsg" class="error-message">{{ errorMsg }}</div> </div> </template> <script> import { Component, Vue } from 'vue-property-decorator' +import Button from '@/components/common/Button.vue'; @Component({ name: 'Login', - components: {} + components: { Button } }) class Login extends Vue { data = { @@ -45,3 +62,77 @@ class Login extends Vue { export default Login </script> + +<style scoped lang="less"> + @import '../assets/less/main'; + + .login { + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + justify-content: center; + + min-height: calc(~"100vh" - var(--header-height) - var(--footer-height)); + + background-color: var(--color-main); + color: #FFF; + + form { + padding: var(--margin--medium) var(--margin--large); + + border-radius: 10px 10px 0 0; + box-shadow: 0 -16px 23px #0001; + + animation: reveal-down 1s ease; + } + } + .form-row { + .template-form-row(); + + min-width: 300px; + } + + input[type="text"], + input[type="password"] { + background-color: #FFF5; + border-color: #FFF; + + } + + .button { + margin-bottom: var(--margin--medium); + margin-top: var(--margin--small); + padding: var(--margin--small) var(--margin--medium); + + background-color: #FFF; + border-color: var(--color-black); + color: var(--color-black); + font-size: 16px; + + transition: background 0.3s ease , color 0.3s ease; + + &:hover, + &:focus { + background-color: transparent; + color: #FFF; + } + } + + a { + color: #FFF; + &:hover { + color: var(--color-hover); + } + } + .error-message { + padding: var(--margin--small); + min-width: calc(300px + 2 * var(--margin--large)); + + background: var(--color-complementary); + font-weight: bold; + + animation: reveal-down 1s ease; + } +</style> + -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.