diff --git a/src/features/classic_footer/index.js b/src/features/classic_footer/index.js index f98874a7ad..2ce8a0f6f7 100644 --- a/src/features/classic_footer/index.js +++ b/src/features/classic_footer/index.js @@ -80,7 +80,7 @@ export const styleElement = buildStyle(` } .${noteCountClass} { - order: -2; + order: -3; padding: 8px; border-radius: 20px; margin-right: auto; diff --git a/src/features/timestamps/index.css b/src/features/timestamps/index.css index 716c36836f..300ea98ee9 100644 --- a/src/features/timestamps/index.css +++ b/src/features/timestamps/index.css @@ -9,6 +9,22 @@ margin-left: var(--post-padding); } +.xkit-timestamp.in-new-footer { + display: none; +} + +:has(> .xkit-classic-footer-note-count) > .xkit-timestamp.in-new-footer { + display: unset; + order: -2; + + color: var(--content-fg-secondary); + font-size: 0.875rem; +} + +:has(> .xkit-timestamp.in-new-footer) > .xkit-classic-footer-note-count { + margin-right: 0; +} + .xkit-long-timestamp { height: 1em; padding: 0 var(--post-padding); diff --git a/src/features/timestamps/index.js b/src/features/timestamps/index.js index 13ddc6bdff..2ce9d63c22 100644 --- a/src/features/timestamps/index.js +++ b/src/features/timestamps/index.js @@ -8,6 +8,7 @@ import { apiFetch } from '../../utils/tumblr_helpers.js'; const noteCountSelector = keyToCss('noteCount'); const reblogHeaderSelector = keyToCss('reblogHeader'); +const engagementControlsSelector = keyToCss('engagementControls'); let alwaysShowYear; let headerTimestamps; @@ -90,6 +91,7 @@ const addPostTimestamps = async function () { cache[id] = Promise.resolve(timestamp); const noteCountElement = postElement.querySelector(noteCountSelector); + const engagementControlsElement = postElement.querySelector(engagementControlsSelector); const relativeTimeString = constructRelativeTimeString(timestamp); @@ -100,7 +102,12 @@ const addPostTimestamps = async function () { timestampElement.textContent = constructTimeString(timestamp); timestampElement.title = relativeTimeString; - $(noteCountElement).after(timestampElement); + if (noteCountElement) { + noteCountElement.after(timestampElement); + } else if (engagementControlsElement) { + timestampElement.classList.add('in-new-footer'); + engagementControlsElement.before(timestampElement); + } if (headerTimestamps) { const longTimestampElement = document.createElement('div');