content, css: chronology link info

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:
   #