feat(v2): themed logo in footer#3993
Conversation
|
Hi @natac13! Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks! |
|
✔️ Deploy preview for docusaurus-2 ready! 🔨 Explore the source changes: fb0ad00 🔍 Inspect the deploy logs: https://app.netlify.com/sites/docusaurus-2/deploys/5ff5d0bfc7223f0007e5ea77 😎 Browse the preview: https://deploy-preview-3993--docusaurus-2.netlify.app |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3993--docusaurus-2.netlify.app/classic/ |
|
Size Change: +5 B (0%) Total Size: 156 kB ℹ️ View Unchanged
|
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
|
Hi @natac13 Can you temporarily add a fake darkSrc to our own website? This will make the review process easier for me (and help understanding the problems you mention in your comment), I'll remove this before merging. For now the code looks nice |
Yep I can do this. |
|
Ok I go the image added to the website temporarily. It is working! Except for the centering. Sorry for the typos and multiple commits. Do you want them squashed? Or I can close this pr and start a fresh one with only one commit. Thanks for the help. Update: I believe if we can add the follow css to this display: flex;
flex-flow: column;
align-items: center;
NOTE |
| opacity: 1; | ||
| } | ||
|
|
||
| .footerLogoImg { |
There was a problem hiding this comment.
Instead this, I would suggest within this PR, change block to inline in the stylesheet of ThemedImage component here https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css
There was a problem hiding this comment.
agree
would even use "initial" (but it's somehow the same)
There was a problem hiding this comment.
Would this need to be changed in both classic theme and bootstrap theme?
There was a problem hiding this comment.
the bootstrap theme is not too important right now, do not care about it ;)
I'll clean it up later when I'll be working on the theme gallery
natac13
changed the title
|
Not sure why but comparing before/after it seems the layout got a bit affected. Also, the hover animation does not work anymore |
|
Changed the Themed Image styling as suggested. Works great!
Not sure why the hover animation is not working for you. Here is a video of me testing it. docusaurus-footer-logo.mp4Also I am not sure what layout bit got affected. |
|
The recent changes seems to fix the layout and anim issues I had, so it looks good to merge 👍 thanks |
Just a reminder about removing the temp Thanks for the help with this PR |
|
Thanks, you can remove this picture now. Was wondering why inherit instead of inline/initial. I'd prefer initial, as it means we revert to "default", but maybe you have a good reason to use inherit instead? |
This was my mistake. Removed temp `srcDark` footer logo
|
Sorry about the styling mistake. I got it change to I have removed the temp |
|
thanks 👍 |
* feat: attempt 1 at themedlogo in footer * Add srcDark to website for temp debug * typo fix * Got it now! except for centering * style: centered new themed image logo * style: change ThemedImage styleing to center footer logo * style: Change ThemeImage Style to initial This was my mistake. Removed temp `srcDark` footer logo
4 participants
Motivation
Trying to get the Logo in Footer Themed
PR Ready, Needs srcDark photo removed before merge and deploy. This is left as instructed
Closes #3989
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
Related PRs
#3989 (comment)