onspot/onspot-frontend
onspot/onspot-frontend
2
0
Fork 0
Code Pull Requests Releases Activity

Changed info displaying

Browse Source
This commit is contained in:
Pünkösd Marcell 2020-11-27 00:49:21 +01:00
parent c321ee99c5
commit 04041dbc99
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/Item.vue
View File

@ -12,16 +12,12 @@
</b-row> </b-row>
<big-chungus-loader text="Fetching item info..." v-if="processing"/> <big-chungus-loader text="Fetching item info..." v-if="processing"/>
<b-row v-else> <b-row v-else>
<b-col class="my-4"> <b-col class="my-4" cols="12" sm="8" md="6" lg="4">
<div> <div>
<expandable-image :src="songInfo.cover_url" id="cover-art" :text="coverArtTitle"/> <expandable-image :src="songInfo.cover_url" id="cover-art" :text="coverArtTitle"/>
</div> </div>
<div class="my-3"> <div class="my-3" id="info-holder">
<p><b>Artist:</b> {{ songInfo.artist }} </p> <b-table stacked borderless :items="songInfoToDisplay"></b-table>
<hr class="info-separator">
<p><b>Album:</b> {{ songInfo.album }}</p>
<hr class="info-separator">
<p><b>Title:</b> {{ songInfo.title }}</p>
</div> </div>
<div class="my-3"> <div class="my-3">
<b-button :disabled="!songInfo.spotify_id" :href="spotifyLink" target="_blank">Open on Spotify!</b-button>&nbsp; <b-button :disabled="!songInfo.spotify_id" :href="spotifyLink" target="_blank">Open on Spotify!</b-button>&nbsp;
@ -81,7 +77,23 @@ export default {
return this.songInfo.artist + ' - ' + this.songInfo.album; return this.songInfo.artist + ' - ' + this.songInfo.album;
} }
return this.songInfo.album || this.songInfo.artist || this.songInfo.title; return this.songInfo.album || this.songInfo.artist || this.songInfo.title;
},
songInfoToDisplay() {
let displayData = {}
// Faszomat már a javascriptbe
if (this.songInfo.artist) {
displayData.artist = this.songInfo.artist;
}
if (this.songInfo.album) {
displayData.album = this.songInfo.album;
}
if (this.songInfo.title) {
displayData.title = this.songInfo.title;
}
return [displayData]
} }
}, },
filters: { filters: {
capitalize(value) { capitalize(value) {
@ -96,11 +108,6 @@ export default {
<style scoped> <style scoped>
#cover-art { #cover-art {
max-width: 100%; max-width: 100%;
width: 25vh;
}
hr.info-separator {
width: 30vh; width: 30vh;
margin-left: 0;
} }
</style> </style>