Changed info displaying

src/views/Item.vue

@@ -12,16 +12,12 @@
     </b-row>
     <big-chungus-loader text="Fetching item info..." v-if="processing"/>
     <b-row v-else>
-      <b-col class="my-4">
+      <b-col class="my-4" cols="12" sm="8" md="6" lg="4">
         <div>
           <expandable-image :src="songInfo.cover_url" id="cover-art" :text="coverArtTitle"/>
         </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 class="my-3">
           <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.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: {
     capitalize(value) {
@@ -96,11 +108,6 @@ export default {
 <style scoped>
 #cover-art {
   max-width: 100%;
-  width: 25vh;
-}
-
-hr.info-separator {
   width: 30vh;
-  margin-left: 0;
 }
 </style>