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 e6e44978f5fd63fb3a87aca9a5d020e8db584f41 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:44:51 2020 +0200 Début d'intégration de la vue grille --- web/src/assets/less/_colors.less | 4 +-- web/src/assets/less/_theme-default.less | 6 ++++- web/src/components/Bookmark.vue | 12 +++++---- web/src/components/Navigation.vue | 19 +++++++++++--- web/src/views/Home.vue | 46 ++++++++++++++++++++++++++++++--- 5 files changed, 73 insertions(+), 14 deletions(-) diff --git a/web/src/assets/less/_colors.less b/web/src/assets/less/_colors.less index a59f463..6cf83e3 100644 --- a/web/src/assets/less/_colors.less +++ b/web/src/assets/less/_colors.less @@ -1,7 +1,7 @@ * { --color-text : #2c3e50; - --color-bg : var(--color-white); + --color-bg : var(--color-white--darker); --color-bg-sidebar : var(--color-black); --color-separation-border : #EEE; @@ -10,7 +10,7 @@ --color-active : var(--color-complementary--darker); --color-bookmarks-header : var(--color-white--darker); - --color-bookmark-bg : #FAFDFD; + --color-bookmark-bg : white; --color-footer-text : var(--color-grey); diff --git a/web/src/assets/less/_theme-default.less b/web/src/assets/less/_theme-default.less index 4d57e7e..92430f3 100644 --- a/web/src/assets/less/_theme-default.less +++ b/web/src/assets/less/_theme-default.less @@ -12,7 +12,8 @@ --color-analog--darker : #0a3d62; --color-black : #1e2a2f; --color-grey : #575757; - --color-white--darker : #F4F4F4; + --color-grey--lighter : #ccc; + --color-white--darker : #f8f9fa; --color-error : #b71540; /* Main display elements default sizes */ @@ -28,9 +29,12 @@ --margin--large : 50px; /* Some display configuration for reusable components */ + --default-ui-element-shadow : 0 2px 5px 1px rgba(0,0,0, 0.02); --default-bookmark-radius : 3px; --default-bookmark-title-height : 30px; + --grid-display-mode-bookmark-width: 300px; + } @font-face { diff --git a/web/src/components/Bookmark.vue b/web/src/components/Bookmark.vue index cdc2d8f..094d933 100644 --- a/web/src/components/Bookmark.vue +++ b/web/src/components/Bookmark.vue @@ -128,10 +128,6 @@ export default Bookmark <style lang="less"> @import '../assets/less/globals'; -b { - color: red; -} - .bookmark { position: relative; @@ -144,7 +140,7 @@ b { padding: var(--margin--small) var(--margin--medium); background-color: var(--color-bookmark-bg); - border: 1px solid var(--color-separation-border); + box-shadow: var(--default-ui-element-shadow); .info{ flex-grow: 2; @@ -227,6 +223,12 @@ b { } } +.grid { + .bookmark { + flex-direction: column; + overflow: auto; + } +} @media screen and (min-width: @screen-desktop-low) { .bookmark-info { diff --git a/web/src/components/Navigation.vue b/web/src/components/Navigation.vue index aec4fe6..0ff594b 100644 --- a/web/src/components/Navigation.vue +++ b/web/src/components/Navigation.vue @@ -1,8 +1,14 @@ <template> <div class="navigation"> <div class="display-settings"> - <i class="icon icon-list active"/> - <i class="icon icon-grid"/> + <i + class="icon icon-list" + :class="{active : displayMode == 'list'}" + @click="changeDisplayMode('list')"/> + <i + class="icon icon-grid" + :class="{active : displayMode == 'grid'}" + @click="changeDisplayMode('grid')"/> </div> <div class="cursor"> @@ -33,13 +39,16 @@ </template> <script> -import { Component, Vue } from 'vue-property-decorator' +import { Component, Prop, Vue } from 'vue-property-decorator' @Component({ name: 'Navigation', + props: ['displayMode'], components: {} }) class Navigation extends Vue { + @Prop displayMode + get last() { if (this.queryInfo.first + this.queryInfo.limit <= this.queryInfo.total) { return this.queryInfo.first + this.queryInfo.limit @@ -62,6 +71,10 @@ class Navigation extends Vue { set orderasc(value) { this.changeOrderAsc(value) } + + changeDisplayMode(mode) { + this.$emit('changeDisplayMode', mode) + } } export default Navigation diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue index fb72710..ccf23df 100644 --- a/web/src/views/Home.vue +++ b/web/src/views/Home.vue @@ -2,9 +2,12 @@ <div class="home"> <div>{{ errorMsg }}</div> <CloudTags></CloudTags> - <Navigation></Navigation> + <Navigation + :displayMode="displayMode" + @changeDisplayMode="changeDisplayMode" + ></Navigation> - <div class="bookmarks-list"> + <div class="bookmarks" :class="displayMode"> <Bookmark v-for="bookmark in bookmarks" :key="bookmark.id" @@ -50,6 +53,7 @@ class Home extends Vue { mOrderasc = this.orderasc || false mFirst = this.first || 0 + displayMode = 'list' errorMsg = '' get bookmarks() { @@ -84,6 +88,10 @@ class Home extends Vue { ) } + changeDisplayMode(mode) { + this.displayMode = mode + } + beforeMount() { console.log('beforeMounted home') this.fetchBookmark() @@ -94,13 +102,19 @@ export default Home </script> <style scoped lang="less"> +@import '../assets/less/globals'; + .home { display: flex; flex-direction: column; align-items: center; } -.bookmarks-list { +.bookmarks { + transition: all 0.2s ease-out; +} + +.bookmarks.list { width: 100%; max-width: calc(1200px + 2 * var(--margin--medium)); @@ -108,4 +122,30 @@ export default Home padding-left: var(--margin--medium); padding-right: var(--margin--medium); } + +.bookmarks.grid { + display: grid; + + max-width: calc(1200px); + grid-gap: var(--margin--large); + grid-template-columns: 100%; + margin: 0 var(--margin-large) var(--margin--large) + var(--margin--large); +} + +@media screen and (min-width: @screen-desktop-low) { + .bookmarks.grid { + /* FIXME LK : Check Browsers comptability */ + grid-template-columns: repeat( + auto-fill, + minmax(var(--grid-display-mode-bookmark-width), 1fr) + ); + grid-template-rows: repeat( + auto-fill, + 400px + ); + margin-bottom: var(--margin---small); + overflow-y: auto; + } +} </style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.