cover art in info card

2 files changed, 25 insertions, 2 deletions

diff --git a/static/client.js b/static/client.js
index aae09193..60bf62b4 100644
--- a/static/client.js
+++ b/static/client.js
@@ -78,7 +78,7 @@ function getFlashListAndIndex() {
 
 // TODO: This should also use urlSpec.
 function fetchData(type, directory) {
-    return fetch(rebase(`data/${type}/${directory}/data.json`, 'rebaseData'))
+    return fetch(rebase(`${type}/${directory}/data.json`, 'rebaseData'))
         .then(res => res.json());
 }
 
@@ -225,6 +225,9 @@ const infoCard = (() => {
 
             const albumLink = container.querySelector('.info-card-album a');
             link(albumLink, 'album', data.links.album);
+
+            const img = container.querySelector('.info-card-art');
+            img.src = rebase(data.cover.path, 'rebaseMedia');
         });
     }
 
diff --git a/static/site.css b/static/site.css
index e13ec106..59f13c5c 100644
--- a/static/site.css
+++ b/static/site.css
@@ -752,7 +752,9 @@ li > ul {
 }
 
 .info-card {
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: black;
+    color: white;
+
     border: 1px dotted var(--primary-color);
     border-radius: 3px;
     box-shadow: 0 5px 5px black;
@@ -773,6 +775,24 @@ li > ul {
     }
 }
 
+.info-card-art-container {
+    float: right;
+
+    width: 40%;
+    margin: 5px;
+    font-size: 0.8em;
+}
+
+.info-card-art-container .image-container {
+    padding: 2px;
+}
+
+.info-card-art {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
 .info-card-name {
     font-size: 1em;
     border-bottom: 1px dotted;