Fix image popover interaction #113
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Changed the image popover container from a <button> to a <div>. Previously, the entire modal was a button, which caused it to close immediately on any click, preventing users from right-clicking to save or open the image in a new tab. By changing the container to a div, the image can be interacted with normally. The popover can still be dismissed by pressing the 'Esc' key or clicking the backdrop, which is standard and intuitive behavior for the Popover API.
This feature replaces the manual 'Before' (next page) button with an infinite scrolling mechanism. - A new script, `public/js/infinite-scroll.js`, is added which uses the IntersectionObserver API to detect when the user has scrolled to the bottom of the posts list. - When triggered, the script fetches the next page's content, parses it, and appends the new posts to the current view. - The 'Before' link in `src/components/list.astro` has been repurposed as the trigger element for the observer and styled as a 'Load More' button for non-JS/fallback scenarios. - The script is loaded deferentially in `src/layouts/base.astro`. This change adds client-side JavaScript to the project, as approved by the user, to provide a smoother browsing experience.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.