diff --git a/CHANGELOG b/CHANGELOG index 529d6fb7c485ba3fb4ed00fb01024b7443fd51b9..2a898eb066d822e82757bca1a31949d8688d1337 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -6,7 +6,8 @@ Changelog - Fixed broken file import due to wrong url (#73) - More accurate mimetype detection -- Fixed really small size on small screens. +- Fixed really small size on small screens +- Added masonry layout for artists, requests and radios (#68) 0.5.1 (2018-02-24) diff --git a/front/package.json b/front/package.json index 042e332d0eb91d81df9c27fe13b82b0e16013d3a..d6bdb8c56caaeb8da80213800537ed255b5c960a 100644 --- a/front/package.json +++ b/front/package.json @@ -20,6 +20,7 @@ "js-logger": "^1.3.0", "jwt-decode": "^2.2.0", "lodash": "^4.17.4", + "masonry-layout": "^4.2.1", "moment": "^2.20.1", "moxios": "^0.4.0", "raven-js": "^3.22.3", @@ -27,6 +28,7 @@ "showdown": "^1.8.6", "vue": "^2.3.3", "vue-lazyload": "^1.1.4", + "vue-masonry": "^0.10.16", "vue-router": "^2.3.1", "vue-upload-component": "^2.7.4", "vuedraggable": "^2.14.1", diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue index 968b828a49df356baf3ab104edc6e7fa5c811bc5..45e50f8973c6f7571f85fb3a6b88d58be997cf8b 100644 --- a/front/src/components/audio/album/Card.vue +++ b/front/src/components/audio/album/Card.vue @@ -67,7 +67,7 @@ export default { data () { return { backend: backend, - initialTracks: 4, + initialTracks: 5, showAllTracks: false } }, diff --git a/front/src/components/audio/artist/Card.vue b/front/src/components/audio/artist/Card.vue index 9a82d6c8f315e09ab6d6ce2fb08c491ec31183e9..a5111434546e43c233d717616aa4363c7e6a36f3 100644 --- a/front/src/components/audio/artist/Card.vue +++ b/front/src/components/audio/artist/Card.vue @@ -54,8 +54,8 @@ export default { data () { return { backend: backend, - initialAlbums: 3, - showAllAlbums: false + initialAlbums: 30, + showAllAlbums: true } }, computed: { diff --git a/front/src/components/library/Artist.vue b/front/src/components/library/Artist.vue index c2834e1de87b11fd3fdd2f9e4e8a65c5c1045e75..7724428cac36ced03671c461dd76bea3acdd6364 100644 --- a/front/src/components/library/Artist.vue +++ b/front/src/components/library/Artist.vue @@ -30,7 +30,7 @@ </div> <div class="ui vertical stripe segment"> <h2>Albums by this artist</h2> - <div class="ui stackable three column grid"> + <div class="ui stackable doubling three column grid"> <div class="column" :key="album.id" v-for="album in albums"> <album-card :mode="'rich'" class="fluid" :album="album"></album-card> </div> diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue index c9bea5efc0c4667f9c625a62bf12f9b820c1dbf5..3cf123447128d8198853036ab1be5c0b52ebbc0a 100644 --- a/front/src/components/library/Artists.vue +++ b/front/src/components/library/Artists.vue @@ -34,8 +34,16 @@ </div> </div> <div class="ui hidden divider"></div> - <div v-if="result" class="ui stackable three column grid"> + <div + v-if="result" + v-masonry + transition-duration="0" + item-selector=".column" + percent-position="true" + stagger="0" + class="ui stackable three column doubling grid"> <div + v-masonry-tile v-if="result.results.length > 0" v-for="artist in result.results" :key="artist.id" diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue index 1952908ff8a5a56a6731c4ca3b6c74803beca8d5..303ce100ecf35ec46be8d6909b03398dbe125826 100644 --- a/front/src/components/library/Radios.vue +++ b/front/src/components/library/Radios.vue @@ -36,8 +36,16 @@ </div> </div> <div class="ui hidden divider"></div> - <div v-if="result" class="ui stackable three column grid"> + <div + v-if="result" + v-masonry + transition-duration="0" + item-selector=".column" + percent-position="true" + stagger="0" + class="ui stackable three column doubling grid"> <div + v-masonry-tile v-if="result.results.length > 0" v-for="radio in result.results" :key="radio.id" diff --git a/front/src/components/requests/Card.vue b/front/src/components/requests/Card.vue index deb9c3fe093a58cc6913805ad4fcbe9bed4da58d..17fecde5294a1e26d78467d8efc780b1b023b19f 100644 --- a/front/src/components/requests/Card.vue +++ b/front/src/components/requests/Card.vue @@ -5,10 +5,10 @@ <div class="description"> <div v-if="request.albums" v-html="$options.filters.markdown(request.albums)"></div> - <div v-if="request.comment" class="ui comments"> + <div class="ui comments"> <comment :user="request.user" - :content="request.comment" + :content="request.comment || ''" :date="request.creation_date"></comment> </div> </div> @@ -24,7 +24,7 @@ @click="createImport" v-if="request.status === 'pending' && importAction && $store.state.auth.availablePermissions['import.launch']" class="ui mini basic green right floated button">Create import</button> - + </div> </div> </template> diff --git a/front/src/components/requests/RequestsList.vue b/front/src/components/requests/RequestsList.vue index cb3e9af00bc40d0301b23dcb446576a567e7f153..33ba04f53c61a47e59fcd991185d3961ad12e693 100644 --- a/front/src/components/requests/RequestsList.vue +++ b/front/src/components/requests/RequestsList.vue @@ -34,8 +34,16 @@ </div> </div> <div class="ui hidden divider"></div> - <div v-if="result" class="ui stackable three column grid"> + <div + v-if="result" + v-masonry + transition-duration="0" + item-selector=".column" + percent-position="true" + stagger="0" + class="ui stackable three column doubling grid"> <div + v-masonry-tile v-if="result.results.length > 0" v-for="request in result.results" :key="request.id" diff --git a/front/src/main.js b/front/src/main.js index 2e351310a15e218d1e9438c12d7c8e8ba1b37426..caf924188086270a8d0e598c9a5307d3fa57c1e2 100644 --- a/front/src/main.js +++ b/front/src/main.js @@ -9,6 +9,7 @@ import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios' +import {VueMasonryPlugin} from 'vue-masonry' import VueLazyload from 'vue-lazyload' import store from './store' import config from './config' @@ -24,7 +25,9 @@ window.$ = window.jQuery = require('jquery') // play really nice with webpack and I want to get rid of Google Fonts // require('./semantic/semantic.css') require('semantic-ui-css/semantic.js') +require('masonry-layout') +Vue.use(VueMasonryPlugin) Vue.use(VueLazyload) Vue.config.productionTip = false