Skip to content

Feature: Add Client-Side Pagination to Events Page #114

Description

@GenDelta

Requirements

  • Implement client-side pagination for the Events page with exactly 6 event cards per page.
  • Display event cards using a Most Recent First ordering strategy.
  • Add reusable next-page and previous-page navigation UI for traversing event pages.
  • Design the pagination component for reuse in the Gallery pagination work described in issue Feature: Add Gallery Pagination and Image Sorting #111.
  • Follow the repository's existing component, styling, accessibility, and responsive UI conventions.

Acceptance Criteria

  • The Events page displays no more than 6 event cards per page.
  • Event cards are ordered from most recent to oldest.
  • Users can navigate to the next and previous event pages.
  • Previous and next controls are disabled or hidden appropriately at the first and last pages.
  • Pagination is implemented on the client side.
  • The pagination UI is extracted into a reusable component that can also be used by issue Feature: Add Gallery Pagination and Image Sorting #111.
  • The controls are responsive and accessible.
  • The project builds successfully and existing event-card behavior continues to work.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:eventsEvents page and event listingsarea:ui-componentsShared or reusable UI componentsbuildRequires build, lint, type, or compilation validationdependenciesIssue depends on another issue, package, or external resourceenhancementNew feature or requesttype:accessibilityAccessibility, keyboard navigation, labels, or contrasttype:frontendReact, JSX, CSS, or client-side implementationtype:responsiveMobile, tablet, desktop, or responsive-layout worktype:testingAutomated, manual, visual, or browser testing

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions