From fcad0dc1a0db25f2bfd79fda5ecd064eca9074f4 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Mon, 28 Sep 2026 18:48:53 +0000 Subject: [PATCH] Wall of People Groups: comment times and the unnamed-group fallback in the reader's language --- .../src/components/CommentsDialog.vue | 18 ++++++++++++------ .../src/components/PeopleGroupsWall.vue | 4 +++- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/plugin-designs/wall-of-people-groups/src/components/CommentsDialog.vue b/plugin-designs/wall-of-people-groups/src/components/CommentsDialog.vue index 9d82e3ddf..d4b8e2db1 100644 --- a/plugin-designs/wall-of-people-groups/src/components/CommentsDialog.vue +++ b/plugin-designs/wall-of-people-groups/src/components/CommentsDialog.vue @@ -173,12 +173,18 @@ export default { const diffHours = Math.floor(diffMs / 3600000); const diffDays = Math.floor(diffMs / 86400000); - if (diffMins < 1) return 'Just now'; - if (diffMins < 60) return `${diffMins}m ago`; - if (diffHours < 24) return `${diffHours}h ago`; - if (diffDays < 7) return `${diffDays}d ago`; - - return date.toLocaleDateString(); + // The reader's language, from the platform: "just now" / "5 minutes ago" / "hace 5 minutos" … + // (Intl.RelativeTimeFormat), so no hand-built English "m ago" and no catalogue keys to drift. + const locale = String(this.$i18n?.locale || 'en'); + let rtf = null; + try { rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }); } catch (_) { /* old engine: fall back below */ } + if (rtf) { + if (diffMins < 1) return rtf.format(0, 'second'); + if (diffMins < 60) return rtf.format(-diffMins, 'minute'); + if (diffHours < 24) return rtf.format(-diffHours, 'hour'); + if (diffDays < 7) return rtf.format(-diffDays, 'day'); + } + return date.toLocaleDateString(locale); }, getImageUrl() { diff --git a/plugin-designs/wall-of-people-groups/src/components/PeopleGroupsWall.vue b/plugin-designs/wall-of-people-groups/src/components/PeopleGroupsWall.vue index 6f5787aa4..d3d5cbfbf 100644 --- a/plugin-designs/wall-of-people-groups/src/components/PeopleGroupsWall.vue +++ b/plugin-designs/wall-of-people-groups/src/components/PeopleGroupsWall.vue @@ -231,11 +231,13 @@ export default { const cardWidth = this.cardWidth; const cardHeight = this.cardHeight; + // Translated ONCE here: inside d3's each(function), `this` is the card node, not the component. + const unknownGroup = this.$t('wall.unknownGroup'); // Add people group name - NO TRUNCATION, smaller font, with clickable link cardGroups.each(function(d) { const group = wallD3().select(this); const peopleID3 = d.peopleID3 || d.PeopleID3; - const name = d.name || d.post_title || 'Unknown Group'; + const name = d.name || d.post_title || unknownGroup; let nameElement;