content, css: commentary entry date hierarchy improvements

Avoid unnecessarily embedding under a text-with-tooltip, and don't
set the cue class if it's not applicable.

1 files changed, 60 insertions, 45 deletions

diff --git a/src/content/dependencies/generateCommentaryEntryDate.js b/src/content/dependencies/generateCommentaryEntryDate.js
index 628bf22f..f1cf5cb3 100644
--- a/src/content/dependencies/generateCommentaryEntryDate.js
+++ b/src/content/dependencies/generateCommentaryEntryDate.js
@@ -19,60 +19,75 @@ export default {
     accessKind: entry.accessKind,
   }),
 
-  generate: (data, relations, {html, language}) =>
-    language.encapsulate('misc.artistCommentary.entry.title', titleCapsule =>
-      relations.textWithTooltip.slots({
-        attributes: {class: 'commentary-date'},
+  generate(data, relations, {html, language}) {
+    const titleCapsule = language.encapsulate('misc.artistCommentary.entry.title');
 
-        customInteractionCue: true,
+    const willDisplayTooltip =
+      !!(data.accessKind && data.accessDate);
+
+    const topAttributes =
+      {class: 'commentary-date'};
+
+    const time =
+      html.tag('time',
+        {[html.onlyIfContent]: true},
 
-        text:
-          html.tag('time',
-            {class: 'text-with-tooltip-interaction-cue'},
-            {[html.onlyIfContent]: true},
+        (willDisplayTooltip
+          ? {class: 'text-with-tooltip-interaction-cue'}
+          : topAttributes),
 
-            language.encapsulate(titleCapsule, 'date', workingCapsule => {
-              const workingOptions = {};
+        language.encapsulate(titleCapsule, 'date', workingCapsule => {
+          const workingOptions = {};
 
-              if (!data.date) {
-                return html.blank();
-              }
+          if (!data.date) {
+            return html.blank();
+          }
 
-              const rangeNeeded =
-                data.dateKind === 'sometime' ||
-                data.dateKind === 'throughout';
+          const rangeNeeded =
+            data.dateKind === 'sometime' ||
+            data.dateKind === 'throughout';
 
-              if (rangeNeeded && !data.secondDate) {
-                workingOptions.date = language.formatDate(data.date);
-                return language.$(workingCapsule, workingOptions);
-              }
+          if (rangeNeeded && !data.secondDate) {
+            workingOptions.date = language.formatDate(data.date);
+            return language.$(workingCapsule, workingOptions);
+          }
 
-              if (data.dateKind) {
-                workingCapsule += '.' + data.dateKind;
-              }
+          if (data.dateKind) {
+            workingCapsule += '.' + data.dateKind;
+          }
 
-              if (data.secondDate) {
-                workingCapsule += '.range';
-                workingOptions.dateRange =
-                  language.formatDateRange(data.date, data.secondDate);
-              } else {
-                workingOptions.date =
-                  language.formatDate(data.date);
-              }
+          if (data.secondDate) {
+            workingCapsule += '.range';
+            workingOptions.dateRange =
+              language.formatDateRange(data.date, data.secondDate);
+          } else {
+            workingOptions.date =
+              language.formatDate(data.date);
+          }
+
+          return language.$(workingCapsule, workingOptions);
+        }));
+
+    if (willDisplayTooltip) {
+      return relations.textWithTooltip.slots({
+        customInteractionCue: true,
 
-              return language.$(workingCapsule, workingOptions);
-            })),
+        attributes: topAttributes,
+        text: time,
 
         tooltip:
-          data.accessKind &&
-            relations.tooltip.slots({
-              attributes: {class: 'commentary-date-tooltip'},
-
-              content:
-                language.$(titleCapsule, 'date', data.accessKind, {
-                  date:
-                    language.formatDate(data.accessDate),
-                }),
-            }),
-      })),
+          relations.tooltip.slots({
+            attributes: {class: 'commentary-date-tooltip'},
+
+            content:
+              language.$(titleCapsule, 'date', data.accessKind, {
+                date:
+                  language.formatDate(data.accessDate),
+              }),
+          }),
+      });
+    } else {
+      return time;
+    }
+  },
 }