Merge pull request #20851 from overleaf/mf-bs5-pagination

[web] Bootstrap 5 pagination

GitOrigin-RevId: b3709a3f016423e7df12d6dfdf2cb4e47efbffe2

services/web/app/views/_mixins/pagination.pug

@@ -13,36 +13,42 @@ mixin pagination(pages, page_path, max_btns)
 		- var next_index = 0;
 		- var full_page_path = page_path + "/page/"
 
-		nav(role="navigation" aria-label="Pagination Navigation")
+		nav(role="navigation" aria-label=(translate("pagination_navigation")))
 			ul.pagination
 				if pages.current_page > 1
 					li
 						a(
-							aria-label="Go to first page"
+							aria-label=translate("go_to_first_page")
 							href=page_path
-						) « First
+						)
+							span(aria-hidden="true") <<
+							|
+							| First
 					li
 						a(
-							aria-label="Go to previous page"
+							aria-label=translate("go_to_previous_page")
 							href=full_page_path + (parseInt(pages.current_page, 10) - 1)
 							rel="prev"
-						) ‹ Prev
+						)
+							span(aria-hidden="true") <
+							|
+							| Prev
 
 				if pages.current_page - max_btns > 1
-					li
+					li(aria-hidden="true")
 						span …
 
 				while prev_page < pages.current_page
 					li
 						a(
-							aria-label="Go to page " + prev_page
+							aria-label=translate("go_to_page_x", {page: prev_page})
 							href=full_page_path + prev_page
 						) #{prev_page}
 						- prev_page++
 
 				li(class="active")
 					span(
-						aria-label="Current Page, Page " + pages.current_page
+						aria-label=translate("current_page_page", {page: pages.current_page})
 						aria-current="true"
 					) #{pages.current_page}
 
@@ -50,25 +56,31 @@ mixin pagination(pages, page_path, max_btns)
 					while next_page <= pages.total_pages && next_index < max_btns
 						li
 							a(
-								aria-label="Go to page " + next_page
+								aria-label=translate("go_to_page_x", {page: next_page})
 								href=full_page_path + next_page
 							) #{next_page}
 						- next_page++
 						- next_index++
 
 					if next_page <= pages.total_pages 
-						li
+						li.ellipses(aria-hidden="true")
 							span …
 
 					li
 						a(
-							aria-label="Go to next page"
+							aria-label=translate("go_to_next_page")
 							href=full_page_path + (parseInt(pages.current_page, 10) + 1)
 							rel="next"
-						) Next ›
+						)
+							| Next
+							|
+							span(aria-hidden="true") &gt;
 
 					li
 						a(
-							aria-label="Go to last page"
+							aria-label=translate("go_to_last_page")
 							href=full_page_path + pages.total_pages
-						) Last »
+						)
+							| Last
+							|
+							span(aria-hidden="true") &gt;&gt;

services/web/frontend/stylesheets/bootstrap-5/components/all.scss

@@ -26,3 +26,4 @@
 @import 'list-group';
 @import 'select';
 @import 'link';
+@import 'pagination';

services/web/frontend/stylesheets/bootstrap-5/components/pagination.scss

@@ -0,0 +1,57 @@
+// Pagination (multiple pages)
+// --------------------------------------------------
+.pagination {
+  display: inline-block;
+  padding-left: 0;
+  margin: var(--spacing-08) 0;
+
+  > li {
+    display: inline-block;
+
+    > a,
+    > span {
+      position: relative;
+      float: left; // Collapse white-space
+      padding: var(--spacing-04) var(--spacing-06);
+      line-height: var(--line-height-base);
+      text-decoration: none;
+      color: var(--neutral-90);
+      background-color: #fff;
+      border: 1px solid var(--neutral-30);
+      margin-left: -1px;
+      font-weight: 600;
+
+      &:hover,
+      &:focus {
+        color: var(--neutral-90);
+        background-color: var(--neutral-10);
+        border-color: var(--neutral-30);
+        text-decoration: none;
+      }
+    }
+
+    &:first-child {
+      > a,
+      > span {
+        margin-left: 0;
+      }
+    }
+  }
+
+  > .active > a,
+  > .active > span {
+    &,
+    &:hover,
+    &:focus {
+      z-index: 2;
+      color: var(--green-70);
+      background-color: var(--green-10);
+      border-color: var(--neutral-30);
+      cursor: default;
+    }
+  }
+
+  .ellipses {
+    pointer-events: none;
+  }
+}

services/web/locales/en.json

@@ -390,6 +390,7 @@
   "cs": "Czech",
   "currency": "Currency",
   "current_file": "Current file",
+  "current_page_page": "Current Page, Page __page__",
   "current_password": "Current Password",
   "current_price": "Current price",
   "current_session": "Current Session",
@@ -816,8 +817,13 @@
   "go_prev_page": "Go to Previous Page",
   "go_to_account_settings": "Go to Account Settings",
   "go_to_code_location_in_pdf": "Go to code location in PDF",
+  "go_to_first_page": "Go to first page",
+  "go_to_last_page": "Go to last page",
+  "go_to_next_page": "Go to next page",
   "go_to_overleaf": "Go to Overleaf",
+  "go_to_page_x": "Go to page __page__",
   "go_to_pdf_location_in_code": "Go to PDF location in code (Tip: double click on the PDF for best results)",
+  "go_to_previous_page": "Go to previous page",
   "go_to_settings": "Go to settings",
   "great_for_getting_started": "Great for getting started",
   "great_for_small_teams_and_departments": "Great for small teams and departments",