Timeformat: Prevent line break in relative time segment (#1110)

Co-authored-by: April Sylph <[email protected]>
AprilSylph · Dec 7, 2023 · a89eaa2 · a89eaa2
1 parent 70a428c
commit a89eaa2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/scripts/timeformat.css b/src/scripts/timeformat.css
@@ -2,11 +2,18 @@
   font-size: 0px;
 }
 
-[data-formatted-time]::after {
+[data-formatted-time]::before {
   content: attr(data-formatted-time);
   font-size: .78125rem;
 }
 
+[data-formatted-relative-time]::after {
+  content: attr(data-formatted-relative-time);
+  font-size: .78125rem;
+  display: inline-block;
+}
+
+[data-formatted-time][title]::before,
 [data-formatted-time][title]::after {
   cursor: help;
 }
diff --git a/src/scripts/timeformat.js b/src/scripts/timeformat.js
@@ -36,7 +36,10 @@ const formatTimeElements = function (timeElements) {
   timeElements.forEach(timeElement => {
     const momentDate = moment(timeElement.dateTime, moment.ISO_8601);
     timeElement.dataset.formattedTime = momentDate.format(format);
-    if (displayRelative) timeElement.dataset.formattedTime += `\u2002\u00B7\u2002${constructRelativeTimeString(momentDate.unix())}`;
+    if (displayRelative) {
+      timeElement.dataset.formattedTime += '\u2002\u00B7\u2002';
+      timeElement.dataset.formattedRelativeTime = constructRelativeTimeString(momentDate.unix());
+    }
   });
 };
 
@@ -48,6 +51,7 @@ export const main = async function () {
 export const clean = async function () {
   pageModifications.unregister(formatTimeElements);
   $('[data-formatted-time]').removeAttr('data-formatted-time');
+  $('[data-formatted-relative-time]').removeAttr('data-formatted-relative-time');
 };
 
 export const stylesheet = true;