-
Notifications
You must be signed in to change notification settings - Fork 944
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
adding hover behavior for images #4735
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
….getdbt.com into mwong-hover-images
@@ -185,7 +185,7 @@ Now that you’ve set up the dbt project, database, and have taken a peek at the | |||
|
|||
Identifying the business process is done in collaboration with the business user. The business user has context around the business objectives and business processes, and can provide you with that information. | |||
|
|||
<Lightbox src="/img/blog/2023-04-18-building-a-kimball-dimensional-model-with-dbt/conversation.png" width="65%" title="Conversation between business user and analytics engineer"/> | |||
<Lightbox src="/img/blog/2023-04-18-building-a-kimball-dimensional-model-with-dbt/conversation.png" title="Conversation between business user and analytics engineer"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the original images don't have a width attribute and this undo's a python script i ran, which added a width attribute.
also not sure if the scrolling is affecting the hover a little |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The scale on hover looks like it works great, awesome work @mirnawong1!
${alignment === "left" ? styles.leftAlignLightbox : ''} | ||
${alignment === "right" ? styles.rightAlignLightbox : ''} | ||
${isHovered ? styles.hovered : ''} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work with these conditional checks!
AI Summary: This pull request primarily involves changes to the image display size in various markdown files. The changes reduce the width of images displayed using the
<Lightbox>
tag from the original size to a smaller size, typically 90%. This adjustment is likely to improve the layout and readability of the documentation pages.this pr adds a 'hover over images to expand' behavior. the following changes were made to the original code:
original lightbox src component:
updates to lightbox src component:
isHovered
,expandImage
, andisScrolling
.isHovered
: tracks if the mouse is hovering over image.expandImage
: identifies if the image should expand.isScrolling
: helps indicate whether page is currently being scrolled. (to avoid pop ups when a user is reading)setExpandImage(true)
after a delay (300 milliseconds), but only if the page is not being scrolled (!isScrolling).handleScroll
function to update theisScrolling
state when the user scrolls. This function also cancels the image expansion (setExpandImage(false)
) and resetsisScrolling
after a delay.onMouseEnter
) and mouse leave (onMouseLeave
) to control the hover state (setIsHovered
).useEffect
hook to triggerhandleScroll
handleMouseEnter
to include a delay (matching the scroll delay) before settingisHovered
to true. This ensures that hover effects are not activated immediately after scrolling stops.80%
to all images (using lightbox src component) to ensure the scale was consistent across images and improve accessibility. adding widths also helps with page load and SEO.images