diff options
Diffstat (limited to 'src')
4 files changed, 52 insertions, 45 deletions
diff --git a/src/content/dependencies/generateContributionTooltip.js b/src/content/dependencies/generateContributionTooltip.js index c4df875c..67d6166e 100644 --- a/src/content/dependencies/generateContributionTooltip.js +++ b/src/content/dependencies/generateContributionTooltip.js @@ -28,8 +28,10 @@ export default { attributes: {class: ['icons', 'icons-tooltip']}, - contentAttributes: - {[html.joinChildren]: ''}, + contentAttributes: { + [html.joinChildren]: + html.tag('span', {class: 'tooltip-divider'}), + }, content: [ slots.showExternalLinks && diff --git a/src/content/dependencies/generateContributionTooltipChronologySection.js b/src/content/dependencies/generateContributionTooltipChronologySection.js index 85b19be9..49e5d783 100644 --- a/src/content/dependencies/generateContributionTooltipChronologySection.js +++ b/src/content/dependencies/generateContributionTooltipChronologySection.js @@ -29,23 +29,24 @@ export default { }), generate: (relations, {html, language}) => - language.encapsulate('misc.artistLink.chronology', capsule => [ - html.tag('span', {class: 'chronology-link'}, - {[html.onlyIfContent]: true}, + language.encapsulate('misc.artistLink.chronology', capsule => + html.tags([ + html.tag('span', {class: 'chronology-link'}, + {[html.onlyIfContent]: true}, - language.$(capsule, 'previous', { - [language.onlyIfOptions]: ['thing'], + language.$(capsule, 'previous', { + [language.onlyIfOptions]: ['thing'], - thing: relations.previousLink, - })), + thing: relations.previousLink, + })), - html.tag('span', {class: 'chronology-link'}, - {[html.onlyIfContent]: true}, + html.tag('span', {class: 'chronology-link'}, + {[html.onlyIfContent]: true}, - language.$(capsule, 'next', { - [language.onlyIfOptions]: ['thing'], + language.$(capsule, 'next', { + [language.onlyIfOptions]: ['thing'], - thing: relations.nextLink, - })), - ]), + thing: relations.nextLink, + })), + ])), }; diff --git a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js index 3a124412..2a2b760f 100644 --- a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js +++ b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js @@ -16,33 +16,34 @@ export default { generate: (data, relations, {html, language}) => language.encapsulate('misc.artistLink', capsule => - stitchArrays({ - icon: relations.artistIcons, - url: data.urls, - }).map(({icon, url}) => { - icon.setSlots({ - context: 'artist', - }); - - let platformText = - language.formatExternalLink(url, { + html.tags( + stitchArrays({ + icon: relations.artistIcons, + url: data.urls, + }).map(({icon, url}) => { + icon.setSlots({ context: 'artist', - style: 'platform', }); - // This is a pretty ridiculous hack, but we currently - // don't have a way of telling formatExternalLink to *not* - // use the fallback string, which just formats the URL as - // its host/domain... so is technically detectable. - if (platformText.toString() === (new URL(url)).host) { - platformText = - language.$(capsule, 'noExternalLinkPlatformName'); - } - - const platformSpan = - html.tag('span', {class: 'icon-platform'}, - platformText); - - return [icon, platformSpan]; - })), + let platformText = + language.formatExternalLink(url, { + context: 'artist', + style: 'platform', + }); + + // This is a pretty ridiculous hack, but we currently + // don't have a way of telling formatExternalLink to *not* + // use the fallback string, which just formats the URL as + // its host/domain... so is technically detectable. + if (platformText.toString() === (new URL(url)).host) { + platformText = + language.$(capsule, 'noExternalLinkPlatformName'); + } + + const platformSpan = + html.tag('span', {class: 'icon-platform'}, + platformText); + + return [icon, platformSpan]; + }))), }; diff --git a/src/static/css/site.css b/src/static/css/site.css index 84ed2ea7..321746ca 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -958,10 +958,13 @@ li:not(:first-child:last-child) .tooltip, font-size: 0.85em; } -.icons-tooltip .chronology-link:nth-child(1 of .chronology-link) { +.icons-tooltip .tooltip-divider { + grid-column-start: icon-start; + grid-column-end: domain-end; + border-top: 1px dotted var(--primary-color); - margin-top: 2px; - padding-top: 2px; + margin-top: 3px; + margin-bottom: 4px; } .icons-tooltip .icon-platform { |