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

Panorama: Update for vertical navigation; implement custom width #1291

Draft
wants to merge 16 commits into
base: master
Choose a base branch
from

Conversation

marcustyphoon
Copy link
Collaborator

@marcustyphoon marcustyphoon commented Sep 29, 2023

Description

This reimplements Panorama after the vertical navigation UI changes, adds a preference for the maximum post column width, and fixes a number of elements that were not correctly widened in Panorama's previous iteration (some of which I never bug reported, like link elements).

(The default width, pre-reblog-redesign, corresponds to the 3-column masonry view on the explore page. Post reblog redesign it's totally arbitrary at the moment.)

It is somewhat awkward due to Redpop's use of the same wrapper elements around the main page content and right sidebar regardless of the contents of said main page content. Without the use of :has, it is very difficult to do behavior conditional on e.g. the settings page rather than the post column being the main page contents when using a pure CSS solution. I thought a little bit about whether pageModifications would be helpful here, but it's not immediately obvious to me what one would target and what one would toggle. I bet that's eventually the best path forward though.

At the moment, this can't handle the reblog redesign, so it should stay a draft until that experiment ends in either direction.

Resolves #814, resolves #985, resolves #1026, resolves #1109, resolves #1041, resolves discussion #391, resolves discussion #853, resolves discussion #1145.

Resolves #860.

Resolves half of #937, the tag page portion; blog view panorama is more complicated.

Testing steps

@marcustyphoon

This comment was marked as outdated.

@marcustyphoon marcustyphoon marked this pull request as ready for review September 30, 2023 03:02
@marcustyphoon
Copy link
Collaborator Author

(Note that this only works when the screen is very wide; I'm sure certain people would like the post column to be widened in cases where that would necessitate collapsing the left and right rails, but a) no idea what Tumblr plans to do in that regard if anything and b) because of how media queries work I'm not sure it's really realistic to even attempt.)

@marcustyphoon
Copy link
Collaborator Author

marcustyphoon commented Mar 23, 2024

Note: This should be significantly easier, and can be somewhat more feature rich, by taking advantage of :has().

Edit: Eh... kind of. It makes handling the "I navigated from the dashboard to a page that should not be expanded" case easier to guarantee, but it's arguably cleaner to keep using a mutation observer to mark active timelines to simplify the post CSS, at which point how much value are you getting out of it? And this is... sort of readable, but it's not the greatest.

${mainContentWrapper}:has(> div > div > ${mainPostColumn}) {

}
${mainContentWrapper} > div:has(> div > ${mainPostColumn}) {

}
${mainContentWrapper} > div > div:has(> ${mainPostColumn}) {

}
${mainContentWrapper} > div > div > ${mainPostColumn} {

}

@marcustyphoon marcustyphoon marked this pull request as draft March 23, 2024 23:40
@marcustyphoon marcustyphoon added the ff121 Requires Firefox 121+ label Mar 27, 2024
@marcustyphoon
Copy link
Collaborator Author

Now featuring: Tumblr Patio support! Optional preference not to expand media in posts that centers the media instead! Bug fixes for ad containers (yes, really)!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ff121 Requires Firefox 121+
Projects
None yet
1 participant