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 89b92cfd8e769053657087ececb45f6e416b4da2 Author: kaufmann <kaufmann@codelutin.com> Date: Thu Jul 30 17:28:19 2020 +0200 Améliorations d'affichage du formulaire de création d'un bookmark --- web/src/assets/less/_globals.less | 12 ++++++ web/src/assets/less/_titles.less | 17 +++++++++ web/src/assets/less/main.less | 3 ++ web/src/components/common/Button.vue | 34 ++++++++--------- web/src/views/BookmarkEdit.vue | 73 ++++++++++++++++++++++++++++-------- 5 files changed, 104 insertions(+), 35 deletions(-) diff --git a/web/src/assets/less/_globals.less b/web/src/assets/less/_globals.less new file mode 100644 index 0000000..f6682da --- /dev/null +++ b/web/src/assets/less/_globals.less @@ -0,0 +1,12 @@ +:root { + --default-footer-height : 100px; + --default-marge--tiny: 5px; + --default-marge--small: 10px; + --default-marge--medium: 30px; + --default-marge--large: 50px; + --default-font: 'Fira Sans'; + --defaut-font-size : 16px; + --default-bookmark-radius : 3px; + --screen-desktop-low : 984px; + --screen-desktop-large : 1200px; +} \ No newline at end of file diff --git a/web/src/assets/less/_titles.less b/web/src/assets/less/_titles.less new file mode 100644 index 0000000..95a555e --- /dev/null +++ b/web/src/assets/less/_titles.less @@ -0,0 +1,17 @@ +h1 { + margin-bottom: var(--default-marge--medium); + margin-top: var(--default-marge--small); + color: var(--color-main); + + &.list-title, + &.form-title { + margin-top: 0; + margin-bottom: var(--default-marge--small); + padding: var(--default-marge--large); + + text-align: center; + } + &.form-title { + background-color: var(--color-grey-pale); + } +} \ No newline at end of file diff --git a/web/src/assets/less/main.less b/web/src/assets/less/main.less index 3f3bd60..2781612 100644 --- a/web/src/assets/less/main.less +++ b/web/src/assets/less/main.less @@ -1,3 +1,5 @@ +@import "_globals"; + @import "_animations"; @import "_base"; @import "_colors"; @@ -5,3 +7,4 @@ @import "_icons"; @import "_sizes"; @import "_templates"; +@import "_titles"; diff --git a/web/src/components/common/Button.vue b/web/src/components/common/Button.vue index e1ea214..ab7bfcf 100644 --- a/web/src/components/common/Button.vue +++ b/web/src/components/common/Button.vue @@ -32,8 +32,6 @@ border-radius: 2px; color: var(--color-main); cursor: pointer; - /* font-family: @default-font; */ - /* // font-size: 110%; */ outline: none; transition: color 0.3s ease , border 1s ease ; @@ -41,29 +39,27 @@ &::after { content: ''; position: absolute; - bottom: 0px; - left: 50%; - width: 50%; - height: 1px; - - // border-radius: 50%; - background-color: var(--color-hover); - opacity: 0; - - transform: translate3d(-50%, 0, 0); - transition: all 0.2s ease; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + + background: linear-gradient(to top right, var(--color-main), var(--color-main--darker)); + opacity: 0.2; + + transform: scaleY(0.1); + transform-origin: bottom; + transition: all 0.2s ease-in-out; + z-index: -1; } &:hover:not(:disabled) { - border-color: var(--color-hover); - // border-style: dashed; - color: var(--color-hover); + color: white; &::after { - bottom: -6px; - width: 100%; + transform: scaleY(1); - opacity: 1 + opacity: 0.8 } } diff --git a/web/src/views/BookmarkEdit.vue b/web/src/views/BookmarkEdit.vue index fcbfc57..03da800 100644 --- a/web/src/views/BookmarkEdit.vue +++ b/web/src/views/BookmarkEdit.vue @@ -1,23 +1,42 @@ <template> <div class="bookmark-editor"> + <h1 class="form-title">Ajouter ou modifier une URL</h1> + <div>{{ errorMsg }}</div> - <form class="fields"> + <form class="bow-form"> <BookmarkDate :creationDate="bookmark.importdate || bookmark.creationdate"></BookmarkDate> - <input type="text" v-model.trim="bookmark.uri" placeholder="add uri" /> <br /> + + <div class="form-row"> + <label for="uri">Uri</label> + <input id="uri" type="text" v-model.trim="bookmark.uri" placeholder="add uri" /> + </div> <!-- <span>{{ bookmark.authenticationinfo }}</span> faire afficher une popup de modification de l'objet auth--> - <textarea v-model.trim="bookmark.description" placeholder="add description"></textarea> - <TagsInput id="tags" v-model="bookmark.tags"></TagsInput> + + <div class="form-row"> + <label for="description">Description</label> + <textarea id="description" v-model.trim="bookmark.description" placeholder="add description"></textarea> + </div> + + <div class="form-row"> + <label for="tags">Tags</label> + <TagsInput id="tags" v-model="bookmark.tags"></TagsInput> + </div> <!-- <span>{{ bookmark.lang }}</span> --> <!-- <span>{{ bookmark.owner }}</span> si mon id n'est pas le meme alors c'est le bookmark d'un autre partage par un group --> - <label for="private-alias">private alias: - <input id="private-alias" type="text" v-model.trim="bookmark.privatealias" /> - </label> - <label for="public-alias">public alias: - <input id="public-alias" type="text" v-model.trim="bookmark.publicalias" /> - </label> + + <div class="form-row"> + <label for="private-alias">Private alias</label> + <input id="private-alias" type="text" v-model.trim="bookmark.privatealias" /> + </div> + + <div class="form-row"> + <label for="public-alias">Public alias</label> + <input id="public-alias" type="text" v-model.trim="bookmark.publicalias" /> + </div> + <div class="actions"> - <button @click.prevent="cancel">Cancel</button> - <button @click.prevent="save">Save</button> + <Button class="button" v-on:click.prevent="cancel">Cancel</Button> + <Button class="button" v-on:click.prevent="save">Save</Button> </div> </form> </div> @@ -27,6 +46,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator' import BookmarkDate from '@/components/common/BookmarkDate' import TagsInput from '@/components/common/TagsInput' +import Button from '@/components/common/Button.vue' @Component({ name: 'BookmarkEdit', @@ -39,7 +59,11 @@ import TagsInput from '@/components/common/TagsInput' 'publicalias', 'lang' ], - components: {BookmarkDate, TagsInput} + components: { + BookmarkDate, + Button, + TagsInput + } }) class BookmarkEdit extends Vue { @Prop id @@ -158,10 +182,27 @@ export default BookmarkEdit </script> <style lang="less" scoped> -.fields { - width: 100%; +@import '../assets/less/main'; + +.bow-form { display: flex; flex-direction: column; - align-items: stretch; + width: min-content; + margin: var(--default-marge--small) auto var(--default-marge--large) auto; +} + +.form-row { + .template-form-row(); +} + +.actions button { + margin-left: 20px; + margin-right: 20px; +} + +@media screen and (min-width: 984px) { + .form-row { + min-width: 400px; + } } </style> \ No newline at end of file -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.