feat/improve masonary #578
Conversation
EvanNotFound
commented
Jan 24, 2026
EvanNotFound
commented
- feat: add lazy masonry loading and improved image viewer
- fix(web): tweak masonry config and image viewer interactions
- style(web): align bookmarks and masonry page layout wrappers
- style: restyle post expiration callout
- chore: rebuild tailwind css bundle
- style(web): normalize avatar padding utility
- Load masonry items from generated JSON with lazy batches and spinner - Add masonry data generator and config for batch sizes - Enhance image viewer with navigation controls and accessibility texts - Add masonry and viewer translations for all supported languages
- Read masonry batch sizes from nested config with warnings if missing - Switch masonry page to raw layout and adjust styling and lazyload images - Improve global scrollbars and image viewer dragging performance and behavior
- Update expiration callout layout and spacing in article view - Replace callout icon and border styling for expiration notice
- Replace `p-[1px]` with `p-px` on post author avatar - Regenerate Tailwind build to include `p-px` utility
EvanNotFound
requested a deployment
to
PR Preview
GitHub Actions
Waiting
🤖 Augment PR SummarySummary: This PR improves the masonry/gallery experience and enhances the image viewer UX. Changes:
Technical Notes: Masonry now schedules MiniMasonry layouts via rAF throttling and uses IntersectionObserver for both image loading and “load more” triggering; the viewer adds keyboard navigation and viewport-fit scaling on load/resize. 🤖 Was this summary useful? React with 👍 or 👎 |
![augmentcode[bot]](https://avatars.githubusercontent.com/in/1027498?s=60&v=4){kind=small}
| <div class="callout__body flex items-center gap-2"> | ||
| <i class="expire-icon callout__icon fa-solid fa-timer text-[color:var(--callout-primary-color)] text-base shrink-0"></i> | ||
| <span class="expire-label text-[color:var(--callout-primary-color)]" id="expiration-date"><%= __('expired', "some") %></span> | ||
| <div class="article-expire mt-4 mx-2 sm:mx-6 md:mx-8 callout callout--simple red mb-4 rounded-small shadow-redefine-flat bg-(--callout-bg-color) p-3 pl-1 relative flex flex-row gap-2 items-center" id="expiration-container" data-expires="<%= page?.expires %>" data-updated="<%= page?.updated %>"> |
There was a problem hiding this comment.
#expiration-container is no longer hidden by default, but initExpirationDate() only removes hidden when the post is actually expired. This may make the expiration callout display even when expires is set but the post hasn’t expired yet.
🤖 Was this useful? React with 👍 or 👎
| return; | ||
| } | ||
|
|
||
| rafId = window.requestAnimationFrame(() => { |
There was a problem hiding this comment.
The requestAnimationFrame throttling in dragHandle captures nextX/nextY but also mutates viewerState.lastMouseX/lastMouseY while a frame is pending, so deltaX/deltaY can become incorrect (including flipping direction) under frequent mousemove events. This could make panning feel jumpy/inverted when zoomed.
Other Locations
source/js/build/tools/imageViewer.js:1
🤖 Was this useful? React with 👍 or 👎
| event.stopPropagation(); | ||
| } | ||
| viewerState.isMouseDown = false; | ||
| viewerState.dragged = false; |
There was a problem hiding this comment.
viewerState.dragged is reset to false in dragEndHandle, which makes the “don’t close on mask click when dragging” guard ineffective if the mouse is released over the mask after a drag. That can lead to the viewer closing unexpectedly during/after panning.
Other Locations
source/js/build/tools/imageViewer.js:1
🤖 Was this useful? React with 👍 or 👎
