diff options
| -rw-r--r-- | src/content/dependencies/generateCoverArtwork.js | 14 | ||||
| -rw-r--r-- | src/static/client3.js | 28 | ||||
| -rw-r--r-- | src/static/site6.css | 31 | ||||
| -rw-r--r-- | src/strings-default.yaml | 2 |
4 files changed, 62 insertions, 13 deletions
diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js index a830d121..d198f338 100644 --- a/src/content/dependencies/generateCoverArtwork.js +++ b/src/content/dependencies/generateCoverArtwork.js @@ -57,14 +57,12 @@ export default { }), !empty(relations.tagLinks) && - html.tag('p', - language.$('releaseInfo.artTags.inline', { - tags: - language.formatUnitList( - relations.tagLinks - .map(tagLink => tagLink.slot('preferShortName', true))), - })), - ]); + html.tag('ul', {class: 'image-details'}, + relations.tagLinks + .map(tagLink => + html.tag('li', + tagLink.slot('preferShortName', true)))), + ]); case 'thumbnail': return relations.image.slots({ diff --git a/src/static/client3.js b/src/static/client3.js index 4dab19d1..77999488 100644 --- a/src/static/client3.js +++ b/src/static/client3.js @@ -145,6 +145,34 @@ function dispatchInternalEvent(event, eventName, ...args) { return results; } +// CSS compatibility-assistant ---------------------------- + +const cssCompatibilityAssistantInfo = clientInfo.cssCompatibilityAssistantInfo = { + coverArtContainer: null, + coverArtImageDetails: null, +}; + +function getCSSCompatibilityAssistantInfoReferences() { + const info = cssCompatibilityAssistantInfo; + + info.coverArtContainer = + document.getElementById('cover-art-container'); + + info.coverArtImageDetails = + info.coverArtContainer?.querySelector('.image-details'); +} + +function mutateCSSCompatibilityContent() { + const info = cssCompatibilityAssistantInfo; + + if (info.coverArtImageDetails) { + info.coverArtContainer.classList.add('has-image-details'); + } +} + +clientSteps.getPageReferences.push(getCSSCompatibilityAssistantInfoReferences); +clientSteps.mutatePageContent.push(mutateCSSCompatibilityContent); + // JS-based links ----------------------------------------- const scriptedLinkInfo = initInfo('scriptedLinkInfo', { diff --git a/src/static/site6.css b/src/static/site6.css index bf9bc2cc..0f5a8f59 100644 --- a/src/static/site6.css +++ b/src/static/site6.css @@ -635,10 +635,13 @@ p .current { #cover-art-container { font-size: 0.8em; + box-shadow: 0 3px 3px 6px rgba(0, 0, 0, 0.35); } -#cover-art .square { - box-shadow: 0 0 3px 6px rgba(0, 0, 0, 0.35); +#cover-art-container:has(.image-details), +#cover-art-container.has-image-details { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } #cover-art img { @@ -647,8 +650,28 @@ p .current { height: 100%; } -#cover-art-container p { - margin-top: 5px; +.image-details { + display: block; + + padding: 6px 9px 4px 9px; + margin-top: 0; + margin-bottom: 0; + background: var(--bg-black-color); + border: 2px solid var(--primary-color); + border-top: 0; + border-radius: 0 0 4px 4px; + + -webkit-backdrop-filter: blur(3px); + backdrop-filter: blur(3px); +} + +ul.image-details li { + display: inline-block; + margin: 0; +} + +#cover-art-container ul li:not(:last-child)::after { + content: " \00b7 "; } .commentary-entry-heading { diff --git a/src/strings-default.yaml b/src/strings-default.yaml index f976ac8d..0ef1812c 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -288,7 +288,7 @@ releaseInfo: artTags: _: "Tags:" - inline: "Tags: {TAGS}" + inline: "{TAGS}" # Actions |