From 29f4c5b571e960e6410f1555324a2d909bda8b2f Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <qznebula@protonmail.com>
Date: Tue, 18 Jun 2024 11:14:49 -0300
Subject: content, css: chronology links subgrid

---
 ...generateContributionTooltipChronologySection.js | 46 +++++++++++++++-------
 src/static/css/site.css                            | 26 ++++++++++--
 src/strings-default.yaml                           |  7 ++--
 3 files changed, 57 insertions(+), 22 deletions(-)

(limited to 'src')

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:
   #
-- 
cgit 1.3.0-6-gf8a5