Generate sharing options when the user pushes the "Share" button, not when the bookmark page is loaded

Description

Similar to for works.

The "Share" button on bookmark pages (single bookmark pages, bookmark listings) is set up so that all of the sharing options are rendered and embedded in the page, and the "Share" button just shows them (without performing another HTTP request). This means that:

  1. The server is performing unnecessary work for any user who views the bookmark pages and doesn't press the "Share" button.

  2. The twitter and tumblr buttons included in the sharing options mean that the user sends an HTTP request with AO3 listed as the referrer () to both twitter and tumblr when they view a work.

It would be good to move the sharing options off of the bookmark pages and into their own controller, to be loaded dynamically when the user presses the "Share" button.

The “Share” button is not currently presented to users who don’t have JavaScript disabled, and this behavior should continue.

Testing Instructions: Make sure that you can still use the "Share" button on bookmarks.

Activity

Show:
Sarken
October 10, 2020, 12:48 PM

The share buttons is still functional on my bookmarks! However, I noticed an issue with the Twitter and Tumblr links:

  • Press “Share” on a bookmark

  • Click on either the Tumblr or Twitter link

  • Close the new window/tab that opens

  • Hover over the link you just followed (i.e. the :visited link)

What happens: The text of the button turns black/dark grey and there is a bottom border/underline under the button.

We should try to fix that before we deploy.

Sarken
November 9, 2020, 2:50 PM

Pull request for BOT issue:

  • Remove unwanted border and dark text when hovering on visited share links

  • Make sure the share link background color changes on keyboard focus

  • Use our default font on the share buttons

  • Do a little cleanup to make the CSS match our code style

Testing instructions

For focus styles:

  • Click inside the text area with the share HTML

  • Press your keyboard's Tab key to move to the Twitter link, and then press it again to move to the Tumblr link

  • The background colors of the links should change, just like they do when you hover

For the visited share links:

  • Follow the Twitter share link to open Twitter's compose tweet screen in a new tab/window

  • Close that tab/window and return to the tab/window where you have the share box open

  • Hover over the Twitter share link again

  • It should not have a black border on the bottom or black text

redsummernight
November 11, 2020, 4:45 PM
  • Focusing on the share links changes their colors similar to hovering on them.

  • Hovering over shared links (visited or not) doesn't add bottom borders or darken text.

Looks good.

DeployedToBeta

Assignee

Tom Milligan

Reporter

redsummernight

Roadmap

Bookmarks

Priority

Medium

Affects versions

Fix versions

Components

BackEnd
FrontEnd

Difficulty

Medium

Milestone

Internal 0.9