diff options
-rw-r--r-- | src/content/dependencies/generateCommentaryEntryDate.js | 105 | ||||
-rw-r--r-- | src/static/css/site.css | 2 |
2 files changed, 60 insertions, 47 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; + } + }, } diff --git a/src/static/css/site.css b/src/static/css/site.css index 40c5f80a..8d3ab0ae 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -1206,9 +1206,7 @@ ul.image-details li { margin-left: 0.75ch; align-self: flex-end; -} -.commentary-entry-heading .commentary-date time { padding-left: 0.5ch; padding-right: 0.25ch; } |