branch bow-v2-go updated (cdd7878 -> f3ace72)
This is an automated email from the git hooks/post-receive script. New change to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git from cdd7878 Nouvelle UI - Layout général new f3ace72 Nouvelle UI - Page de connexion The 1 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: commit f3ace7279dd692866eaab378cae8265295fb1aac Author: kaufmann <kaufmann@codelutin.com> Date: Mon Apr 13 14:50:58 2020 +0200 Nouvelle UI - Page de connexion Summary of changes: 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(-) create mode 100644 web/src/assets/less/_animations.less create mode 100644 web/src/assets/less/_templates.less -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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>.
participants (1)
-
chorem.org scm