Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Scrolling Avatars" feature #1319

Closed
wants to merge 8 commits into from
Closed

"Scrolling Avatars" feature #1319

wants to merge 8 commits into from

Conversation

enchanted-sword
Copy link
Contributor

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

  1. Enable the "Scrolling Avatars" feature
  2. Navigate to the dashboard

@enchanted-sword
Copy link
Contributor Author

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.

@marcustyphoon
Copy link
Collaborator

Does this break with #1291? I assume it probably does. Not a huge deal.

@enchanted-sword
Copy link
Contributor Author

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; }
  }
`);

@marcustyphoon
Copy link
Collaborator

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.

@marcustyphoon
Copy link
Collaborator

I suppose it would make sense to address #1315 (comment) here as well.

@enchanted-sword enchanted-sword closed this by deleting the head repository Feb 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Scrolling Avatars
2 participants