diff options
| -rw-r--r-- | src/content/dependencies/generateContributionTooltipChronologySection.js | 46 | ||||
| -rw-r--r-- | src/static/css/site.css | 26 | ||||
| -rw-r--r-- | src/strings-default.yaml | 7 |
3 files changed, 57 insertions, 22 deletions
diff --git a/src/content/dependencies/generateContributionTooltipChronologySection.js b/src/content/dependencies/generateContributionTooltipChronologySection.js index 49e5d783..09f409f5 100644 --- a/src/content/dependencies/generateContributionTooltipChronologySection.js +++ b/src/content/dependencies/generateContributionTooltipChronologySection.js @@ -28,25 +28,41 @@ export default { : null), }), - generate: (relations, {html, language}) => - language.encapsulate('misc.artistLink.chronology', capsule => - html.tags([ - html.tag('span', {class: 'chronology-link'}, - {[html.onlyIfContent]: true}, + data: (query, _contribution) => ({ + previousName: + (query.previous + ? query.previous.thing.name + : null), - language.$(capsule, 'previous', { - [language.onlyIfOptions]: ['thing'], + nextName: + (query.next + ? query.next.thing.name + : null), + }), - thing: relations.previousLink, - })), + generate: (data, relations, {html, language}) => + language.encapsulate('misc.artistLink', 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-link'}, - {[html.onlyIfContent]: true}, + html.tag('span', {class: 'chronology-text'}, + language.sanitize(data.previousName)), + ], + }), - language.$(capsule, 'next', { - [language.onlyIfOptions]: ['thing'], + relations.nextLink?.slots({ + attributes: {class: 'chronology-link'}, + content: [ + html.tag('span', {class: 'chronology-symbol'}, + language.$(capsule, 'nextSymbol')), - thing: relations.nextLink, - })), + html.tag('span', {class: 'chronology-text'}, + language.sanitize(data.nextName)), + ], + }), ])), }; diff --git a/src/static/css/site.css b/src/static/css/site.css index da2b9374..35364fdf 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -973,10 +973,26 @@ li:not(:first-child:last-child) .tooltip, } .contribution-tooltip .chronology-link { + display: grid; grid-column-start: icon-start; grid-column-end: handle-end; - padding-left: 5px; - padding-right: 3px; + grid-template-columns: subgrid; + + height: 1.2em; +} + +.contribution-tooltip .chronology-symbol { + grid-column-start: icon-start; + grid-column-end: icon-end; + + text-align: center; +} + +.contribution-tooltip .chronology-text { + grid-column-start: handle-start; + grid-column-end: handle-end; + + padding-right: 6px; font-size: 0.85em; } @@ -1015,12 +1031,14 @@ li:not(:first-child:last-child) .tooltip, } } -.contribution-tooltip .external-link:hover { +.contribution-tooltip .external-link:hover, +.contribution-tooltip .chronology-link:hover { filter: brightness(1.4); text-decoration: none; } -.contribution-tooltip .external-link:hover .external-handle { +.contribution-tooltip .external-link:hover .external-handle, +.contribution-tooltip .chronology-link:hover .chronology-text { text-decoration: underline; } diff --git a/src/strings-default.yaml b/src/strings-default.yaml index 29aba553..8bbfb1af 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -480,9 +480,10 @@ misc: # isn't a specially detected web platform. noExternalLinkPlatformName: "Other" - chronology: - previous: "← {THING}" - next: "→ {THING}" + # Displayed in an artist's toolitp, as the symbol + # for chronology links. + previousSymbol: "←" + nextSymbol: "→" # chronology: # |