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 ad665b642e0933508e86fac7757d45574ec9711c Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 09:31:53 2020 +0200 Modifications d'affichage des tags --- web/src/components/bookmark/Tags.vue | 67 ++++++++++++--------------------- web/src/components/common/TagsInput.vue | 14 ++++++- 2 files changed, 38 insertions(+), 43 deletions(-) diff --git a/web/src/components/bookmark/Tags.vue b/web/src/components/bookmark/Tags.vue index c975cb0..2524529 100644 --- a/web/src/components/bookmark/Tags.vue +++ b/web/src/components/bookmark/Tags.vue @@ -1,6 +1,12 @@ <template> <div class="tags"> - <span @click.prevent="addTag(tag)" class="tag" v-for="(tag, i) in tags || []" :key="tag" v-dompurify-html="hltags[i] || tag"></span> + <span + v-for="(tag, i) in tags || []" + :key="tag" + v-dompurify-html="hltags[i] || tag" + class="tag" + @click.prevent="addTag(tag)" + ></span> </div> </template> @@ -29,52 +35,29 @@ export default Tags display: flex; flex-direction: row; flex-wrap: wrap; - justify-content: center; } -.tags .tag { - float: left; - position: relative; + +.tag { + line-height: var(--default-bookmark-title-height); width: auto; - height: 20px; - margin-left: 20px; - padding: 0 12px; - line-height: 20px; - background: #1f8dd6; - color: #fff; - // font-size: 18px; - // font-weight: 600; - text-decoration: none; -} + margin-left: var(--margin--small); + margin-bottom: var(--margin--small); + padding: 0 var(--margin--small); -.tags .tag:before { - content: ''; - position: absolute; - top: 0; - width: 0; - height: 0; - border-style: solid; + color: #0a3d62bb; + font-size: 14px; + font-weight: bold; + text-decoration: none; - right: -10px; - border-color: transparent transparent transparent #1f8dd6; - border-width: 10px 0 10px 10px; -} + background: #0a3d621a; + border-radius: 4px; + cursor: pointer; -.tags .tag:after { - content: ''; - position: absolute; - top: 9px; - width: 4px; - height: 4px; - border-radius: 2px; - background: #fff; - box-shadow: -1px -1px 2px #004977; - right: -2px; -} + transition: all 0.2s ease; -.tag:hover { - background: #555; -} -.tag:hover:before { - border-color: transparent transparent transparent #555; + &:hover { + background: var(--color-tag); + color: white; + } } </style> diff --git a/web/src/components/common/TagsInput.vue b/web/src/components/common/TagsInput.vue index 5fbfa93..18fa467 100644 --- a/web/src/components/common/TagsInput.vue +++ b/web/src/components/common/TagsInput.vue @@ -98,10 +98,22 @@ export default TagsInput max-width: 100%; .ti-input { - background-color: transparent; + padding: 2px 5px; + color: var(--color-black); + + background-color: transparent; border: 1px solid var(--color-grey); border-radius: 3px; } + + .ti-new-tag-input-wrapper { + margin: 0; + padding: 0 var(--margin--tiny); + + input { + min-height: 30px; + } + } } </style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.