branch bow-v2-go updated (3334a36 -> ad665b6)
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 3334a36 Ajout de la police Fira new 1824ab5 Modifications d'affichage des bookmarks new ee544df Modifications d'affichage des header et footer new ad665b6 Modifications d'affichage des tags The 3 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 ad665b642e0933508e86fac7757d45574ec9711c Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 09:31:53 2020 +0200 Modifications d'affichage des tags commit ee544df8f9db5ce22aa669e339992e99483bf87c Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 09:31:26 2020 +0200 Modifications d'affichage des header et footer commit 1824ab583e68678e174dfb71c8d3b51968a04f09 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 09:31:10 2020 +0200 Modifications d'affichage des bookmarks Summary of changes: web/src/assets/less/_base.less | 22 +++- web/src/assets/less/_colors.less | 4 + web/src/assets/less/_theme-default.less | 4 +- web/src/components/Bookmark.vue | 148 +++++++++++++++++------- web/src/components/CloudTags.vue | 20 ++-- web/src/components/Navigation.vue | 12 +- web/src/components/bookmark/Alias.vue | 34 +++++- web/src/components/bookmark/Tags.vue | 67 ++++------- web/src/components/bookmark/Visit.vue | 16 ++- web/src/components/common/SimpleLink.vue | 79 +++++++------ web/src/components/common/TagsInput.vue | 14 ++- web/src/components/layout/Footer.vue | 48 ++++---- web/src/components/layout/Header.vue | 106 +++++++++++------ web/src/components/layout/HeaderSearchInput.vue | 7 +- web/src/components/layout/Sidebar.vue | 63 ++-------- web/src/views/BookmarkEdit.vue | 2 +- web/src/views/Home.vue | 22 +++- 17 files changed, 397 insertions(+), 271 deletions(-) -- 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 1824ab583e68678e174dfb71c8d3b51968a04f09 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 09:31:10 2020 +0200 Modifications d'affichage des bookmarks --- web/src/assets/less/_base.less | 22 ++++- web/src/assets/less/_colors.less | 4 + web/src/assets/less/_theme-default.less | 4 +- web/src/components/Bookmark.vue | 148 +++++++++++++++++++++---------- web/src/components/CloudTags.vue | 20 +++-- web/src/components/Navigation.vue | 12 ++- web/src/components/bookmark/Alias.vue | 34 +++++-- web/src/components/bookmark/Visit.vue | 16 ++-- web/src/components/common/SimpleLink.vue | 79 +++++++++-------- web/src/views/BookmarkEdit.vue | 2 +- web/src/views/Home.vue | 22 ++++- 11 files changed, 252 insertions(+), 111 deletions(-) diff --git a/web/src/assets/less/_base.less b/web/src/assets/less/_base.less index 3bb11e4..9b9bbd3 100644 --- a/web/src/assets/less/_base.less +++ b/web/src/assets/less/_base.less @@ -10,8 +10,9 @@ input[type="password"], input[type="number"], textarea { flex: 1; - - padding: var(--margin--small); + box-sizing: border-box; + min-height: var(--default-ui-element-height); + padding: 0 var(--margin--small); background-color: transparent; color: var(--color-black); @@ -23,11 +24,26 @@ textarea { } } +textarea { + padding: var(--margin--tiny) var(--margin--small); +} + select { - padding: var(--margin--small) var(--margin--medium); + box-sizing: border-box; + height: var(--default-ui-element-height); + padding: 0 var(--margin--small); background-color: inherit; border: 1px solid var(--color-main); border-right-color: var(--color-main--darker); border-top-color: var(--color-main--darker); +} + +a { + color: var(--color-main); + text-decoration: none; + + &:hover { + color: var(--color-hover); + } } \ No newline at end of file diff --git a/web/src/assets/less/_colors.less b/web/src/assets/less/_colors.less index 872f5d1..a59f463 100644 --- a/web/src/assets/less/_colors.less +++ b/web/src/assets/less/_colors.less @@ -12,7 +12,11 @@ --color-bookmarks-header : var(--color-white--darker); --color-bookmark-bg : #FAFDFD; + --color-footer-text : var(--color-grey); + --color-list-bg-odd : #E9F2F5; --color-list-bg-even : #d7e8ed; + + --color-tag : var(--color-analog); } diff --git a/web/src/assets/less/_theme-default.less b/web/src/assets/less/_theme-default.less index b86308b..4d57e7e 100644 --- a/web/src/assets/less/_theme-default.less +++ b/web/src/assets/less/_theme-default.less @@ -11,7 +11,7 @@ --color-analog : #0a3d62; --color-analog--darker : #0a3d62; --color-black : #1e2a2f; - --color-grey : #999999; + --color-grey : #575757; --color-white--darker : #F4F4F4; --color-error : #b71540; @@ -19,6 +19,7 @@ --sidebar-width : 75px; --header-height : var(--sidebar-width); --footer-height : 100px; + --default-ui-element-height : 36px; /* Default margin between elements */ --margin--tiny : 5px; @@ -28,6 +29,7 @@ /* Some display configuration for reusable components */ --default-bookmark-radius : 3px; + --default-bookmark-title-height : 30px; } diff --git a/web/src/components/Bookmark.vue b/web/src/components/Bookmark.vue index e252f37..cdc2d8f 100644 --- a/web/src/components/Bookmark.vue +++ b/web/src/components/Bookmark.vue @@ -1,45 +1,67 @@ <template> - <div> - <div v-if="this.deleted" class="bookmark">Deleted <a :href="bookmark.uri">{{ bookmark.uri }}</a></div> - <div v-else class="bookmark"> - <LinkCount class="screenshot" :bookmarkId="bookmark.id" :link="bookmark.uri"> + <div class="bookmark"> + <template v-if="this.deleted"> + Deleted <a :href="bookmark.uri">{{ bookmark.uri }}</a> + </template> + <template v-else> + <LinkCount + class="bookmark-screenshot" + :bookmarkId="bookmark.id" + :link="bookmark.uri"> <img v-if="bookmark.screenshot" :src="hexaToImg(bookmark.screenshot)" /> </LinkCount> - <div class="info"> - <div class="info-header"> - <Visit :visit="bookmark.visit"></Visit> + + <div class="bookmark-info"> + <div class="bookmark-title"> + <LinkCount + class="bookmark-uri" + :bookmarkId="bookmark.id" + :link="bookmark.uri"> + {{ bookmark.uri }} + </LinkCount> + <LinkCount :bookmarkId="bookmark.id" :link="bookmark.uri"> <img v-if="bookmark.favicon" :src="hexaToImg(bookmark.favicon)" /> </LinkCount> - <LinkCount class="uri" :bookmarkId="bookmark.id" :link="bookmark.uri"> - {{ bookmark.uri }} - </LinkCount> - <button @click.prevent="edit">Edit</button> - <button @click.prevent="deleteBookmark">Delete</button> + + <Visit :visit="bookmark.visit"></Visit> </div> - <!-- <span>{{ bookmark.authenticationinfo }}</span> faire afficher une popup de modification de l'objet auth--> + + <Aliases + :bookmarkId="bookmark.id" + :link="bookmark.uri" + :aliases="bookmark.privatealias" + title="alias privé" + ></Aliases> + <Aliases + :bookmarkId="bookmark.id" + :link="bookmark.uri" + :aliases="bookmark.publicalias" + title="alias public" + ></Aliases> + <Description :description="bookmark.hldescription || bookmark.description"></Description> + + <!-- <span>{{ bookmark.authenticationinfo }}</span> faire afficher une popup de modification de l'objet auth--> <AuthenticationInfo v-if="bookmark.authenticationinfo" :authenticationinfo="bookmark.authenticationinfo"></AuthenticationInfo> - <div class="info-footer"> - <BookmarkDate :creationDate="date" :updateDate="bookmark.updatedate"></BookmarkDate> - <Tags :tags="bookmark.tags" :hltags="bookmark.hltags || bookmark.tags"></Tags> - <!-- <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 --> - <Aliases - :bookmarkId="bookmark.id" - :link="bookmark.uri" - :aliases="bookmark.privatealias" - title="alias privé" - ></Aliases> - <Aliases - :bookmarkId="bookmark.id" - :link="bookmark.uri" - :aliases="bookmark.publicalias" - title="alias public" - ></Aliases> - </div> + + <BookmarkDate :creationDate="date" :updateDate="bookmark.updatedate"></BookmarkDate> + <!-- <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> + + <div class="bookmark-tags"> + <Tags + :tags="bookmark.tags" + :hltags="bookmark.hltags || bookmark.tags" + ></Tags> + </div> + + <div class="bookmark-actions"> + <button @click.prevent="edit">Edit</button> + <button @click.prevent="deleteBookmark">Delete</button> </div> - </div> + </template> </div> </template> @@ -104,29 +126,27 @@ export default Bookmark </script> <style lang="less"> +@import '../assets/less/globals'; + b { color: red; } .bookmark { + position: relative; + display: flex; flex-direction: row; - justify-content: center; - align-items: center; + justify-content: space-between; + align-items: flex-start; margin-bottom: var(--margin--small); + padding: var(--margin--small) var(--margin--medium); background-color: var(--color-bookmark-bg); border: 1px solid var(--color-separation-border); - .screenshot { - flex-grow: 0; - width: 65px; - margin: 2px; - } - - .info, - .uri { + .info{ flex-grow: 2; } @@ -149,14 +169,45 @@ b { } } +.bookmark-screenshot { + position: absolute; + right: 0; + top: 0; + + width: 65px; +} + +.bookmark-info { + flex-grow: 1; +} + +.bookmark-title { + display: flex; + align-items: baseline; + + & > * { + margin-right: var(--margin--tiny); + } +} + +.bookmark-uri { + padding-bottom: var(--margin--tiny); + color: #555; + line-height: var(--default-bookmark-title-height); + + &:hover { + color: var(--color-hover); + } +} + .bookmark-favicon { width: 20px; height: 20px; margin-right: var(--margin--small); } -.bookmark-title { - color: var(--color-black); +.bookmark-tags { + flex-grow: 1; } .bookmark-uri a { @@ -176,7 +227,14 @@ b { } } -.bookmarks-grid { +@media screen and (min-width: @screen-desktop-low) { + .bookmark-info { + max-width: 50%; + } + + .bookmark-tags { + max-width: 25%; + } } </style> diff --git a/web/src/components/CloudTags.vue b/web/src/components/CloudTags.vue index afa777b..db73398 100644 --- a/web/src/components/CloudTags.vue +++ b/web/src/components/CloudTags.vue @@ -12,6 +12,9 @@ import { Component, Vue } from 'vue-property-decorator' components: {} }) class CloudTags extends Vue { + tagFontSizeMinimum = 14; + tagFontSizeMaximum = 40; + addTagToQuery(tag) { this.addTagsAndGo([tag]) } @@ -34,9 +37,9 @@ class CloudTags extends Vue { getFont(index) { let count = this.counts[index] - let result = (30 * (count - this.tmin)) / (this.tmax - this.tmin) - if (result < 10) { - result = 10 + let result = (this.tagFontSizeMaximum * (count - this.tmin)) / (this.tmax - this.tmin) + if (result < this.tagFontSizeMinimum) { + result = this.tagFontSizeMinimum } return result @@ -52,6 +55,7 @@ export default CloudTags flex-wrap: wrap; justify-content: center; align-items: center; + width: 100%; margin-bottom: var(--margin--small); padding: var(--margin--large); @@ -63,9 +67,11 @@ export default CloudTags border-bottom: 1px solid var(--color-separation-border); } .tag { - margin: 4px; -} -.tag:hover { - color: wheat; + margin: var(--margin--tiny); + cursor: pointer; + + &:hover { + color: var(--color-hover); + } } </style> diff --git a/web/src/components/Navigation.vue b/web/src/components/Navigation.vue index 6aa9d46..17fadf6 100644 --- a/web/src/components/Navigation.vue +++ b/web/src/components/Navigation.vue @@ -1,5 +1,10 @@ <template> <div class="navigation"> + <div class="display-settings"> + <i class="icon icon-list"/> + <i class="icon icon-grid"/> + </div> + <div class="cursor"> <button @click="goFirst()"><<</button> <button @click="goPrev()"><</button> @@ -66,10 +71,11 @@ export default Navigation .navigation { display: flex; flex-wrap: wrap; - align-items: center; - justify-content: center; + justify-content: space-between; + width: calc(100% - 2 * var(--margin--medium)); + max-width: 1200px; - margin: var(--margin--medium); + margin: var(--margin--small) var(--margin--medium); padding: var(--margin--small); background: var(--color-bookmarks-header); diff --git a/web/src/components/bookmark/Alias.vue b/web/src/components/bookmark/Alias.vue index e932e23..3b91883 100644 --- a/web/src/components/bookmark/Alias.vue +++ b/web/src/components/bookmark/Alias.vue @@ -1,9 +1,14 @@ <template> - <span class="aliases"> - <LinkCount class="alias" v-for="alias in aliases || []" :key="alias" :bookmarkId="bookmarkId" :link="link">{{ - alias - }}</LinkCount> - </span> + <div class="aliases"> + <LinkCount + v-for="alias in aliases || []" + :key="alias" + class="alias" + :bookmarkId="bookmarkId" + :link="link"> + {{alias}} + </LinkCount> + </div> </template> <script> @@ -23,3 +28,22 @@ class Aliases extends Vue { export default Aliases </script> + +<style scoped lang="less"> +.aliases { + display: inline-block; + margin-right: var(--margin--small); + margin-bottom: var(--margin--tiny); +} + +.alias { + display: inline; + padding-left: var(--margin--tiny); + padding-right: var(--margin--tiny); + border-bottom: 2px solid var(--color-main); + + &:hover { + border-bottom-color: var(--color-hover); + } +} +</style> diff --git a/web/src/components/bookmark/Visit.vue b/web/src/components/bookmark/Visit.vue index ff306ea..87aa3bb 100644 --- a/web/src/components/bookmark/Visit.vue +++ b/web/src/components/bookmark/Visit.vue @@ -19,14 +19,18 @@ export default Visit <style scoped lang="less"> .visit { - border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + height: 26px; + width: 26px; + color: white; - background-color: rgb(163, 19, 9); text-align: center; - padding: 8px; - } - .visit * { - vertical-align: middle; + border-radius: 50%; + background-color: #b715401a; + color: #b71540; + font-weight: bold; } </style> diff --git a/web/src/components/common/SimpleLink.vue b/web/src/components/common/SimpleLink.vue index 11ca670..42972b1 100644 --- a/web/src/components/common/SimpleLink.vue +++ b/web/src/components/common/SimpleLink.vue @@ -16,51 +16,58 @@ </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; +.link { + position: relative; + padding: 5px 10px 5px 10px; + color: var(--color-main); + text-decoration: none; + z-index: 1; + cursor: pointer; + transition: color 0.2s ease; - &::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 100%; + &::after { + content: ''; + position: absolute; + bottom: 4px; + left: 0; + width: 100%; + height: 100%; - background: #0a3d6211; + background: #09777211; - transform: scaleY(0.2); - transform-origin: bottom; - transition: transform 0.2s ease-in-out; - z-index: -1; - content: ''; - } + transform: scaleY(0.2); + transform-origin: bottom; + transition: all 0.2s ease-in-out; + z-index: -1; + content: ''; + } - &:hover { - border-bottom-color: #0a3d62; + &:hover { + color: var(--color-hover); - &::after { - transform: scaleY(1); - } + &::after { + bottom: 0; + transform: scaleY(1); } + } + +} +.colored-bg { + color: #fff; + border-bottom-color: #FFF7; + &::after { + background: #fff1; } - .colored-bg { - color: #fff; - border-bottom-color: #FFF7; - &::after { - background: #fff1; - } + &:hover { + border-bottom-color: #fff; + } +} - &:hover { - border-bottom-color: #fff; - } +.link--icon-only { + &::after { + display: none; } +} </style> diff --git a/web/src/views/BookmarkEdit.vue b/web/src/views/BookmarkEdit.vue index e40ed0e..ae56e6d 100644 --- a/web/src/views/BookmarkEdit.vue +++ b/web/src/views/BookmarkEdit.vue @@ -5,7 +5,7 @@ </PageMainTitle> <div>{{ errorMsg }}</div> - <form class="bow-form"> + <form class="bow-form" onsubmit.prevent="save"> <FormRow> <label>Date</label> <BookmarkDate diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue index 54719e7..3143047 100644 --- a/web/src/views/Home.vue +++ b/web/src/views/Home.vue @@ -3,8 +3,13 @@ <div>{{ errorMsg }}</div> <CloudTags></CloudTags> <Navigation></Navigation> + <div class="bookmarks-list"> - <Bookmark v-for="bookmark in bookmarks" :key="bookmark.id" :bookmark="bookmark"></Bookmark> + <Bookmark + v-for="bookmark in bookmarks" + :key="bookmark.id" + :bookmark="bookmark" + ></Bookmark> </div> </div> </template> @@ -81,9 +86,18 @@ export default Home </script> <style scoped lang="less"> +.home { + display: flex; + flex-direction: column; + align-items: center; +} + .bookmarks-list { - margin-top: var(--margin--large); - margin-left: var(--margin--medium); - margin-right: var(--margin--medium); + width: 100%; + max-width: calc(1200px + 2 * var(--margin--medium)); + + margin-top: var(--margin--small); + padding-left: var(--margin--medium); + padding-right: var(--margin--medium); } </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 ee544df8f9db5ce22aa669e339992e99483bf87c Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 09:31:26 2020 +0200 Modifications d'affichage des header et footer --- web/src/components/layout/Footer.vue | 48 ++++++----- web/src/components/layout/Header.vue | 106 +++++++++++++++--------- web/src/components/layout/HeaderSearchInput.vue | 7 +- web/src/components/layout/Sidebar.vue | 63 ++------------ 4 files changed, 107 insertions(+), 117 deletions(-) diff --git a/web/src/components/layout/Footer.vue b/web/src/components/layout/Footer.vue index 5bea25f..f69603c 100644 --- a/web/src/components/layout/Footer.vue +++ b/web/src/components/layout/Footer.vue @@ -2,12 +2,13 @@ <footer> <p> Fait avec <i class="icon icon-heart"></i> par - <SimpleLink + <a + class="link--invisible" href="http://www.codelutin.com" title="Code Lutin" > <i class="icon icon-lutin"></i> - </SimpleLink> + </a> </p> <p> <SimpleLink @@ -55,31 +56,34 @@ export default Footer </script> <style scoped lang="less"> - footer { - height: var(--footer-height); +footer { + height: var(--footer-height); - padding: var(--margin--small); - margin-top: calc(-1 * var(--footer-height)); + padding: var(--margin--small); + margin-top: calc(-1 * var(--footer-height)); - text-align: center; - color: #CCC; + text-align: center; + color: var(--color-footer-text); - p { - margin-top: var(--margin--small); - } + p { + margin-top: var(--margin--small); + } - .link { - margin-left: 10px; - margin-right: 10px; - } + .link { + margin-left: 10px; + margin-right: 10px; + } - .icon { - margin-left: var(--margin--tiny);; - margin-right: var(--margin--tiny);; - } - .icon-lutin { - font-size: 140%; - } + .icon { + margin-left: var(--margin--tiny);; + margin-right: var(--margin--tiny);; } + .icon-lutin { + font-size: 140%; + } +} +.link--invisible:not(:hover) { + color: var(--color-footer-text); +} </style> diff --git a/web/src/components/layout/Header.vue b/web/src/components/layout/Header.vue index 000c4a0..3ece915 100644 --- a/web/src/components/layout/Header.vue +++ b/web/src/components/layout/Header.vue @@ -1,22 +1,30 @@ <template> <header :class="{'empty': isHeaderEmpty}"> <div id="header-logo"> - <a href="/"><img src="../../assets/img/logos/bow-text.svg" alt="Bow"></a> + <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"> - <router-link to="/preferences"> - {{ this.user.login }} - </router-link> - <span id="since">(bow user since {{ new Date(this.user.creationdate).getFullYear() }})</span> - <button @click="logout">Logout</button> - </span> - <span v-else> + <template v-if="authenticated"> + <div> + <router-link to="/preferences"> + {{ this.user.login }} + </router-link> + <SimpleLink @click="logout" class="link--icon-only"> + <i class="icon-logout icon"></i> + </SimpleLink> + </div> + <div id="since"> + bow user since {{ new Date(this.user.creationdate).getFullYear() }} + </div> + </template> + <template v-else> <router-link to="/login">Login</router-link> - </span> + </template> </div> </header> @@ -25,13 +33,17 @@ <script> import { Component, Prop, Vue } from 'vue-property-decorator' import HeaderSearchInput from '@/components/layout/HeaderSearchInput' +import SimpleLink from '@/components/common/SimpleLink.vue' @Component({ name: 'Header', props: [ 'route' ], - components: { HeaderSearchInput } + components: { + HeaderSearchInput, + SimpleLink + } }) class Header extends Vue { @Prop route @@ -60,40 +72,65 @@ header { justify-content: center; border-bottom: 1px solid var(--color-separation-border); +} - #header-search { - flex-grow: 2; +#header-logo, +#header-search, +#header-user-infos { + display: flex; + align-items: center; + justify-content: center; + height: var(--header-height); + padding: var(--margin--small) var(--margin--medium); +} + +#header-logo { + img { + vertical-align: bottom; } +} - #header-logo, - #header-search, - #header-user-infos { - height: var(--header-height); - padding: 30px; +#header-search { + flex-grow: 2; +} + +#header-user-infos { + flex-direction: column; + align-items: flex-start; + + & > div { + display: flex; + align-items: baseline; } - &.empty { - justify-content: center; - background-color: var(--color-bg-sidebar); + .link--icon-only { + padding-top: 0; + padding-bottom: 0; + } +} - #header-logo { - text-align: center; - animation: reveal-down 1s ease; +header.empty { + justify-content: center; + background-color: var(--color-bg-sidebar); - img { - filter: brightness(0) invert(1); - } - } + #header-logo { + text-align: center; + animation: reveal-down 1s ease; - #header-search, - #header-user-infos { - display: none; + img { + filter: brightness(0) invert(1); } } + + #header-search, + #header-user-infos { + display: none; + } } #since { font-size: 75%; + color: var(--color-grey); } #header-search { @@ -105,13 +142,6 @@ header { border-right: 1px solid var(--color-separation-border); } -#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; diff --git a/web/src/components/layout/HeaderSearchInput.vue b/web/src/components/layout/HeaderSearchInput.vue index 2af88f6..f817a79 100644 --- a/web/src/components/layout/HeaderSearchInput.vue +++ b/web/src/components/layout/HeaderSearchInput.vue @@ -22,7 +22,7 @@ <input id="web" name="action" type="text" /> </form> - <Button @click="search">Search</Button> + <Button @click="search" class="button">Search</Button> </div> </template> @@ -116,4 +116,9 @@ export default SearchInput margin: var(--margin--small); } } + +.button { + height: var(--default-ui-element-height); + font-size: 13px; +} </style> diff --git a/web/src/components/layout/Sidebar.vue b/web/src/components/layout/Sidebar.vue index 561f2f7..ab2d503 100644 --- a/web/src/components/layout/Sidebar.vue +++ b/web/src/components/layout/Sidebar.vue @@ -1,7 +1,9 @@ <template> <div id="sidebar"> <div id="sidebar-logo"> - <a href="/"><img src="../../assets/img/logos/bow.svg" alt="Bow Logo"/></a> + <a href="/"> + <img src="../../assets/img/logos/bow.svg" alt="Bow Logo"/> + </a> <Button id="toggle-mobile-menu" @click="toggleMobileMenu">Menu</Button> </div> @@ -89,6 +91,7 @@ export default Sidebar #sidebar-logo { display: flex; + align-items: center; justify-content: space-between; width: 100%; @@ -99,7 +102,9 @@ export default Sidebar border-right: 1px solid var(--color-separation-border); - font-size: 36px; + img { + vertical-align: middle; + } } #sidebar-menu { @@ -121,60 +126,6 @@ export default Sidebar } } -.sidebar-menu-link { - display: flex; - justify-content: center; - align-items: center; - - position: relative; - flex: 1; - max-height: 150px; - - text-align: center; - - .icon { - color: white; - font-size: 30px; - } - a, - span { - width: 100%; - - z-index: 10; - } - a { - display: flex; - align-items: center; - justify-content: center; - - height: 100%; - } - &:hover .icon { - color: #fff; - } - &:before { - content: ''; - position: absolute; - top: 0; - left: 0; - - height: 100%; - width: 100%;; - - background-color: var(--color-hover); - opacity: 0; - - transform: scaleX(0); - transform-origin: left; - transition: transform 0.4s ease-in-out, opacity 0.6s ease-in-out; - } - &:hover:before { - transform: scaleX(1); - opacity: 1; - transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; - } -} - @media screen and (min-width: @screen-desktop-low) { #sidebar { width: var(--sidebar-width); -- 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 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>.
participants (1)
-
chorem.org scm