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 2cd308fe4aa0a813f6dcfd6af7f7816ec0a39449 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:20:40 2020 +0200 Modifications d'affichage de la pagination --- web/src/components/Navigation.vue | 31 ++++++++++--- web/src/components/common/Pagination.vue | 79 ++++++++++++++++++++++++++++++++ web/src/views/Home.vue | 10 +++- 3 files changed, 113 insertions(+), 7 deletions(-) diff --git a/web/src/components/Navigation.vue b/web/src/components/Navigation.vue index 17fadf6..aec4fe6 100644 --- a/web/src/components/Navigation.vue +++ b/web/src/components/Navigation.vue @@ -1,7 +1,7 @@ <template> <div class="navigation"> <div class="display-settings"> - <i class="icon icon-list"/> + <i class="icon icon-list active"/> <i class="icon icon-grid"/> </div> @@ -71,22 +71,41 @@ export default Navigation .navigation { display: flex; flex-wrap: wrap; + align-items: center; justify-content: space-between; width: calc(100% - 2 * var(--margin--medium)); max-width: 1200px; margin: var(--margin--small) var(--margin--medium); - padding: var(--margin--small); + padding: var(--margin--small) var(--margin--medium); - background: var(--color-bookmarks-header); - border: 1px solid var(--color-separation-border); color: var(--color-text); - position: relative; - text-align: center; font-size: 130%; + text-align: center; + + background-color: rgba(0, 0, 0, 0.07); + border: 1px solid var(--color-separation-border); + box-shadow: var(--default-ui-element-shadow); + position: relative; +} + +.display-settings { + flex: 2; + text-align: left; + + .icon { + opacity: 0.3; + margin-right: var(--margin--tiny); + } + .icon.active { + opacity: inherit; + } } .sort { + flex: 2; margin-left: 15px; + + text-align: right; } </style> diff --git a/web/src/components/common/Pagination.vue b/web/src/components/common/Pagination.vue new file mode 100644 index 0000000..cc7af04 --- /dev/null +++ b/web/src/components/common/Pagination.vue @@ -0,0 +1,79 @@ +<template> + <div class="pagination"> + <div class="cursor"> + <span :class="{hidden : queryInfo.first == 0}"> + <Button @click="goFirst()" class="pagination-button"><<</Button> + <Button @click="goPrev()" class="pagination-button"><</Button> + </span> + + <span class="current-page"> + {{ 1 + queryInfo.first }}-{{ last }} + </span> + + <span :class="{hidden : last == queryInfo.total}"> + <Button @click="goNext()" class="pagination-button">></Button> + <Button @click="goLast()" class="pagination-button">>></Button> + </span> + </div> + </div> +</template> + +<script> +import { Component, Vue } from 'vue-property-decorator' +import Button from '@/components/common/Button.vue' + +@Component({ + name: 'Pagination', + components: { Button } +}) +class Pagination extends Vue { + get last() { + if (this.queryInfo.first + this.queryInfo.limit <= this.queryInfo.total) { + return this.queryInfo.first + this.queryInfo.limit + } + return this.queryInfo.total + } + + get orderby() { + return this.queryInfo.orderby + } + + set orderby(value) { + this.changeOrderBy(value) + } + + get orderasc() { + return this.queryInfo.orderasc + } + + set orderasc(value) { + this.changeOrderAsc(value) + } +} + +export default Pagination +</script> + +<style lang="less" scoped> +.hidden { + visibility: hidden; + pointer-events: none; +} +.pagination { + margin-top: var(--margin--small); + margin-bottom: var(--margin--medium); +} + +.current-page { + margin: var(--margin--medium) 0; + padding: var(--margin--tiny) var(--margin--small); + + background-color: rgba(0, 0, 0, 0.07); + border: 2px solid transparent; +} + +.pagination-button { + margin-left: var(--margin--small); + margin-right: var(--margin--small); +} +</style> diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue index 3143047..fb72710 100644 --- a/web/src/views/Home.vue +++ b/web/src/views/Home.vue @@ -11,6 +11,8 @@ :bookmark="bookmark" ></Bookmark> </div> + + <Pagination></Pagination> </div> </template> @@ -20,11 +22,17 @@ import { Component, Prop, Vue } from 'vue-property-decorator' import Bookmark from '@/components/Bookmark' import CloudTags from '@/components/CloudTags' import Navigation from '@/components/Navigation' +import Pagination from '@/components/common/Pagination' @Component({ name: 'Home', props: ['id', 'tags', 'fulltext', 'query', 'orderby', 'orderasc', 'first'], - components: { CloudTags, Bookmark, Navigation } + components: { + CloudTags, + Bookmark, + Navigation, + Pagination + } }) class Home extends Vue { @Prop id -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.