branch bow-v2-go updated (2fa9ddf -> d3f5012)
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 2fa9ddf si on oublie d'appeller l'enregistrement du type mime pour le json, ca marche moins bien :( new 3b8c139 Création d'un composant pour uniformiser l'affichage des liens new 89b92cf Améliorations d'affichage du formulaire de création d'un bookmark new 8b880e0 Améliorations d'affichage du bandeau d'entête new d3f5012 Améliorations d'affichage des bookmarks The 4 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 d3f5012e1d4d569690f23bd2b4a764f1a0734fd3 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Jul 31 17:27:52 2020 +0200 Améliorations d'affichage des bookmarks commit 8b880e098381ad20697ba82bb0f8c19348773abd Author: kaufmann <kaufmann@codelutin.com> Date: Fri Jul 31 17:27:04 2020 +0200 Améliorations d'affichage du bandeau d'entête 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 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 Summary of changes: web/src/App.vue | 25 +++---- web/src/assets/less/_base.less | 9 +++ web/src/assets/less/_colors.less | 31 ++++----- web/src/assets/less/_globals.less | 30 ++++++++ web/src/assets/less/_titles.less | 17 +++++ web/src/assets/less/main.less | 3 + web/src/components/Bookmark.vue | 34 ++++++++- web/src/components/CloudTags.vue | 9 +++ web/src/components/Navigation.vue | 12 +++- web/src/components/common/Button.vue | 34 ++++----- web/src/components/common/SimpleLink.vue | 66 ++++++++++++++++++ web/src/components/layout/Footer.vue | 51 ++++++++++---- web/src/components/layout/Header.vue | 80 +++++++++++++++++++--- .../HeaderSearchInput.vue} | 60 +++++++++++----- web/src/views/BookmarkEdit.vue | 73 +++++++++++++++----- web/src/views/Home.vue | 6 +- web/src/views/Login.vue | 27 +++++--- 17 files changed, 442 insertions(+), 125 deletions(-) create mode 100644 web/src/assets/less/_globals.less create mode 100644 web/src/assets/less/_titles.less create mode 100644 web/src/components/common/SimpleLink.vue rename web/src/components/{SearchInput.vue => layout/HeaderSearchInput.vue} (60%) -- 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 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>.
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>.
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 8b880e098381ad20697ba82bb0f8c19348773abd Author: kaufmann <kaufmann@codelutin.com> Date: Fri Jul 31 17:27:04 2020 +0200 Améliorations d'affichage du bandeau d'entête --- web/src/App.vue | 25 +++---- web/src/assets/less/_base.less | 9 +++ web/src/assets/less/_colors.less | 30 ++++---- web/src/assets/less/_globals.less | 28 ++++++-- web/src/components/layout/Header.vue | 80 +++++++++++++++++++--- .../HeaderSearchInput.vue} | 60 +++++++++++----- 6 files changed, 167 insertions(+), 65 deletions(-) diff --git a/web/src/App.vue b/web/src/App.vue index 763f104..a4e7b57 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -3,7 +3,7 @@ <Sidebar /> <main> - <Header /> + <Header :route="$route.fullPath"/> <router-view :key="$route.fullPath" /> </main> @@ -74,8 +74,6 @@ export default App @import './assets/less/main'; body { - padding-left: var(--sidebar-width); - background-color: var(--color-bg); } @@ -87,23 +85,16 @@ body { color: #2c3e50; } -#nav { - padding: var(--margin--medium); -} - -#nav a { - font-weight: bold; - color: #2c3e50; -} - -#nav a.router-link-exact-active { - color: #42b983; -} main { - // width: calc(100vw - var(--sidebar-width)); - // min-height: 100vh; + min-height: 100vh; padding-bottom: var(--footer-height); } + +@media screen and (min-width: @screen-desktop-low) { + body { + padding-left: var(--sidebar-width); + } +} </style> diff --git a/web/src/assets/less/_base.less b/web/src/assets/less/_base.less index 76246a0..7490175 100644 --- a/web/src/assets/less/_base.less +++ b/web/src/assets/less/_base.less @@ -21,4 +21,13 @@ textarea { &:focus { border-color: var(--color-active); } +} + +select { + padding: var(--default-marge--small) var(--default-marge--medium); + + background-color: inherit; + border: 1px solid var(--color-main); + border-right-color: var(--color-main--darker); + border-top-color: var(--color-main--darker); } \ No newline at end of file diff --git a/web/src/assets/less/_colors.less b/web/src/assets/less/_colors.less index 111f499..4def905 100644 --- a/web/src/assets/less/_colors.less +++ b/web/src/assets/less/_colors.less @@ -1,19 +1,15 @@ * { - --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-grey-pale : #F4F4F4; - --color-white : #FFF; - --color-bg-bookmark : #FAFDFD; - - --color-hover : var(--color-complementary); - --color-active : var(--color-complementary--darker); - --color-bg : var(--color-white); - --color-bg-sidebar : var(--color-black); + --color-link : var(--color-analog); + --color-hover : var(--color-complementary); + --color-active : var(--color-complementary--darker); + --color-bg : var(--color-white); + --color-bg-sidebar : var(--color-black); + + --color-error : var(--color-complementary); + + --color-text : var(--color-black); + --color-bookmarks-header : var(--color-grey-pale); + --color-separation-border : #EEE; } /* @@ -39,13 +35,11 @@ @color-bookmark-background : mix(#FFF, @color-main, 98%); @color-bookmark-title : @color-black; -@color-bookmarks-header : #F3F4F4; @color-form-label : lighten(@color-black, 25%); @color-form-input-border : @color-grey; -@color-separation-border : #EEE; -@color-text : @color-black; + @color-text-secondary : @color-grey; */ diff --git a/web/src/assets/less/_globals.less b/web/src/assets/less/_globals.less index f6682da..d157add 100644 --- a/web/src/assets/less/_globals.less +++ b/web/src/assets/less/_globals.less @@ -1,12 +1,30 @@ :root { + --font: 'Fira Sans'; + --font-size : 16px; + + + --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-grey-pale : #F4F4F4; + --color-white : #FFF; + --color-bg-bookmark : #FAFDFD; + --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 + +} + +@screen-desktop-low : 984px; +@screen-desktop-large : 1200px; diff --git a/web/src/components/layout/Header.vue b/web/src/components/layout/Header.vue index 9c226c1..27c7e88 100644 --- a/web/src/components/layout/Header.vue +++ b/web/src/components/layout/Header.vue @@ -1,6 +1,10 @@ <template> - <header> - <SearchInput class="search-input"></SearchInput> + <header :class="{'empty': isHeaderEmpty}"> + <div id="header-logo"> + <a href="/"><img src="../../assets/img/logos/bow-text.svg" alt="Bow"></a> + </div> + + <HeaderSearchInput id="header-search"></HeaderSearchInput> <div id="header-user-infos"> <span v-if="authenticated"> @@ -18,48 +22,106 @@ </template> <script> -import { Component, Vue } from 'vue-property-decorator' -import SearchInput from '@/components/SearchInput' +import { Component, Prop, Vue } from 'vue-property-decorator' +import HeaderSearchInput from '@/components/layout/HeaderSearchInput' @Component({ name: 'Header', - components: { SearchInput } + props: [ + 'route' + ], + components: { HeaderSearchInput } }) class Header extends Vue { + @Prop route + logout() { this.$fetch .delete(`/users/${this.user.id}/auth`) .then(() => this.$storage.delete('bow-user')) .then(() => this.$router.push({ name: 'Login' })) } + + get isHeaderEmpty() { + return this.route == '/login'; + } } export default Header </script> <style scoped lang="less"> +@import '../../assets/less/_globals'; header { display: flex; - flex-direction: row; + flex-direction: column; align-items: center; - - height: var(--header-height); + justify-content: center; border-bottom: 1px solid #eee; - .search-input { + #header-search { flex-grow: 2; } + + #header-logo, + #header-search, + #header-user-infos { + height: 100%; + padding: 30px; + } + + &.empty { + justify-content: center; + background-color: var(--color-bg-sidebar); + + #header-logo { + text-align: center; + animation: reveal-down 1s ease; + + img { + filter: brightness(0) invert(1); + } + } + + #header-search, + #header-user-infos { + display: none; + } + } } #since { font-size: 75%; } +#header-search { + width: 100%; + padding: 20px; + + background: #CCC; + border-left: 1px solid #EEE; + border-right: 1px solid #EEE; +} + #header-user-infos * { display: flex; flex-direction: column; align-items: center; justify-content: right; } + +@media screen and (min-width: @screen-desktop-low) { + header { + flex-direction: row; + + height: var(--header-height); + } + + #header-search { + padding: 0; + + background: transparent; + } +} </style> diff --git a/web/src/components/SearchInput.vue b/web/src/components/layout/HeaderSearchInput.vue similarity index 60% rename from web/src/components/SearchInput.vue rename to web/src/components/layout/HeaderSearchInput.vue index 8c5d9e9..a1ee01b 100644 --- a/web/src/components/SearchInput.vue +++ b/web/src/components/layout/HeaderSearchInput.vue @@ -1,38 +1,68 @@ <template> - <div class="search"> - <div> - <label for="tags">tags</label> + <div id="header-search"> + <span class="header-search-label"> + <i class="icon-search icon"></i> + </span> + + <select id="searchType" v-model="searchType"> + <option value="tagLine">Par tag</option> + <option value="fullTextLine">Full text</option> + <option value="q">Web</option> + </select> + + <div v-if="searchType == 'tagLine'"> <TagsInput id="tags" v-model="tags" :availableTags="queryTags" :noCreation="true"></TagsInput> </div> - <div> + <div v-if="searchType == 'fullTextLine'"> <label for="fulltext" :title='$t(`ex: dad or mum -"little children"`)'>fulltext</label> <input id="fulltext" type="text" v-model="fulltext" @keyup.enter="searchFulltext(mFulltext)" /> </div> - <form :action="$fetch.createUrl('/opensearch')"> + <form v-if="searchType == 'q'" :action="$fetch.createUrl('/opensearch')"> <label for="web">web</label> <input id="web" name="action" type="text" /> </form> + + <Button @click="search">Search</Button> </div> </template> <script> import { Component, Vue } from 'vue-property-decorator' +import Button from '@/components/common/Button.vue' import TagsInput from '@/components/common/TagsInput' @Component({ - name: 'SearchInput', - components: { TagsInput } + name: 'HeaderSearchInput', + components: { + Button, + TagsInput + } }) class SearchInput extends Vue { // mTags = '' mFulltext = '' timeoutFulltextSearch = 0 - + searchType = 'tagLine'; + cancelTimeoutFulltextSearch() { this.timeoutFulltextSearch && clearTimeout(this.timeoutFulltextSearch) this.timeoutFulltextSearch = 0 } + search() { + switch(this.searchType) { + case 'tagLine': + alert('toDo'); + break; + case 'fulltext': + this.searchFulltext(this.mFulltext); + break; + case 'q': + alert('toDo'); + break; + } + } + searchFulltext(value) { this.cancelTimeoutFulltextSearch() this.changeFulltextAndGo(value) @@ -73,19 +103,17 @@ export default SearchInput </script> <style scoped lang="less"> -.search { +#header-search { display: flex; flex-direction: row; + align-items: center; + justify-content: center; padding-top: 0; padding-bottom: 0; -} -.search > * { - flex-grow: 2; -} -.search > * { - display: flex; - flex-direction: column; + & > * { + margin: var(--default-marge--small); + } } </style> -- 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 d3f5012e1d4d569690f23bd2b4a764f1a0734fd3 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Jul 31 17:27:52 2020 +0200 Améliorations d'affichage des bookmarks --- web/src/components/Bookmark.vue | 34 ++++++++++++++++++++++++++++++++-- web/src/components/CloudTags.vue | 9 +++++++++ web/src/components/Navigation.vue | 12 +++++++++++- web/src/views/Home.vue | 6 +++--- 4 files changed, 55 insertions(+), 6 deletions(-) diff --git a/web/src/components/Bookmark.vue b/web/src/components/Bookmark.vue index 5b1d193..09e5069 100644 --- a/web/src/components/Bookmark.vue +++ b/web/src/components/Bookmark.vue @@ -111,8 +111,7 @@ b { .bookmark { display: flex; flex-direction: row; - align-items: stretch; - justify-content: space-around; //center; + justify-content: center; align-items: center; margin-bottom: var(--margin--small); @@ -149,4 +148,35 @@ b { width: 100%; } } + +.bookmark-favicon { + width: 20px; + height: 20px; + margin-right: var(--margin--small); +} + +.bookmark-title { + color: var(--color-black); +} + +.bookmark-uri a { + color: inherit; + font-weight: bold; +} + + +.bookmarks-list { + .bookmark-icon { + width: 70px; + + text-align: center; + } + .bookmark-content { + flex: 1; + } +} + +.bookmarks-grid { + +} </style> diff --git a/web/src/components/CloudTags.vue b/web/src/components/CloudTags.vue index 9ed0d8d..c3e998d 100644 --- a/web/src/components/CloudTags.vue +++ b/web/src/components/CloudTags.vue @@ -52,6 +52,15 @@ export default CloudTags flex-wrap: wrap; justify-content: center; align-items: center; + + margin-bottom: var(--default-marge--small); + padding: var(--default-marge--large); + + color: white; + text-align: center; + + background: var(--color-analog); + border-bottom: 1px solid var(--color-separation-border); } .tag { margin: 4px; diff --git a/web/src/components/Navigation.vue b/web/src/components/Navigation.vue index cef1acf..b8d5052 100644 --- a/web/src/components/Navigation.vue +++ b/web/src/components/Navigation.vue @@ -66,8 +66,18 @@ export default Navigation .navigation { display: flex; flex-wrap: wrap; - justify-content: center; align-items: center; + justify-content: center; + + margin: var(--default-marge--medium); + padding: var(--default-marge--small); + + background: var(--color-bookmarks-header); + border: 1px solid var(--color-separation-border); + color: var(--color-text); + position: relative; + text-align: center; + font-size: 130%; } .sort { diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue index 9f0df6a..54719e7 100644 --- a/web/src/views/Home.vue +++ b/web/src/views/Home.vue @@ -82,8 +82,8 @@ export default Home <style scoped lang="less"> .bookmarks-list { - padding-top: var(--margin--large); - padding-left: var(--margin--medium); - padding-right: var(--margin--medium); + margin-top: var(--margin--large); + margin-left: var(--margin--medium); + margin-right: var(--margin--medium); } </style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm