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

Add an explicit flyout placement option #9357

Merged
merged 3 commits into from
Jun 27, 2022
Merged

Conversation

ericholscher
Copy link
Member

@ericholscher ericholscher commented Jun 20, 2022

This PR does a few things:

  • Lets themes define a #readthedocs-embed-flyout element, where we will inject the footer
  • Documents the flyout menu under Advanced Features

Refs pydata/pydata-sphinx-theme#705

This PR does a few things:

* Lets themes define a `#readthedocs-embed-placement` element, where we will inject the footer
* Documents the flyout menu under Advanced Features

Refs pydata/pydata-sphinx-theme#705
@ericholscher ericholscher requested review from a team as code owners June 20, 2022 21:06
@ericholscher ericholscher requested a review from agjohnson June 20, 2022 21:06
Copy link
Contributor

@agjohnson agjohnson left a comment

Choose a reason for hiding this comment

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

Great docs addition 👍 Something we've needed for a very long time

HTML themes can style the flyout to make it match the overall style of the HTML.
By default the flyout has it's `own CSS file <https://github.com/readthedocs/sphinx_rtd_theme/blob/master/src/sass/_theme_badge.sass>`_,
which you can look at to see the basic CSS class names.
It also uses fontawesome to define some basic UI elements,
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
It also uses fontawesome to define some basic UI elements,
It also uses Font Awesome to define some basic UI elements,

Copy link
Member

Choose a reason for hiding this comment

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

There is a PR opened to remove this and hardcode only the icons used. So, this may conflict with that. See #9297

Copy link
Member Author

Choose a reason for hiding this comment

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

I'll go ahead and remove this mention for now, so we don't have to remember to remove it. That does seem like a better approach.

Copy link
Contributor

Choose a reason for hiding this comment

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

Note: Font Awesome isn't being removed, just the need for font files. It's still a Font Awesome licensed graphic.

readthedocs/core/static-src/core/js/doc-embed/footer.js Outdated Show resolved Hide resolved
Copy link
Member

@humitos humitos left a comment

Choose a reason for hiding this comment

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

Looks 💯

docs/user/flyout-menu.rst Outdated Show resolved Hide resolved
docs/user/flyout-menu.rst Outdated Show resolved Hide resolved
HTML themes can style the flyout to make it match the overall style of the HTML.
By default the flyout has it's `own CSS file <https://github.com/readthedocs/sphinx_rtd_theme/blob/master/src/sass/_theme_badge.sass>`_,
which you can look at to see the basic CSS class names.
It also uses fontawesome to define some basic UI elements,
Copy link
Member

Choose a reason for hiding this comment

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

There is a PR opened to remove this and hardcode only the icons used. So, this may conflict with that. See #9297

Copy link

@pradyunsg pradyunsg left a comment

Choose a reason for hiding this comment

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

LGTM!

@pradyunsg
Copy link

This isn't a blocker, but a future feature request -- would it be possible to make the CSS styling of the flyout not get injected, if a certain attribute is set on the object? This could look like adding an additional class on the element injected in that case, and scoping the styles to a :not(.that-class).

@ericholscher
Copy link
Member Author

ericholscher commented Jun 21, 2022

@pradyunsg Yea, I just had a conversation with @agjohnson, and he suggested using data- attributes. This is what we've done with the ad client, and it could enable something like <div data-rtd-version="html|json" data-rtd-style="false|true">` or similar. That would give us more customizability and options over time that can be configured in the HTML injection.

@pradyunsg
Copy link

That sounds great! :)

Copy link
Member

@humitos humitos left a comment

Choose a reason for hiding this comment

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

Looks good to me! The code is simple 👍🏼 I haven't QAed this locally, tho 😬

@pradyunsg
Copy link

What can I do to help this get landed and deployed, so that the various active downstream themes can switch to this? :)

@pradyunsg
Copy link

FYI: The PR description needs to be updated to reflect the implementation (which uses readthedocs-embed-flyout)

@ericholscher
Copy link
Member Author

@pradyunsg Going to merge this and deploy it tomorrow 👍

@ericholscher ericholscher merged commit b4cc7c9 into main Jun 27, 2022
@ericholscher ericholscher deleted the explicit-flyout-placement branch June 27, 2022 22:05
@ericholscher
Copy link
Member Author

@pradyunsg This should now be live, but I haven't heavily tested it other than ensuring it injects properly. Please let me know if it's working for you!

@humitos
Copy link
Member

humitos commented Jun 29, 2022

@ericholscher I just realized that the example used in the documentation does not have translations. I think it would be good to improve the example by adding translations so theme authors have a full flyout example and can style it properly. What do you think?

@ericholscher
Copy link
Member Author

@humitos Sounds good to me 👍 I just copied an existing style, but we should definitely be documenting (and probably have an example) of the full possible content.

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.

4 participants