diff --git a/README.md b/README.md index 5c0ae99..89f72e1 100644 --- a/README.md +++ b/README.md @@ -58,10 +58,20 @@ Advanced inventory search and filtering interface. - Filter by expiry date range (start date and end date) - Real-time result display with item cards - Visual expiry status indicators (Fresh, Expiring Soon, Expired) +- **Pagination** — Results displayed with configurable items per page (15, 30, or 60) - Reset button to clear all filters - Keyboard support (press Enter to search) - Date range validation (start date ≤ end date) +**Pagination Features:** +- **Items Per Page Dropdown** — Choose between 15, 30, or 60 items per page +- **Previous/Next Navigation** — Browse through pages of results +- **Page Information** — Shows current page and total pages (e.g., "Page 2 of 5") +- **Result Summary** — Displays showing item count (e.g., "Found 47 items (16-30)") +- **Smart Boundaries** — Previous button disabled on page 1, Next disabled on last page +- **Auto-Reset** — Returns to page 1 when search filters change +- **Dynamic Page Count** — Automatically updates total pages when page size changes + **Expiry Date Features:** - Each inventory item includes an expiry date - Visual badges show expiry status: diff --git a/search.html b/search.html index 9320e4f..3bf6a7a 100644 --- a/search.html +++ b/search.html @@ -128,6 +128,87 @@ background-color: #ffebee; color: #c62828; } + + .pagination-controls { + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + margin: 30px 0; + flex-wrap: wrap; + } + + .pagination-size { + display: flex; + align-items: center; + gap: 10px; + } + + .pagination-size label { + font-weight: bold; + color: #333; + } + + .pagination-size select { + padding: 8px 12px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; + background-color: white; + cursor: pointer; + } + + .pagination-size select:focus { + outline: none; + border-color: #4CAF50; + } + + .pagination-nav { + display: flex; + align-items: center; + gap: 10px; + } + + .pagination-nav button { + padding: 8px 12px; + border: 1px solid #ddd; + background-color: #f5f5f5; + color: #333; + border-radius: 4px; + cursor: pointer; + font-weight: bold; + transition: all 0.2s; + } + + .pagination-nav button:hover:not(:disabled) { + background-color: #4CAF50; + color: white; + border-color: #4CAF50; + } + + .pagination-nav button:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + .pagination-info { + font-size: 14px; + color: #666; + min-width: 120px; + text-align: center; + } + + @media (max-width: 600px) { + .pagination-controls { + flex-direction: column; + gap: 15px; + } + + .pagination-size, + .pagination-nav { + justify-content: center; + } + } @@ -212,13 +293,30 @@
+ +
+
+ + +
+
+ +
Page 1 of 1
+ +
+
+