content, css: generateContentEntryDate: relative date

6 files changed, 146 insertions, 20 deletions

diff --git a/src/common-util/wiki-data.js b/src/common-util/wiki-data.js
index ae186065..00465668 100644
--- a/src/common-util/wiki-data.js
+++ b/src/common-util/wiki-data.js
@@ -641,5 +641,11 @@ export function sameDayAs(givenDate, thing) {
     }
   }
 
+  if (thing.isFlash) {
+    if (comapre(givenDate, thing.date)) {
+      return 'flash';
+    }
+  }
+
   return null;
 }
diff --git a/src/content/dependencies/generateContentEntryDate.js b/src/content/dependencies/generateContentEntryDate.js
index ca794314..845cb5ed 100644
--- a/src/content/dependencies/generateContentEntryDate.js
+++ b/src/content/dependencies/generateContentEntryDate.js
@@ -1,3 +1,5 @@
+import {sameDayAs} from '#wiki-data';
+
 export default {
   relations: (relation, _entry) => ({
     textWithTooltip:
@@ -8,19 +10,102 @@ export default {
   }),
 
   data: (entry) => ({
+    isWikiEditorCommentary: entry.isWikiEditorCommentary,
+
     date: entry.date,
     secondDate: entry.secondDate,
     dateKind: entry.dateKind,
 
     accessDate: entry.accessDate,
     accessKind: entry.accessKind,
+
+    sameDayAs:
+      (entry.secondDate
+        ? null
+        : sameDayAs(entry.date, entry.thing)),
+
+    thingDate: entry.thing.date,
+
+    thingType:
+      (entry.thing.isAlbum &&
+       entry.thing.style === 'single'
+        ? 'single'
+
+     : entry.thing.isAlbum ? 'album'
+
+     : entry.thing.isTrack &&
+       entry.thing.date === entry.thing.album.date &&
+       entry.thing.style === 'single'
+        ? 'single'
+
+     : entry.thing.isTrack &&
+       entry.thing.date === entry.thing.album.date
+        ? 'album'
+
+     : entry.thing.isTrack ? 'track'
+
+     : entry.thing.isFlash ? 'flash'
+
+     : null),
   }),
 
   generate(data, relations, {html, language}) {
     const titleCapsule = language.encapsulate('misc.artistCommentary.entry.title');
+    const dateCapsule = language.encapsulate(titleCapsule, 'date');
+    const tooltip = relations.tooltip;
+
+    tooltip.setSlots({
+      attributes: {class: 'commentary-date-tooltip'},
+      contentAttributes: [
+        {[html.joinChildren]: html.tag('span', {class: 'cute-break'})},
+      ],
+
+      content: [
+        data.sameDayAs === 'album' &&
+          language.$(dateCapsule, 'sameDayAsAlbum'),
+
+        data.sameDayAs === 'single' &&
+          language.$(dateCapsule, 'sameDayAsSingle'),
+
+        data.sameDayAs === 'track' &&
+          language.$(dateCapsule, 'sameDayAsTrack'),
+
+        data.sameDayAs === 'flash' &&
+          language.$(dateCapsule, 'sameDayAsFlash'),
+
+        data.sameDayAs === null &&
+        data.date &&
+        data.thingDate &&
+        !data.secondDate &&
+        !data.isWikiEditorCommentary &&
+          html.tags([
+            data.thingType &&
+              html.tag('span', {class: 'relative-to'},
+                language.$(dateCapsule, 'relativeTo', {
+                  thing:
+                    language.$(dateCapsule, 'relativeTo', data.thingType),
+                })),
+
+            html.tag('br'),
+
+            language.formatRelativeDate(data.date, data.thingDate, {
+              considerRoundingDays: true,
+              approximate: true,
+              absolute: false,
+            }),
+          ]),
+
+        data.accessKind &&
+        data.accessDate &&
+          language.$(dateCapsule, data.accessKind, {
+            date:
+              language.formatDate(data.accessDate),
+          }),
+      ],
+    });
 
     const willDisplayTooltip =
-      !!(data.accessKind && data.accessDate);
+      !html.isBlank(tooltip);
 
     const topAttributes =
       {class: 'commentary-date'};
@@ -36,7 +121,7 @@ export default {
             ]
           : topAttributes),
 
-        language.encapsulate(titleCapsule, 'date', workingCapsule => {
+        language.encapsulate(dateCapsule, workingCapsule => {
           const workingOptions = {};
 
           if (!data.date) {
@@ -75,16 +160,7 @@ export default {
         attributes: topAttributes,
         text: time,
 
-        tooltip:
-          relations.tooltip.slots({
-            attributes: {class: 'commentary-date-tooltip'},
-
-            content:
-              language.$(titleCapsule, 'date', data.accessKind, {
-                date:
-                  language.formatDate(data.accessDate),
-              }),
-          }),
+        tooltip: relations.tooltip,
       });
     } else {
       return time;
diff --git a/src/static/css/features.css b/src/static/css/features.css
index c626aeda..44b7727e 100644
--- a/src/static/css/features.css
+++ b/src/static/css/features.css
@@ -407,10 +407,6 @@
   .content-entry-heading {
     border-bottom: 1px solid var(--dim-color);
   }
-
-  .content-entry-heading .hoverable {
-    box-shadow: 1px 2px 6px 5px #04040460;
-  }
 }
 
 @layer print {
@@ -450,6 +446,12 @@
   }
 }
 
+@layer interaction {
+  .content-entry-heading .commentary-date .hoverable {
+    box-shadow: 1px 2px 6px 5px #04040460;
+  }
+}
+
 /* Content headings */
 
 @layer layout {
diff --git a/src/static/css/tooltips.css b/src/static/css/tooltips.css
index f4f9416e..3666dfce 100644
--- a/src/static/css/tooltips.css
+++ b/src/static/css/tooltips.css
@@ -53,7 +53,8 @@
       brightness(1.5) saturate(1.4) blur(4px);
 
     box-shadow:
-      0 3px 4px 4px #000000aa,
+      0 3px 6px 7px #0007,
+      0 3px 4px 2px #0006,
       0 -2px 4px -2px var(--primary-color) inset;
 
     text-indent: 0;
@@ -91,7 +92,6 @@
 @layer layout {
   .datetimestamp-tooltip,
   .missing-duration-tooltip,
-  .commentary-date-tooltip,
   .rerelease-tooltip,
   .first-release-tooltip,
   .other-release-tooltip,
@@ -101,8 +101,7 @@
   }
 
   .datetimestamp-tooltip .tooltip-content,
-  .missing-duration-tooltip .tooltip-content,
-  .commentary-date-tooltip .tooltip-content {
+  .missing-duration-tooltip .tooltip-content {
     padding: 5px 6px;
     white-space: nowrap;
     font-size: 0.9em;
@@ -120,6 +119,33 @@
   }
 }
 
+/* Commentary date tooltip */
+
+@layer layout {
+  .commentary-date-tooltip {
+    right: -10px;
+    padding: 3px 4px 2px 2px;
+    left: unset;
+  }
+
+  .commentary-date-tooltip .tooltip-content {
+    padding: 2px 6px;
+    white-space: nowrap;
+    font-size: 0.9em;
+  }
+
+  .commentary-date-tooltip span.cute-break {
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
+}
+
+@layer print {
+  .commentary-date-tooltip .relative-to {
+    opacity: 0.8;
+  }
+}
+
 /* Contribution tooltip */
 
 @layer interactivity {
diff --git a/src/static/js/client/hoverable-tooltip.js b/src/static/js/client/hoverable-tooltip.js
index 22b9471c..cdf37ee1 100644
--- a/src/static/js/client/hoverable-tooltip.js
+++ b/src/static/js/client/hoverable-tooltip.js
@@ -714,6 +714,8 @@ export function positionTooltip(tooltip, x, y) {
   cssProp(tooltip, {
     left: `${x - tooltipRect.x}px`,
     top: `${y - tooltipRect.y}px`,
+    right: 'unset',
+    bottom: 'unset',
   });
 }
 
@@ -721,6 +723,8 @@ export function resetDynamicTooltipPositioning(tooltip) {
   cssProp(tooltip, {
     left: null,
     top: null,
+    right: null,
+    bottom: null,
   });
 }
 
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 82909569..54741239 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -545,6 +545,18 @@ misc:
         date.sometime.range: "sometime {DATE_RANGE}"
         date.throughout.range: "throughout {DATE_RANGE}"
 
+        date.sameDayAsAlbum: "same date as this album"
+        date.sameDayAsSingle: "same date as this single"
+        date.sameDayAsTrack: "same date as this track"
+        date.sameDayAsFlash: "same date as this flash"
+
+        date.relativeTo:
+          _: "with respect to {THING} —"
+          album: "this album"
+          single: "this single"
+          track: "this track"
+          flash: "this flash"
+
     info:
       fromMainRelease: >-
         The following commentary is properly placed on this track's main release, {ALBUM}.