diff --git a/public/index.css b/public/index.css index b2fd839..720a46a 100644 --- a/public/index.css +++ b/public/index.css @@ -212,6 +212,8 @@ input { border-radius: 10px 10px 0px 0px; transition: 0.1s border-left ease-out, 0.1s background-color ease-in-out; height: 96px; + display: flex; + justify-content: space-between; } .small { font-size: medium; @@ -234,29 +236,34 @@ input { height: 100%; border-radius: 10px; transition: 0.1s border ease-out, 0.1s box-shadow ease-out; - margin: none; - padding: none; + width: 96px; + height: 96px; } .album-image-wrapper { transition: 0.1s border ease-out; - float: right; - max-height: 100%; - width: 96px; - padding: none; - margin: none; +} +.album-metadata { + display: flex; + flex-direction: column; + width: 100%; +} +.metadata { + height: 100%; } .link { cursor: pointer; transition: 0.1s color ease-out, 0.1s filter ease-out; } .album-download { - position: relative; - top: 20px; width: 32px; height: 32px; cursor: pointer; transition: 0.1s filter ease-out; } +.track .album-download { + position: relative; + top: 20px; +} .lds-ring { display: inline-block; position: relative; diff --git a/public/index.js b/public/index.js index ea84bab..c4c96d2 100644 --- a/public/index.js +++ b/public/index.js @@ -154,7 +154,23 @@ window.onload = () => { return; } document.getElementById('albums').innerHTML = d.data.map(d => - `
${d.title}
by ${d.artist.name}
` + ` +
+
+ + +
+
+ +
+
+ +
+ ` ).join('
'); if (d.data.length === 0) return document.getElementById('albums').innerHTML = 'Not found!'; @@ -180,7 +196,17 @@ window.onload = () => { } document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d => - `
${d.artist} - ${d.title} ${formatTime(d.duration)}
` + ` +
+ ${d.artist} - ${d.title} + + + + + ${formatTime(d.duration)} + +
+ ` ).join(''); for (track of document.getElementById('album-bottom-' + id).children) { let trackId = track.id.split('-')[1];