From 685cbad73cab59210f7f8842e4399d0550f03905 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Mon, 13 May 2024 09:18:15 -0300 Subject: search, client: custom display for results w/ artwork warnings --- src/static/css/site.css | 14 +++++++++++--- src/static/js/client.js | 12 ++++++++++-- src/util/search-spec.js | 7 ++++++- 3 files changed, 27 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/static/css/site.css b/src/static/css/site.css index c7267b2f..766a4010 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -581,13 +581,17 @@ summary .group-name { display: inline-block; } +.wiki-search-result-image-container { + align-self: flex-start; + margin-right: 6px; + border-radius: 2px; + overflow: hidden; +} + .wiki-search-result-image, .wiki-search-result-image-placeholder { - align-self: flex-start; width: 1.8em; height: 1.8em; - margin-right: 6px; - border-radius: 2px; aspect-ratio: 1 / 1; } @@ -599,6 +603,10 @@ summary .group-name { display: none; } +.wiki-search-result-image.has-warning { + filter: blur(1px) brightness(0.8); +} + .wiki-search-end-search-line { text-align: center; margin-top: 6px; diff --git a/src/static/js/client.js b/src/static/js/client.js index bee82938..31e16aa2 100644 --- a/src/static/js/client.js +++ b/src/static/js/client.js @@ -3891,17 +3891,25 @@ function generateSidebarSearchResultTemplate(slots) { } } + const imgContainer = document.createElement('span'); + imgContainer.classList.add('wiki-search-result-image-container'); + if (slots.imageSource) { const img = document.createElement('img'); img.classList.add('wiki-search-result-image'); img.setAttribute('src', slots.imageSource); - link.appendChild(img); + imgContainer.appendChild(img); + if (slots.imageSource.endsWith('.mini.jpg')) { + img.classList.add('has-warning'); + } } else { const placeholder = document.createElement('span'); placeholder.classList.add('wiki-search-result-image-placeholder'); - link.appendChild(placeholder); + imgContainer.appendChild(placeholder); } + link.appendChild(imgContainer); + const text = document.createElement('span'); text.classList.add('wiki-search-result-text-area'); diff --git a/src/util/search-spec.js b/src/util/search-spec.js index 6c6ad221..e9e0a6f9 100644 --- a/src/util/search-spec.js +++ b/src/util/search-spec.js @@ -39,6 +39,9 @@ function prepareArtwork(thing, { getThumbnailEqualOrSmaller, urls, }) { + const hasWarnings = + thing.artTags?.some(artTag => artTag.isContentWarning); + const artworkPath = getArtworkPath(thing); @@ -56,7 +59,9 @@ function prepareArtwork(thing, { } const selectedSize = - getThumbnailEqualOrSmaller('adorb', mediaSrc); + getThumbnailEqualOrSmaller( + (hasWarnings ? 'mini' : 'adorb'), + mediaSrc); const mediaSrcJpeg = mediaSrc.replace(/\.(png|jpg)$/, `.${selectedSize}.jpg`); -- cgit 1.3.0-6-gf8a5