XKit-Rewritten
XKit-Rewritten copied to clipboard
AprilSylph
"Scrolling Avatars" feature
Description
Adds a "Scrolling Avatars" feature that hides the reblog parent avatars in post headers and changes them back to the 64px sticky-style scrolling avatars that appear beside posts.
Resolves #1310.
Testing steps
- Enable the "Scrolling Avatars" feature
- Navigate to the dashboard
Two things I should note:
The scrolling avatars function identically to the original ones, but they don't have blog popovers. It could be possible that there is a way to clone the existing popovers (I tried with no success) or create new popovers.
The avatars do require custom CSS. Most of the class keys for the scrolling avatars refer to multiple obfuscated classes, and from my testing there's no way to get the expected style behavior with keyToClasses() without specifying a specific index in the class array, which defeats the point of using the key function in the first place. In the unmodified Tumblr layout before the header update, I found that which classes out of the array actually end up in the DOM seemed to depend on your browser's perceived window size.
Does this break with #1291? I assume it probably does. Not a huge deal.
Does this break with #1291? I assume it probably does. Not a huge deal.
Possibly, I haven't looked at that PR yet. These are the changes that feature makes to resize the wrapper to fit the icons:
const styleElement = buildStyle(`
${keyToCss('mainContentWrapper')} { margin-left: 85px; }
@media (min-width: 990px) {
${keyToCss('tabsHeader')} { margin-left: -105px !important; }
}
`);
I believe previously there were no scrolling avatars in the <990px mobile view; should this reproduce that? That should be as simple as putting all of the CSS in a style element and setting its media attribute, as well as setting display:none on the added elements in the opposite case.
I suppose it would make sense to address https://github.com/AprilSylph/XKit-Rewritten/pull/1315#issuecomment-1789822651 here as well.