Updated design for Spotify info API data while editing song

frontend/components/Modals/EditSong.vue

@@ -97,7 +97,7 @@
 					<input class='input' type='text' v-model='editing.song.skipDuration'>
 				</p>
 				<hr>
-				<h5 class='has-text-centered'>Spotify info</h5>
+				<h5 class='has-text-centered'>Spotify Information</h5>
 				<label class='label'>Song title</label>
 				<p class='control'>
 					<input class='input' type='text' v-model='spotify.title'>
@@ -109,24 +109,25 @@
 				<button class='button is-success' @click='getSpotifySongs()'>
 					Get Spotify songs
 				</button>
-				<hr v-if="spotify.songs.length > 0">
-				<h5 class='has-text-centered' v-if="spotify.songs.length > 0">Spotify results</h5>
-				<div v-for='song in spotify.songs'>
-					<p><b>Title:</b> {{song.title}}</p>
-					<p>
-						<b>Artists:</b>
-						<ul>
-							<li v-for='artist in song.artists'>{{artist}}</li>
-						</ul>
-					</p>
-					<p><b>Duration:</b> {{song.duration}}</p>
-					<p><b>Explicit:</b> {{song.explicit}}</p>
-					<p>
-						<b>Thumbnail:</b> {{song.thumbnail}}
-						<img :src='song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
-					</p>
-					<hr>
-				</div>
+				<hr />
+				<article class="media" v-for='song in spotify.songs'>
+					<figure class="media-left">
+						<p class="image is-64x64">
+							<img :src="song.thumbnail" onerror="this.src='/assets/notes-transparent.png'">
+						</p>
+					</figure>
+					<div class="media-content">
+						<div class="content">
+							<p>
+								<strong>{{song.title}}</strong>
+								<br />
+								<small>Artists: {{song.artists}}</small>, <small>Duration: {{song.duration}}</small>, <small>Explicit: {{song.explicit}}</small>
+								<br />
+								<small>Thumbnail: {{song.thumbnail}}</small>
+							</p>
+						</div>
+					</div>
+				</article>
 			</div>
 			<div slot='footer'>
 				<button class='button is-success' @click='save(editing.song, false)'>