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

Change design of embed modal in web UI #31801

Merged
merged 1 commit into from
Sep 12, 2024
Merged

Conversation

Gargron
Copy link
Member

@Gargron Gargron commented Sep 7, 2024

So! This is an updated embed modal, based on new modal designs. It comes with a much better looking and more functional copy-paste component, and renders the embed previews with the correct height for the first time. Oh, and I'm switching embeds to always be light mode. Since most blogs/magazines have a light background.

image

There is a varied degree of cursed things I had to do to make this work:

  • To make embed previews work in the development environment, I had to add http to the frame-src CSP directive
  • To make inline styles on the embed codes work in the previews, I had to add sha256 hashes of every inline style I used to CSP
  • To make the embed previews the correct height, I have to run a 100ms interval that sets the outer iframe height

@Gargron Gargron added the ui Front-end, design label Sep 7, 2024
@Gargron Gargron force-pushed the feature-embed-modal-redesign branch 4 times, most recently from e6c6f26 to dbbc7c0 Compare September 7, 2024 05:49
@Gargron Gargron marked this pull request as ready for review September 7, 2024 05:55
Copy link
Contributor

@ClearlyClaire ClearlyClaire left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code looks ok overall, but I would leave out the CSP changes for now. Having every page include hashes for a seldom-used feature doesn't sit right with me, although right now I can't really think of a better solution.

Copy link
Contributor

This pull request has merge conflicts that must be resolved before it can be merged.

Copy link
Contributor

This pull request has resolved merge conflicts and is ready for review.

@Gargron Gargron changed the base branch from feature-embed-status-react to main September 10, 2024 18:49
Copy link
Contributor

This pull request has merge conflicts that must be resolved before it can be merged.

Copy link
Contributor

This pull request has resolved merge conflicts and is ready for review.

@Gargron Gargron added this pull request to the merge queue Sep 12, 2024
Merged via the queue into main with commit 24ef825 Sep 12, 2024
33 checks passed
@Gargron Gargron deleted the feature-embed-modal-redesign branch September 12, 2024 13:04
justinwritescode pushed a commit to justinwritescode/mastodon that referenced this pull request Sep 15, 2024
nileane pushed a commit to nileane/mastodon that referenced this pull request Sep 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ui Front-end, design
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants