content, css: chronology links subgrid

1 files changed, 31 insertions, 15 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)),
+          ],
+        }),
       ])),
 };