diff options
| author | Ben Sima <ben@bensima.com> | 2025-11-28 02:17:21 -0500 |
|---|---|---|
| committer | Ben Sima <ben@bensima.com> | 2025-11-28 02:17:21 -0500 |
| commit | 13edfda9ac34844f9922daf052db4b1050d9e853 (patch) | |
| tree | fac2e2696c411c31f264447eeea859c74ccd4a8f /Omni/Jr/Web/Style.hs | |
| parent | 02cc1cadb77ece392d95e64b3778d0f33e93f51a (diff) | |
Add pagination to Recent Activity with HTMX load more button
The implementation is complete. Here's a summary:
**Changes made:** 1. **API**: Added `QueryParam "offset" Int` to the
`/partials/recent-act 2. **Data types**:
- Updated `HomePage` to include a `Bool` for whether there are
more t - Updated `RecentActivityPartial` to include `nextOffset ::
Int` and
3. **Homepage rendering**: Shows a "Load More" button when there
are mor 4. **Partial rendering**: The `RecentActivityPartial` now
shows a "Load 5. **Handler**: `recentActivityHandler` now supports
pagination with off 6. **Styling**: Added CSS for `.load-more-btn`
and `.btn-secondary` clas
The HTMX integration uses: - `hx-get` to fetch the next page with
offset - `hx-target="closest .recent-activity"` to target the parent
container - `hx-swap="beforeend"` to append new items (including
another Load More
Task-Id: t-151.4
Diffstat (limited to 'Omni/Jr/Web/Style.hs')
| -rw-r--r-- | Omni/Jr/Web/Style.hs | 6 |
1 files changed, 6 insertions, 0 deletions
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs index 7d6e7d6..866ed52 100644 --- a/Omni/Jr/Web/Style.hs +++ b/Omni/Jr/Web/Style.hs @@ -634,6 +634,12 @@ buttonStyles = do color white ".review-link-btn" # hover ? backgroundColor "#7c3aed" ".review-link-section" ? margin (px 8) (px 0) (px 8) (px 0) + ".btn-secondary" <> ".load-more-btn" ? do + backgroundColor "#6b7280" + color white + width (pct 100) + marginTop (px 8) + ".btn-secondary" # hover <> ".load-more-btn" # hover ? backgroundColor "#4b5563" formStyles :: Css formStyles = do |