diff --git a/music_graph/index.html b/music_graph/index.html index 7065076..5fcaaa9 100644 --- a/music_graph/index.html +++ b/music_graph/index.html @@ -4,7 +4,7 @@ - music-graph v1.0 + music-graph v1.1
diff --git a/music_graph/src/MusicGraph.js b/music_graph/src/MusicGraph.js index 27bd958..c51f52e 100644 --- a/music_graph/src/MusicGraph.js +++ b/music_graph/src/MusicGraph.js @@ -208,7 +208,7 @@ export function MusicGraph(data) { if (d.type === 'Tag') { items.push({ idx: i++, - icon: icons.label, + icon: icons.expand, title: 'Related', fn: (d) => { this.api.getRelatedTags(d.id) @@ -218,19 +218,19 @@ export function MusicGraph(data) { } }) } - if ((d.type === 'Artist' || d.type === 'Group')) { - items.push({ - idx: i++, - icon: icons.label, - title: 'Label', - fn: (d) => { - this.api.getArtistLabels(d.mbid, d.id) - .then(data => { - this.addNodes(data.newNodes, data.relations, d.id) - }) - } - }) - } + // if ((d.type === 'Artist' || d.type === 'Group')) { + // items.push({ + // idx: i++, + // icon: icons.label, + // title: 'Label', + // fn: (d) => { + // this.api.getArtistLabels(d.mbid, d.id) + // .then(data => { + // this.addNodes(data.newNodes, data.relations, d.id) + // }) + // } + // }) + // } if (d.type === 'Album' || d.type === 'EP' || d.type === 'Single' || d.type === 'Group' || d.type === 'Artist') { let fn if (d.type === 'Group' || d.type === 'Artist') { @@ -275,9 +275,6 @@ export function MusicGraph(data) { title: 'Remove from graph', fn: (d) => { this.removeNodes([d.id]) - if (this._data.hoverArtist && d.id === this._data.hoverArtist.id) { - this._data.hoverArtist = undefined - } } }) @@ -484,6 +481,9 @@ export function MusicGraph(data) { this.expandedNodes.delete(id) this.graphSize-- } + if (this._data.hoverArtist && id === this._data.hoverArtist.id) { + this._data.hoverArtist = undefined + } }) this.nodes = this.nodes.filter(d => !idSetToRemove.has(d.id)) diff --git a/music_graph/src/components/AlbumCarousel.vue b/music_graph/src/components/AlbumCarousel.vue index 588eccd..2418a00 100644 --- a/music_graph/src/components/AlbumCarousel.vue +++ b/music_graph/src/components/AlbumCarousel.vue @@ -72,10 +72,20 @@ export default { width: 128px; } + @media (max-width: 601px) { + figcaption { + overflow: hidden; + text-overflow: ellipsis; + font-size: 90%; + } + + } + .el-image { width: 128px; height: 180px; } + .image-slot { font-size: 30px; display: flex; diff --git a/music_graph/src/components/ArtistInfo.vue b/music_graph/src/components/ArtistInfo.vue index 953cc97..ab80d41 100644 --- a/music_graph/src/components/ArtistInfo.vue +++ b/music_graph/src/components/ArtistInfo.vue @@ -29,7 +29,32 @@ - ♪ Playing "{{playingSong}} - {{playingRelease}}" ♪ +
+ +
+

{{artistInfo.comment}}

+
+
+ Tags + {{tag.name}} + +
+
+ ♪ Playing "{{playingSong}} - {{playingRelease}}" ♪ + ♪ {{playingSong}} - {{playingRelease}} @@ -98,23 +123,78 @@ export default { diff --git a/music_graph/src/components/HelloWorld.vue b/music_graph/src/components/MainPage.vue similarity index 95% rename from music_graph/src/components/HelloWorld.vue rename to music_graph/src/components/MainPage.vue index 56a8c9c..5fb5874 100644 --- a/music_graph/src/components/HelloWorld.vue +++ b/music_graph/src/components/MainPage.vue @@ -12,7 +12,7 @@ :api="api" /> - + @@ -51,9 +51,10 @@ export default { this.$notify({ title: 'Welcome!', - message: 'Use the search bar to add nodes. Right click nodes for more options', + message: 'Use the search bar to add nodes. Right click (or long tap) nodes for more options', type: 'info', - duration: 15 * 1000 + duration: 45 * 1000, + offset: 100 }) } } diff --git a/music_graph/src/components/Watermark.vue b/music_graph/src/components/Watermark.vue index 83ace57..b60ec46 100644 --- a/music_graph/src/components/Watermark.vue +++ b/music_graph/src/components/Watermark.vue @@ -12,12 +12,25 @@ export default { diff --git a/music_graph/src/router/index.js b/music_graph/src/router/index.js index 3a8bfbd..caf705a 100644 --- a/music_graph/src/router/index.js +++ b/music_graph/src/router/index.js @@ -1,6 +1,6 @@ import Vue from 'vue' import Router from 'vue-router' -import HelloWorld from '../components/HelloWorld' +import MainPage from '../components/MainPage' import AboutPage from '../components/AboutPage' Vue.use(Router) @@ -10,8 +10,8 @@ export default new Router({ routes: [ { path: '/', - name: 'HelloWorld', - component: HelloWorld + name: 'MainPage', + component: MainPage }, { path: '/about',