From e7b23c08aed5b2da72b025b8bc3491d4fb7e78f4 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Mon, 7 Oct 2024 06:16:06 -0700 Subject: [PATCH] Merge pull request #20851 from overleaf/mf-bs5-pagination [web] Bootstrap 5 pagination GitOrigin-RevId: b3709a3f016423e7df12d6dfdf2cb4e47efbffe2 --- services/web/app/views/_mixins/pagination.pug | 40 ++++++++----- .../bootstrap-5/components/all.scss | 1 + .../bootstrap-5/components/pagination.scss | 57 +++++++++++++++++++ services/web/locales/en.json | 6 ++ 4 files changed, 90 insertions(+), 14 deletions(-) create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/pagination.scss diff --git a/services/web/app/views/_mixins/pagination.pug b/services/web/app/views/_mixins/pagination.pug index 717cf0d5e2..ef5f62bd0e 100644 --- a/services/web/app/views/_mixins/pagination.pug +++ b/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") > 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") >> diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss index 47a7886ca3..f2a738a566 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss @@ -26,3 +26,4 @@ @import 'list-group'; @import 'select'; @import 'link'; +@import 'pagination'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/pagination.scss b/services/web/frontend/stylesheets/bootstrap-5/components/pagination.scss new file mode 100644 index 0000000000..54de4761d2 --- /dev/null +++ b/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; + } +} diff --git a/services/web/locales/en.json b/services/web/locales/en.json index fe85f93137..47ada82c83 100644 --- a/services/web/locales/en.json +++ b/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",