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 3b8c1398f532b8370c5b4c17d3521afc57f07565 Author: kaufmann <kaufmann@codelutin.com> Date: Thu Jul 30 17:26:47 2020 +0200 Création d'un composant pour uniformiser l'affichage des liens --- web/src/assets/less/_colors.less | 5 +-- web/src/components/common/SimpleLink.vue | 66 ++++++++++++++++++++++++++++++++ web/src/components/layout/Footer.vue | 51 +++++++++++++++++------- web/src/views/Login.vue | 27 ++++++++----- 4 files changed, 123 insertions(+), 26 deletions(-) diff --git a/web/src/assets/less/_colors.less b/web/src/assets/less/_colors.less index 48565ed..111f499 100644 --- a/web/src/assets/less/_colors.less +++ b/web/src/assets/less/_colors.less @@ -6,8 +6,9 @@ --color-analog : #0a3d62; --color-black : #1e2a2f; --color-grey : #999999; + --color-grey-pale : #F4F4F4; --color-white : #FFF; - --color-bg-bookmark: #FAFDFD; + --color-bg-bookmark : #FAFDFD; --color-hover : var(--color-complementary); --color-active : var(--color-complementary--darker); @@ -18,7 +19,6 @@ /* --color-green-2 : #057974; --color-grey : #999; ---color-grey-pale : #f4f4f4; --color-blue-pale : #E9F2F5; @color-main : @color-green; @@ -28,7 +28,6 @@ @color-background-tag-cloud : @color-blue; @color-background-list-odd : @color-blue-pale; @color-background-list-even : darken(@color-blue-pale, 5%); -@color-background-title : @color-grey-pale; @color-menu-link : #FFF; @color-menu-link-hover : @color-red; diff --git a/web/src/components/common/SimpleLink.vue b/web/src/components/common/SimpleLink.vue new file mode 100644 index 0000000..11ca670 --- /dev/null +++ b/web/src/components/common/SimpleLink.vue @@ -0,0 +1,66 @@ +<template> + <a @click="handleClick" + class="link"> + <slot></slot> + </a> +</template> + +<script> + export default { + methods: { + handleClick(e) { + this.$emit('click', e); + } + } + } +</script> + +<style scoped lang="less"> + .link { + position: relative; + padding: 5px 10px 0 10px; + color: var(--color-link); + text-decoration: none; + border-bottom: 1px solid #0a3d6255; + z-index: 1; + transition: border 0.2s ease-in-out; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + + background: #0a3d6211; + + transform: scaleY(0.2); + transform-origin: bottom; + transition: transform 0.2s ease-in-out; + z-index: -1; + content: ''; + } + + &:hover { + border-bottom-color: #0a3d62; + + &::after { + transform: scaleY(1); + } + } + + } + .colored-bg { + color: #fff; + border-bottom-color: #FFF7; + + &::after { + background: #fff1; + } + + &:hover { + border-bottom-color: #fff; + } + } +</style> diff --git a/web/src/components/layout/Footer.vue b/web/src/components/layout/Footer.vue index 3c5c75f..5bea25f 100644 --- a/web/src/components/layout/Footer.vue +++ b/web/src/components/layout/Footer.vue @@ -2,25 +2,51 @@ <footer> <p> Fait avec <i class="icon icon-heart"></i> par - <a href="http://www.codelutin.com" title="Code Lutin"><i class="icon icon-lutin"></i></a> + <SimpleLink + href="http://www.codelutin.com" + title="Code Lutin" + > + <i class="icon icon-lutin"></i> + </SimpleLink> </p> <p> - <a href="http://www.chorem.org/projects/bow">bow</a> - - <a href="http://www.gnu.org/licenses/agpl.html">License</a> - - <span title="Copyright">©2010-2018</span> - <a href="http://www.codelutin.com">Code Lutin</a> - - <a href="http://www.chorem.org/projects/bow/issues">Bug report</a> - - <a href="http://list.chorem.org/cgi-bin/mailman/listinfo/bow-users">Support</a> - + <SimpleLink + href="http://www.chorem.org/projects/bow" + class="link" + >bow</SimpleLink> + + <SimpleLink + href="http://www.gnu.org/licenses/agpl.html" + class="link" + >License</SimpleLink> + + <span title="Copyright">©2010-2018</span> + + <SimpleLink + href="http://www.codelutin.com" + class="link" + >Code Lutin</SimpleLink> + + <SimpleLink + href="http://www.chorem.org/projects/bow/issues" + class="link" + >Bug report</SimpleLink> + + <SimpleLink + href="http://list.chorem.org/cgi-bin/mailman/listinfo/bow-users" + class="link" + >Support</SimpleLink> </p> </footer> </template> <script> import { Component, Vue } from 'vue-property-decorator' +import SimpleLink from '@/components/common/SimpleLink.vue' @Component({ name: 'Footer', - components: {} + components: { SimpleLink } }) class Footer extends Vue { } @@ -42,12 +68,9 @@ export default Footer margin-top: var(--margin--small); } - a { - color: inherit; - - &:hover { - color: var(--color-hover); - } + .link { + margin-left: 10px; + margin-right: 10px; } .icon { diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue index eb03755..d939d54 100644 --- a/web/src/views/Login.vue +++ b/web/src/views/Login.vue @@ -17,8 +17,12 @@ <Button class="button" v-on:click.prevent="login">Login</Button> </div> - <a href="#">Register</a><br /> - <a href="#">Forgottent password ?</a> + <div class="form-links"> + <SimpleLink href="#" class="link colored-bg">Register</SimpleLink> + <SimpleLink href="#" class="link colored-bg"> + Forgottent password ? + </SimpleLink> + </div> </form> <div v-if="errorMsg" class="error-message">{{ errorMsg }}</div> </div> @@ -27,10 +31,14 @@ <script> import { Component, Vue } from 'vue-property-decorator' import Button from '@/components/common/Button.vue' +import SimpleLink from '@/components/common/SimpleLink.vue' @Component({ name: 'Login', - components: { Button } + components: { + Button, + SimpleLink + } }) class Login extends Vue { data = { @@ -93,6 +101,12 @@ export default Login min-width: 300px; } +.form-links { + display: flex; + flex-direction: column; + align-items: center; +} + input[type='text'], input[type='password'] { background-color: #fff5; @@ -118,12 +132,7 @@ input[type='password'] { } } -a { - color: #fff; - &:hover { - color: var(--color-hover); - } -} + .error-message { padding: var(--margin--small); min-width: calc(300px + 2 * var(--margin--large)); -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.