From 7a10bac9cb001753467a6e66f2698125ac4c03e7 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 18 Jun 2024 11:27:29 -0300 Subject: content, css: chronology link info --- ...generateContributionTooltipChronologySection.js | 92 ++++++++++++++++------ src/static/css/site.css | 44 +++++------ src/strings-default.yaml | 23 +++++- 3 files changed, 110 insertions(+), 49 deletions(-) diff --git a/src/content/dependencies/generateContributionTooltipChronologySection.js b/src/content/dependencies/generateContributionTooltipChronologySection.js index 09f409f5..5803b406 100644 --- a/src/content/dependencies/generateContributionTooltipChronologySection.js +++ b/src/content/dependencies/generateContributionTooltipChronologySection.js @@ -40,29 +40,75 @@ export default { : null), }), - generate: (data, relations, {html, language}) => - language.encapsulate('misc.artistLink', capsule => + slots: { + kind: { + validate: v => + v.is( + 'album', + 'coverArt', + 'flash', + 'track', + 'trackArt'), + }, + }, + + generate: (data, relations, slots, {html, language}) => + language.encapsulate('misc.artistLink.chronology', capsule => html.tags([ - relations.previousLink?.slots({ - attributes: {class: 'chronology-link'}, - content: [ - html.tag('span', {class: 'chronology-symbol'}, - language.$(capsule, 'previousSymbol')), - - html.tag('span', {class: 'chronology-text'}, - language.sanitize(data.previousName)), - ], - }), - - relations.nextLink?.slots({ - attributes: {class: 'chronology-link'}, - content: [ - html.tag('span', {class: 'chronology-symbol'}, - language.$(capsule, 'nextSymbol')), - - html.tag('span', {class: 'chronology-text'}, - language.sanitize(data.nextName)), - ], - }), + html.tags([ + relations.previousLink?.slots({ + attributes: {class: 'chronology-link'}, + content: [ + html.tag('span', {class: 'chronology-symbol'}, + language.$(capsule, 'previous.symbol')), + + html.tag('span', {class: 'chronology-text'}, + language.sanitize(data.previousName)), + ], + }), + + html.tag('span', {class: 'chronology-info'}, + {[html.onlyIfSiblings]: true}, + + language.encapsulate(capsule, 'previous.info', workingCapsule => { + const workingOptions = {}; + + if (slots.kind) { + workingCapsule += '.withKind'; + workingOptions.kind = + language.$(capsule, 'kind', slots.kind); + } + + return language.$(workingCapsule, workingOptions); + })), + ]), + + html.tags([ + relations.nextLink?.slots({ + attributes: {class: 'chronology-link'}, + content: [ + html.tag('span', {class: 'chronology-symbol'}, + language.$(capsule, 'next.symbol')), + + html.tag('span', {class: 'chronology-text'}, + language.sanitize(data.nextName)), + ], + }), + + html.tag('span', {class: 'chronology-info'}, + {[html.onlyIfSiblings]: true}, + + language.encapsulate(capsule, 'next.info', workingCapsule => { + const workingOptions = {}; + + if (slots.kind) { + workingCapsule += '.withKind'; + workingOptions.kind = + language.$(capsule, 'kind', slots.kind); + } + + return language.$(workingCapsule, workingOptions); + })) + ]), ])), }; diff --git a/src/static/css/site.css b/src/static/css/site.css index 35364fdf..ddd285b9 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -954,24 +954,6 @@ li:not(:first-child:last-child) .tooltip, height: 1.4em; } -.contribution-tooltip .external-icon { - grid-column-start: icon-start; - grid-column-end: icon-end; -} - -.contribution-tooltip .external-icon svg { - width: 18px; - height: 18px; - top: -0.1em; -} - -.contribution-tooltip .external-handle { - grid-column-start: handle-start; - grid-column-end: handle-end; - - padding-right: 8px; -} - .contribution-tooltip .chronology-link { display: grid; grid-column-start: icon-start; @@ -981,18 +963,33 @@ li:not(:first-child:last-child) .tooltip, height: 1.2em; } +.contribution-tooltip .external-icon, .contribution-tooltip .chronology-symbol { grid-column-start: icon-start; grid-column-end: icon-end; +} + +.contribution-tooltip .external-icon svg { + width: 18px; + height: 18px; + top: -0.1em; +} +.contribution-tooltip .chronology-symbol { text-align: center; } +.contribution-tooltip .external-handle, .contribution-tooltip .chronology-text { grid-column-start: handle-start; grid-column-end: handle-end; - padding-right: 6px; + padding-right: 8px; +} + + +.contribution-tooltip .chronology-text, +.contribution-tooltip .chronology-info { font-size: 0.85em; } @@ -1005,7 +1002,8 @@ li:not(:first-child:last-child) .tooltip, margin-bottom: 4px; } -.contribution-tooltip .external-platform { +.contribution-tooltip .external-platform, +.contribution-tooltip .chronology-info { display: none; grid-column-start: platform-start; @@ -1016,7 +1014,8 @@ li:not(:first-child:last-child) .tooltip, opacity: 0.8; } -.contribution-tooltip.show-info .external-platform { +.contribution-tooltip.show-info .external-platform, +.contribution-tooltip.show-info .chronology-info { display: inline; animation: external-platform 0.2s forwards linear; } @@ -1042,7 +1041,8 @@ li:not(:first-child:last-child) .tooltip, text-decoration: underline; } -.contribution-tooltip .external-link:hover + .external-platform { +.contribution-tooltip .external-link:hover + .external-platform, +.contribution-tooltip .chronology-link:hover + .chronology-info { --external-platform-opacity: 1; text-decoration: underline; text-decoration-color: #ffffffaa; diff --git a/src/strings-default.yaml b/src/strings-default.yaml index 8bbfb1af..63d981df 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -480,10 +480,25 @@ misc: # isn't a specially detected web platform. noExternalLinkPlatformName: "Other" - # Displayed in an artist's toolitp, as the symbol - # for chronology links. - previousSymbol: "←" - nextSymbol: "→" + chronology: + previous: + symbol: "←" + info: + _: "Previous by this artist" + withKind: "Previous {KIND} by this artist" + + next: + symbol: "→" + info: + _: "Next by this artist" + withKind: "Next {KIND} by this artist" + + kind: + album: "album" + coverArt: "cover art" + flash: "flash" + track: "track" + trackArt: "track art" # chronology: # -- cgit 1.3.0-6-gf8a5