simon987/music-graph-ui
1
0
Fork 0
mirror of https://github.com/simon987/music-graph-ui.git synced 2025-04-19 10:06:42 +00:00
Code Issues Projects Releases Wiki Activity

Better mobile support

Browse Source
This commit is contained in:
simon 2019-07-14 21:50:36 -04:00
parent 8c45a7f519
commit 43b6917ed3
7 changed files with 150 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
music_graph/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="referrer" content="no-referrer"> <meta name="referrer" content="no-referrer">
<title>music-graph v1.0</title> <title>music-graph v1.1</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

34
music_graph/src/MusicGraph.js
View File

@ -208,7 +208,7 @@ export function MusicGraph(data) {
if (d.type === 'Tag') { if (d.type === 'Tag') {
items.push({ items.push({
idx: i++, idx: i++,
icon: icons.label, icon: icons.expand,
title: 'Related', title: 'Related',
fn: (d) => { fn: (d) => {
this.api.getRelatedTags(d.id) this.api.getRelatedTags(d.id)
@ -218,19 +218,19 @@ export function MusicGraph(data) {
} }
}) })
} }
if ((d.type === 'Artist' || d.type === 'Group')) { // if ((d.type === 'Artist' || d.type === 'Group')) {
items.push({ // items.push({
idx: i++, // idx: i++,
icon: icons.label, // icon: icons.label,
title: 'Label', // title: 'Label',
fn: (d) => { // fn: (d) => {
this.api.getArtistLabels(d.mbid, d.id) // this.api.getArtistLabels(d.mbid, d.id)
.then(data => { // .then(data => {
this.addNodes(data.newNodes, data.relations, d.id) // this.addNodes(data.newNodes, data.relations, d.id)
}) // })
} // }
}) // })
} // }
if (d.type === 'Album' || d.type === 'EP' || d.type === 'Single' || d.type === 'Group' || d.type === 'Artist') { if (d.type === 'Album' || d.type === 'EP' || d.type === 'Single' || d.type === 'Group' || d.type === 'Artist') {
let fn let fn
if (d.type === 'Group' || d.type === 'Artist') { if (d.type === 'Group' || d.type === 'Artist') {
@ -275,9 +275,6 @@ export function MusicGraph(data) {
title: 'Remove from graph', title: 'Remove from graph',
fn: (d) => { fn: (d) => {
this.removeNodes([d.id]) 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.expandedNodes.delete(id)
this.graphSize-- 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)) this.nodes = this.nodes.filter(d => !idSetToRemove.has(d.id))

10
music_graph/src/components/AlbumCarousel.vue
View File

@ -72,10 +72,20 @@ export default {
width: 128px; width: 128px;
} }
@media (max-width: 601px) {
figcaption {
overflow: hidden;
text-overflow: ellipsis;
font-size: 90%;
}
}
.el-image { .el-image {
width: 128px; width: 128px;
height: 180px; height: 180px;
} }
.image-slot { .image-slot {
font-size: 30px; font-size: 30px;
display: flex; display: flex;

118
music_graph/src/components/ArtistInfo.vue
View File

@ -29,7 +29,32 @@
</div> </div>
</div> </div>
</el-card> </el-card>
<span id="playing" v-if="playingSong">♪ Playing "{{playingSong}} - {{playingRelease}}" ♪</span> <div class="footer">
<AlbumCarousel
style="float: right"
:releases="artistInfo.releases"
:api="api"
interval="1250"/>
<div>
<p v-if="artistInfo.comment!==null"
class="comment"
>{{artistInfo.comment}}</p>
</div>
<div class="tag-group" v-if="artistInfo.tags && artistInfo.tags.length > 0">
<span class="tag-group__title">Tags</span>
<el-tag
v-for="tag in artistInfo.tags"
v-bind:key="tag.id"
v-bind:type="tag.type"
v-on:click="onTagClick(tag.id)"
title="Add tag to graph"
size="small"
>{{tag.name}}
</el-tag>
</div>
</div>
<span id="playing-large" v-if="playingSong">♪ Playing "{{playingSong}} - {{playingRelease}}" ♪</span>
<span id="playing" v-if="playingSong">♪ {{playingSong}} - {{playingRelease}}</span>
</div> </div>
</template> </template>
@ -98,23 +123,78 @@ export default {
</script> </script>
<style scoped> <style scoped>
.artist-info {
margin: 0 1em; @media screen and (min-width: 600px){
position: fixed;
background: rgba(255, 255, 255, 0.92); .artist-info {
font-family: "Bitstream Vera Sans",serif; margin: 0 1em;
position: fixed;
background: rgba(255, 255, 255, 0.92);
font-family: "Bitstream Vera Sans",serif;
}
.comment {
color: #727c84;
margin-bottom: 2em;
margin-top: 0;
min-width: 300px;
}
.tag-group {
max-width: 400px;
min-width: 300px;
}
.footer {
display: none;
}
#playing-large {
top: calc(100% - 30px);
left: calc(20px + 12em);
position: fixed;
pointer-events: none;
color: rgba(255, 23, 68, 0.69);
font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
}
#playing {
display: none;
}
} }
.comment { @media screen and (max-width: 601px) {
color: #727c84; .footer {
margin-bottom: 2em; padding: 0.5em;
margin-top: 0; height: 200px;
min-width: 300px; width: 100%;
} position: fixed;
background: white;
box-shadow: rgba(0,0,0,0.9) -3px 1px 10px;
top: calc(100% - 200px);
}
.tag-group { #playing-large {
max-width: 400px; display: none;
min-width: 300px; }
#playing {
top: calc(5px);
left: 5px;
width: calc(100% - 5px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
position: fixed;
pointer-events: none;
color: rgba(255, 23, 68, 0.69);
font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
}
.artist-info {
display: none;
}
} }
.el-tag { .el-tag {
@ -134,12 +214,4 @@ export default {
vertical-align: top; vertical-align: top;
} }
#playing {
position: fixed;
top: calc(100% - 30px);
left: calc(20px + 12em);
pointer-events: none;
color: rgba(255, 23, 68, 0.69);
font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
}
</style> </style>

7
music_graph/src/components/HelloWorld.vue → music_graph/src/components/MainPage.vue
View File

@ -12,7 +12,7 @@
:api="api" :api="api"
/> />
<canvas id="textMeasurementCanvas"></canvas> <canvas id="textMeasurementCanvas"></canvas>
<Watermark text="music-graph v1.0"/> <Watermark text="music-graph v1.1"/>
<LoadingIndicator :loading="loading"/> <LoadingIndicator :loading="loading"/>
</div> </div>
</template> </template>
@ -51,9 +51,10 @@ export default {
this.$notify({ this.$notify({
title: 'Welcome!', 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', type: 'info',
duration: 15 * 1000 duration: 45 * 1000,
offset: 100
}) })
} }
} }

27
music_graph/src/components/Watermark.vue
View File

@ -12,12 +12,25 @@ export default {
</script> </script>
<style scoped> <style scoped>
#watermark { @media screen and (min-width: 600px) {
position: fixed; #watermark {
top: calc(100% - 30px); position: fixed;
left: 20px; top: calc(100% - 30px);
pointer-events: none; left: 20px;
color: rgba(0,0,0,0.67); pointer-events: none;
font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace; color: rgba(0, 0, 0, 0.67);
font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
}
}
@media screen and (max-width: 601px) {
#watermark {
position: fixed;
top: calc(100% - 225px);
left: 10px;
pointer-events: none;
color: rgba(0, 0, 0, 0.67);
font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
}
} }
</style> </style>

6
music_graph/src/router/index.js
View File

@ -1,6 +1,6 @@
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld' import MainPage from '../components/MainPage'
import AboutPage from '../components/AboutPage' import AboutPage from '../components/AboutPage'
Vue.use(Router) Vue.use(Router)
@ -10,8 +10,8 @@ export default new Router({
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'HelloWorld', name: 'MainPage',
component: HelloWorld component: MainPage
}, },
{ {
path: '/about', path: '/about',