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 593e29b3111b2822929062bd6c574e2168b449f7 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Aug 5 17:51:29 2020 +0200 Modifications d'affichage des formulaires --- web/src/components/common/FormRow.vue | 44 +++++++++++++++ web/src/components/common/PageMainTitle.vue | 30 ++++++++++ web/src/components/common/TagsInput.vue | 9 ++- web/src/views/BookmarkEdit.vue | 88 +++++++++++++++++------------ web/src/views/Login.vue | 44 +++++++++------ 5 files changed, 161 insertions(+), 54 deletions(-) diff --git a/web/src/components/common/FormRow.vue b/web/src/components/common/FormRow.vue new file mode 100644 index 0000000..c411f20 --- /dev/null +++ b/web/src/components/common/FormRow.vue @@ -0,0 +1,44 @@ +<template> + <div class="bow-form-row"> + <slot></slot> + </div> +</template> + +<script> + export default {} +</script> + +<style scoped lang="less"> +@import '../../assets/less/globals'; + +.bow-form-row { + padding-top: var(--margin--small); + padding-bottom: var(--margin--small); + display: flex; + flex-direction: column; + min-width: 90vw; + text-align: left; +} + +label { + display: block; + float: left; + margin-bottom: var(--margin--small); + margin-top: var(--margin--small); + font-size: 110%; + min-width: 25%; +} + + +@media screen and (min-width: @screen-desktop-low) { + .bow-form-row { + min-width: 450px; + } +} + +@media screen and (min-width: @screen-desktop-large) { + .bow-form-row { + min-width: 600px; + } +} +</style> diff --git a/web/src/components/common/PageMainTitle.vue b/web/src/components/common/PageMainTitle.vue new file mode 100644 index 0000000..558d6c8 --- /dev/null +++ b/web/src/components/common/PageMainTitle.vue @@ -0,0 +1,30 @@ +<template> + <h1> + <slot></slot> + </h1> +</template> + +<script> + export default {} +</script> + +<style scoped> +h1 { + margin-bottom: var(--margin--medium); + margin-top: var(--margin--small); + color: var(--color-main); +} + +h1.bow-list-title, +h1.bow-form-title { + margin-top: 0; + margin-bottom: var(--margin--small); + padding: var(--margin--large); + + text-align: center; +} + +h1.bow-form-title { + background-color: var(--color-white--darker); +} +</style> diff --git a/web/src/components/common/TagsInput.vue b/web/src/components/common/TagsInput.vue index b3a1b6d..5fbfa93 100644 --- a/web/src/components/common/TagsInput.vue +++ b/web/src/components/common/TagsInput.vue @@ -93,8 +93,15 @@ class TagsInput extends Vue { export default TagsInput </script> -<style scoped lang="less"> +<style lang="less"> .tags-input { max-width: 100%; + + .ti-input { + background-color: transparent; + color: var(--color-black); + border: 1px solid var(--color-grey); + border-radius: 3px; + } } </style> diff --git a/web/src/views/BookmarkEdit.vue b/web/src/views/BookmarkEdit.vue index 03da800..e40ed0e 100644 --- a/web/src/views/BookmarkEdit.vue +++ b/web/src/views/BookmarkEdit.vue @@ -1,42 +1,64 @@ <template> <div class="bookmark-editor"> - <h1 class="form-title">Ajouter ou modifier une URL</h1> + <PageMainTitle class="bow-form-title"> + Ajouter ou modifier une URL + </PageMainTitle> <div>{{ errorMsg }}</div> <form class="bow-form"> - <BookmarkDate :creationDate="bookmark.importdate || bookmark.creationdate"></BookmarkDate> - - <div class="form-row"> + <FormRow> + <label>Date</label> + <BookmarkDate + :creationDate="bookmark.importdate || bookmark.creationdate" + ></BookmarkDate> + </FormRow> + + <FormRow> <label for="uri">Uri</label> - <input id="uri" type="text" v-model.trim="bookmark.uri" placeholder="add uri" /> - </div> + <input + id="uri" + type="text" + v-model.trim="bookmark.uri" + /> + </FormRow> <!-- <span>{{ bookmark.authenticationinfo }}</span> faire afficher une popup de modification de l'objet auth--> - <div class="form-row"> + <FormRow> <label for="description">Description</label> - <textarea id="description" v-model.trim="bookmark.description" placeholder="add description"></textarea> - </div> + <textarea + id="description" + v-model.trim="bookmark.description" + ></textarea> + </FormRow> - <div class="form-row"> + <FormRow> <label for="tags">Tags</label> <TagsInput id="tags" v-model="bookmark.tags"></TagsInput> - </div> + </FormRow> <!-- <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 --> - <div class="form-row"> + <FormRow> <label for="private-alias">Private alias</label> - <input id="private-alias" type="text" v-model.trim="bookmark.privatealias" /> - </div> - - <div class="form-row"> + <input + id="private-alias" + type="text" + v-model.trim="bookmark.privatealias" + /> + </FormRow> + + <FormRow> <label for="public-alias">Public alias</label> - <input id="public-alias" type="text" v-model.trim="bookmark.publicalias" /> - </div> + <input + id="public-alias" + type="text" + v-model.trim="bookmark.publicalias" + /> + </FormRow> <div class="actions"> <Button class="button" v-on:click.prevent="cancel">Cancel</Button> - <Button class="button" v-on:click.prevent="save">Save</Button> + <Button class="button" primary v-on:click.prevent="save">Save</Button> </div> </form> </div> @@ -45,8 +67,10 @@ <script> 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' +import FormRow from '@/components/common/FormRow' +import PageMainTitle from '@/components/common/PageMainTitle' +import TagsInput from '@/components/common/TagsInput' @Component({ name: 'BookmarkEdit', @@ -62,6 +86,8 @@ import Button from '@/components/common/Button.vue' components: { BookmarkDate, Button, + FormRow, + PageMainTitle, TagsInput } }) @@ -182,27 +208,19 @@ export default BookmarkEdit </script> <style lang="less" scoped> -@import '../assets/less/main'; - .bow-form { display: flex; flex-direction: column; width: min-content; - margin: var(--default-marge--small) auto var(--default-marge--large) auto; -} - -.form-row { - .template-form-row(); + margin: var(--margin--small) auto; } -.actions button { - margin-left: 20px; - margin-right: 20px; -} +.actions { + display: flex; + justify-content: space-around; + margin-top: var(--margin--small); + padding: var(--margin--medium) var(--margin--small); -@media screen and (min-width: 984px) { - .form-row { - min-width: 400px; - } + border-top: 5px solid var(--color-white--darker); } </style> \ No newline at end of file diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue index d939d54..6f3fbd0 100644 --- a/web/src/views/Login.vue +++ b/web/src/views/Login.vue @@ -3,19 +3,19 @@ <form> <h1>Connexion</h1> - <div class="form-row"> + <FormRow> <label for="login">Login</label> <input v-model="data.email" type="text" name="login" placeholder="somebody@somewhere.world" /> - </div> + </FormRow> - <div class="form-row"> + <FormRow> <label for="password">Password</label> <input v-model="data.password" type="password" name="password" /> - </div> + </FormRow> - <div class="form-row"> + <FormRow> <Button class="button" v-on:click.prevent="login">Login</Button> - </div> + </FormRow> <div class="form-links"> <SimpleLink href="#" class="link colored-bg">Register</SimpleLink> @@ -31,12 +31,14 @@ <script> import { Component, Vue } from 'vue-property-decorator' import Button from '@/components/common/Button.vue' +import FormRow from '@/components/common/FormRow' import SimpleLink from '@/components/common/SimpleLink.vue' @Component({ name: 'Login', components: { Button, + FormRow, SimpleLink } }) @@ -72,7 +74,11 @@ export default Login </script> <style scoped lang="less"> -@import '../assets/less/main'; +@import '../assets/less/globals'; + +h1 { + color: white; +} .login { display: flex; @@ -95,11 +101,6 @@ export default Login animation: reveal-down 1s ease; } } -.form-row { - .template-form-row(); - - min-width: 300px; -} .form-links { display: flex; @@ -134,14 +135,21 @@ input[type='password'] { .error-message { - padding: var(--margin--small); - min-width: calc(300px + 2 * var(--margin--large)); + background: #e3d0d0; + padding: 20px; + list-style: none; + border-left: 10px solid var(--color-error); + color: var(--color-black); - background: var(--color-complementary); - border-top: 3px solid #fff; - border-radius: 0 0 10px 10px; - font-weight: bold; + font-size:14px; animation: reveal-down 1s ease; } + + +@media screen and (min-width: @screen-desktop-low) { + form { + min-width: 400px; + } +} </style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.