diff options
| -rw-r--r-- | static/client.js | 5 | ||||
| -rw-r--r-- | static/site.css | 22 | ||||
| -rwxr-xr-x | upd8.js | 14 |
3 files changed, 39 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; diff --git a/upd8.js b/upd8.js index d34db5b6..cfddf581 100755 --- a/upd8.js +++ b/upd8.js @@ -2037,6 +2037,7 @@ function img({ thumb: thumbKey = '', reveal = '', id = '', + class: className = '', width = '', height = '', link = false, @@ -2051,6 +2052,7 @@ function img({ const imgAttributes = attributes({ id: link ? '' : id, + class: className, alt, width, height @@ -2396,6 +2398,13 @@ writePage.html = (pageFn, {paths, strings, to}) => { const infoCardHTML = fixWS` <div id="info-card-container"> <div class="info-card"> + <div class="info-card-art-container"> + ${img({ + class: 'info-card-art', + src: '', + square: true + })} + </div> <h1 class="info-card-name"><a></a></h1> <p class="info-card-album">${strings('releaseInfo.from', {album: '<a></a>'})}</p> </div> @@ -3091,6 +3100,11 @@ function writeTrackPage(track) { date: track.date, duration: track.duration, color: track.color, + cover: { + path: getTrackCover(track, { + to: urls.from('media.root').to + }) + }, links: { artists: serializeContribs(track.artists), contributors: serializeContribs(track.contributors), |