From d55610a3869167c8100ceec39f36334b5395de40 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Mon, 5 Apr 2021 16:03:13 -0300 Subject: reveal strings on info card art --- static/client.js | 25 +++++++++++++++++++++++-- static/site.css | 3 +++ 2 files changed, 26 insertions(+), 2 deletions(-) (limited to 'static') diff --git a/static/client.js b/static/client.js index a4fb8243..b79539e4 100644 --- a/static/client.js +++ b/static/client.js @@ -231,12 +231,33 @@ const infoCard = (() => { const albumLink = container.querySelector('.info-card-album a'); link(albumLink, 'album', data.links.album); - const img = container.querySelector('.info-card-art'); + const [ containerNoReveal, containerReveal ] = [ + container.querySelector('.info-card-art-container.no-reveal'), + container.querySelector('.info-card-art-container.reveal') + ]; + + const [ containerShow, containerHide ] = (data.cover.warnings.length + ? [containerReveal, containerNoReveal] + : [containerNoReveal, containerReveal]); + + containerHide.style.display = 'none'; + containerShow.style.display = 'block'; + + const img = containerShow.querySelector('.info-card-art'); img.src = rebase(data.cover.paths.small, 'rebaseMedia'); - const imgLink = container.querySelector('.info-card-art-container a'); + const imgLink = containerShow.querySelector('a'); colorLink(imgLink, data.color); imgLink.href = rebase(data.cover.paths.original, 'rebaseMedia'); + + if (containerShow === containerReveal) { + // TODO: List localiz8tion? + const cw = containerShow.querySelector('.info-card-art-warnings'); + cw.innerText = data.cover.warnings.join(', '); + + const reveal = containerShow.querySelector('.reveal'); + reveal.classList.remove('revealed'); + } }); } diff --git a/static/site.css b/static/site.css index 83bddd37..d8d20dcc 100644 --- a/static/site.css +++ b/static/site.css @@ -795,6 +795,9 @@ li > ul { width: 40%; margin: 5px; font-size: 0.8em; + + /* Dynamically shown. */ + display: none; } .info-card-art-container .image-container { -- cgit 1.3.0-6-gf8a5