From f1c8bbf0f95a7f9ef52e041628e79a875b55aae4 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 26 Mar 2026 17:36:39 -0300 Subject: content, css: generateContentEntryDate: relative date --- src/common-util/wiki-data.js | 6 ++ .../dependencies/generateContentEntryDate.js | 100 ++++++++++++++++++--- src/static/css/features.css | 10 ++- src/static/css/tooltips.css | 34 ++++++- src/static/js/client/hoverable-tooltip.js | 4 + src/strings-default.yaml | 12 +++ 6 files changed, 146 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/common-util/wiki-data.js b/src/common-util/wiki-data.js index ae186065..00465668 100644 --- a/src/common-util/wiki-data.js +++ b/src/common-util/wiki-data.js @@ -641,5 +641,11 @@ export function sameDayAs(givenDate, thing) { } } + if (thing.isFlash) { + if (comapre(givenDate, thing.date)) { + return 'flash'; + } + } + return null; } diff --git a/src/content/dependencies/generateContentEntryDate.js b/src/content/dependencies/generateContentEntryDate.js index ca794314..845cb5ed 100644 --- a/src/content/dependencies/generateContentEntryDate.js +++ b/src/content/dependencies/generateContentEntryDate.js @@ -1,3 +1,5 @@ +import {sameDayAs} from '#wiki-data'; + export default { relations: (relation, _entry) => ({ textWithTooltip: @@ -8,19 +10,102 @@ export default { }), data: (entry) => ({ + isWikiEditorCommentary: entry.isWikiEditorCommentary, + date: entry.date, secondDate: entry.secondDate, dateKind: entry.dateKind, accessDate: entry.accessDate, accessKind: entry.accessKind, + + sameDayAs: + (entry.secondDate + ? null + : sameDayAs(entry.date, entry.thing)), + + thingDate: entry.thing.date, + + thingType: + (entry.thing.isAlbum && + entry.thing.style === 'single' + ? 'single' + + : entry.thing.isAlbum ? 'album' + + : entry.thing.isTrack && + entry.thing.date === entry.thing.album.date && + entry.thing.style === 'single' + ? 'single' + + : entry.thing.isTrack && + entry.thing.date === entry.thing.album.date + ? 'album' + + : entry.thing.isTrack ? 'track' + + : entry.thing.isFlash ? 'flash' + + : null), }), generate(data, relations, {html, language}) { const titleCapsule = language.encapsulate('misc.artistCommentary.entry.title'); + const dateCapsule = language.encapsulate(titleCapsule, 'date'); + const tooltip = relations.tooltip; + + tooltip.setSlots({ + attributes: {class: 'commentary-date-tooltip'}, + contentAttributes: [ + {[html.joinChildren]: html.tag('span', {class: 'cute-break'})}, + ], + + content: [ + data.sameDayAs === 'album' && + language.$(dateCapsule, 'sameDayAsAlbum'), + + data.sameDayAs === 'single' && + language.$(dateCapsule, 'sameDayAsSingle'), + + data.sameDayAs === 'track' && + language.$(dateCapsule, 'sameDayAsTrack'), + + data.sameDayAs === 'flash' && + language.$(dateCapsule, 'sameDayAsFlash'), + + data.sameDayAs === null && + data.date && + data.thingDate && + !data.secondDate && + !data.isWikiEditorCommentary && + html.tags([ + data.thingType && + html.tag('span', {class: 'relative-to'}, + language.$(dateCapsule, 'relativeTo', { + thing: + language.$(dateCapsule, 'relativeTo', data.thingType), + })), + + html.tag('br'), + + language.formatRelativeDate(data.date, data.thingDate, { + considerRoundingDays: true, + approximate: true, + absolute: false, + }), + ]), + + data.accessKind && + data.accessDate && + language.$(dateCapsule, data.accessKind, { + date: + language.formatDate(data.accessDate), + }), + ], + }); const willDisplayTooltip = - !!(data.accessKind && data.accessDate); + !html.isBlank(tooltip); const topAttributes = {class: 'commentary-date'}; @@ -36,7 +121,7 @@ export default { ] : topAttributes), - language.encapsulate(titleCapsule, 'date', workingCapsule => { + language.encapsulate(dateCapsule, workingCapsule => { const workingOptions = {}; if (!data.date) { @@ -75,16 +160,7 @@ export default { attributes: topAttributes, text: time, - tooltip: - relations.tooltip.slots({ - attributes: {class: 'commentary-date-tooltip'}, - - content: - language.$(titleCapsule, 'date', data.accessKind, { - date: - language.formatDate(data.accessDate), - }), - }), + tooltip: relations.tooltip, }); } else { return time; diff --git a/src/static/css/features.css b/src/static/css/features.css index c626aeda..44b7727e 100644 --- a/src/static/css/features.css +++ b/src/static/css/features.css @@ -407,10 +407,6 @@ .content-entry-heading { border-bottom: 1px solid var(--dim-color); } - - .content-entry-heading .hoverable { - box-shadow: 1px 2px 6px 5px #04040460; - } } @layer print { @@ -450,6 +446,12 @@ } } +@layer interaction { + .content-entry-heading .commentary-date .hoverable { + box-shadow: 1px 2px 6px 5px #04040460; + } +} + /* Content headings */ @layer layout { diff --git a/src/static/css/tooltips.css b/src/static/css/tooltips.css index f4f9416e..3666dfce 100644 --- a/src/static/css/tooltips.css +++ b/src/static/css/tooltips.css @@ -53,7 +53,8 @@ brightness(1.5) saturate(1.4) blur(4px); box-shadow: - 0 3px 4px 4px #000000aa, + 0 3px 6px 7px #0007, + 0 3px 4px 2px #0006, 0 -2px 4px -2px var(--primary-color) inset; text-indent: 0; @@ -91,7 +92,6 @@ @layer layout { .datetimestamp-tooltip, .missing-duration-tooltip, - .commentary-date-tooltip, .rerelease-tooltip, .first-release-tooltip, .other-release-tooltip, @@ -101,8 +101,7 @@ } .datetimestamp-tooltip .tooltip-content, - .missing-duration-tooltip .tooltip-content, - .commentary-date-tooltip .tooltip-content { + .missing-duration-tooltip .tooltip-content { padding: 5px 6px; white-space: nowrap; font-size: 0.9em; @@ -120,6 +119,33 @@ } } +/* Commentary date tooltip */ + +@layer layout { + .commentary-date-tooltip { + right: -10px; + padding: 3px 4px 2px 2px; + left: unset; + } + + .commentary-date-tooltip .tooltip-content { + padding: 2px 6px; + white-space: nowrap; + font-size: 0.9em; + } + + .commentary-date-tooltip span.cute-break { + margin-top: 3px; + margin-bottom: 3px; + } +} + +@layer print { + .commentary-date-tooltip .relative-to { + opacity: 0.8; + } +} + /* Contribution tooltip */ @layer interactivity { diff --git a/src/static/js/client/hoverable-tooltip.js b/src/static/js/client/hoverable-tooltip.js index 22b9471c..cdf37ee1 100644 --- a/src/static/js/client/hoverable-tooltip.js +++ b/src/static/js/client/hoverable-tooltip.js @@ -714,6 +714,8 @@ export function positionTooltip(tooltip, x, y) { cssProp(tooltip, { left: `${x - tooltipRect.x}px`, top: `${y - tooltipRect.y}px`, + right: 'unset', + bottom: 'unset', }); } @@ -721,6 +723,8 @@ export function resetDynamicTooltipPositioning(tooltip) { cssProp(tooltip, { left: null, top: null, + right: null, + bottom: null, }); } diff --git a/src/strings-default.yaml b/src/strings-default.yaml index 82909569..54741239 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -545,6 +545,18 @@ misc: date.sometime.range: "sometime {DATE_RANGE}" date.throughout.range: "throughout {DATE_RANGE}" + date.sameDayAsAlbum: "same date as this album" + date.sameDayAsSingle: "same date as this single" + date.sameDayAsTrack: "same date as this track" + date.sameDayAsFlash: "same date as this flash" + + date.relativeTo: + _: "with respect to {THING} —" + album: "this album" + single: "this single" + track: "this track" + flash: "this flash" + info: fromMainRelease: >- The following commentary is properly placed on this track's main release, {ALBUM}. -- cgit 1.3.0-6-gf8a5