mirror of
https://github.com/simon987/music-graph-ui.git
synced 2025-04-10 05:56:42 +00:00
Better mobile support
This commit is contained in:
parent
8c45a7f519
commit
43b6917ed3
@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta name="referrer" content="no-referrer">
|
||||
<title>music-graph v1.0</title>
|
||||
<title>music-graph v1.1</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -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))
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -29,7 +29,32 @@
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@ -98,23 +123,78 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.artist-info {
|
||||
margin: 0 1em;
|
||||
position: fixed;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
font-family: "Bitstream Vera Sans",serif;
|
||||
|
||||
@media screen and (min-width: 600px){
|
||||
|
||||
.artist-info {
|
||||
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 {
|
||||
color: #727c84;
|
||||
margin-bottom: 2em;
|
||||
margin-top: 0;
|
||||
min-width: 300px;
|
||||
}
|
||||
@media screen and (max-width: 601px) {
|
||||
.footer {
|
||||
padding: 0.5em;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background: white;
|
||||
box-shadow: rgba(0,0,0,0.9) -3px 1px 10px;
|
||||
top: calc(100% - 200px);
|
||||
}
|
||||
|
||||
.tag-group {
|
||||
max-width: 400px;
|
||||
min-width: 300px;
|
||||
#playing-large {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#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 {
|
||||
@ -134,12 +214,4 @@ export default {
|
||||
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>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
:api="api"
|
||||
/>
|
||||
<canvas id="textMeasurementCanvas"></canvas>
|
||||
<Watermark text="music-graph v1.0"/>
|
||||
<Watermark text="music-graph v1.1"/>
|
||||
<LoadingIndicator :loading="loading"/>
|
||||
</div>
|
||||
</template>
|
||||
@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -12,12 +12,25 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#watermark {
|
||||
position: fixed;
|
||||
top: calc(100% - 30px);
|
||||
left: 20px;
|
||||
pointer-events: none;
|
||||
color: rgba(0,0,0,0.67);
|
||||
font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
|
||||
@media screen and (min-width: 600px) {
|
||||
#watermark {
|
||||
position: fixed;
|
||||
top: calc(100% - 30px);
|
||||
left: 20px;
|
||||
pointer-events: none;
|
||||
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>
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user