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