mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-14 20:40:17 -05:00
Merge pull request #20851 from overleaf/mf-bs5-pagination
[web] Bootstrap 5 pagination GitOrigin-RevId: b3709a3f016423e7df12d6dfdf2cb4e47efbffe2
This commit is contained in:
M Fahru
Copybot
parent
dc445121fe
commit
5d2eac5694
4 changed files with 90 additions and 14 deletions
|
|
@ -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") >>
|
||||
|
|
|
|||
|
|
@ -26,3 +26,4 @@
|
|||
@import 'list-group';
|
||||
@import 'select';
|
||||
@import 'link';
|
||||
@import 'pagination';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue