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>.