Bootstrap pagination #145
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| /* | ||
| pagination | ||
| */ | ||
|
|
||
| .pagination { | ||
| display: flex; | ||
| padding-left: 0; | ||
| list-style: none; | ||
| margin-top: 5rem; | ||
| } | ||
|
|
||
| .page-link { | ||
| position: relative; | ||
| display: block; | ||
| padding: 0.5rem 1rem; /* --bs-pagination-padding-y and --bs-pagination-padding-x */ | ||
| font-size: 1.25rem; /* --bs-pagination-font-size */ | ||
| color: #0d6efd; /* --bs-link-color */ | ||
| text-decoration: none; | ||
| background-color: #fff; /* --bs-body-bg */ | ||
| border: 1px solid #dee2e6; /* --bs-border-color */ | ||
| transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: reduce) { | ||
| .page-link { | ||
| transition: none; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| .page-link:hover { | ||
| text-decoration: none; | ||
|
|
||
| z-index: 2; | ||
| color: #0a58ca; /* --bs-link-hover-color */ | ||
| background-color: #f8f9fa; /* --bs-tertiary-bg */ | ||
| border-color: #dee2e6; /* --bs-border-color */ | ||
| } | ||
|
|
||
| .page-link:focus { | ||
| text-decoration: none; | ||
|
|
||
| z-index: 3; | ||
| color: #0a58ca; /* --bs-link-hover-color */ | ||
|
|
||
| background-color: #e9ecef; /* --bs-secondary-bg */ | ||
| outline: 0; | ||
| box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* --bs-pagination-focus-box-shadow */ | ||
| } | ||
|
|
||
| .page-link.active, .active > .page-link { | ||
| z-index: 3; | ||
| color: #fff; /* --bs-pagination-active-color */ | ||
| background-color: #0d6efd; /* --bs-pagination-active-bg */ | ||
| border-color: #0d6efd; /* --bs-pagination-active-border-color */ | ||
| } | ||
|
|
||
| .page-link.disabled, .disabled > .page-link { | ||
| color: rgba(33, 37, 41, 0.75); /* --bs-secondary-color */ | ||
| pointer-events: none; | ||
| background-color: #e9ecef; /* --bs-secondary-bg */ | ||
| border-color: #dee2e6; /* --bs-border-color */ | ||
| } | ||
|
|
||
| .page-item:not(:first-child) .page-link { | ||
| margin-left: calc(1px * -1); | ||
| } | ||
|
|
||
| .page-item:first-child .page-link { | ||
| border-top-left-radius: 0.5rem; | ||
| border-bottom-left-radius: 0.5rem; | ||
| } | ||
|
|
||
| .page-item:last-child .page-link { | ||
| border-top-right-radius: 0.5rem; | ||
| border-bottom-right-radius: 0.5rem; | ||
| } | ||
| .justify-content-between { | ||
| justify-content: space-between !important; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,134 @@ | ||
| {{- $validFormats := slice "default" "terse" }} | ||
|
|
||
| {{- $msg1 := "When passing a map to the internal pagination template, one of the elements must be named 'page', and it must be set to the context of the current page." }} | ||
| {{- $msg2 := "The 'format' specified in the map passed to the internal pagination template is invalid. Valid choices are: %s." }} | ||
|
|
||
| {{- $page := . }} | ||
| {{- $format := "default" }} | ||
|
|
||
| {{- if reflect.IsMap . }} | ||
| {{- with .page }} | ||
| {{- $page = . }} | ||
| {{- else }} | ||
| {{- errorf $msg1 }} | ||
| {{- end }} | ||
| {{- with .format }} | ||
| {{- $format = lower . }} | ||
| {{- end }} | ||
| {{- end }} | ||
|
|
||
| {{- if in $validFormats $format }} | ||
| {{- if gt $page.Paginator.TotalPages 1 }} | ||
| <ul class="pagination pagination-{{ $format }} justify-content-between"> | ||
| {{- partial (printf "partials/inline/pagination/%s" $format) $page }} | ||
| </ul> | ||
| {{- end }} | ||
| {{- else }} | ||
| {{- errorf $msg2 (delimit $validFormats ", ") }} | ||
| {{- end -}} | ||
|
|
||
| {{/* Format: default | ||
| {{/* --------------------------------------------------------------------- */}} | ||
| {{- define "partials/inline/pagination/default" }} | ||
| {{- with .Paginator }} | ||
| {{- $currentPageNumber := .PageNumber }} | ||
|
|
||
| {{- with .First }} | ||
| {{- if ne $currentPageNumber .PageNumber }} | ||
| {{- else }} | ||
| {{- end }} | ||
| {{- end }} | ||
|
|
||
| {{- with .Prev }} | ||
| <li class="page-item"> | ||
| <a href="{{ .URL }}" aria-label="Previous" class="page-link" role="button">← Prev</a> | ||
| </li> | ||
| {{- else }} | ||
| <li class="page-item disabled"> | ||
| <a aria-disabled="true" aria-label="Previous" class="page-link" role="button" tabindex="-1">← Prev</a> | ||
| </li> | ||
| {{- end }} | ||
|
|
||
| {{- $slots := 3 }} | ||
| {{- $start := math.Max 1 (sub .PageNumber (math.Floor (div $slots 2))) }} | ||
| {{- $end := math.Min .TotalPages (sub (add $start $slots) 1) }} | ||
| {{- if lt (add (sub $end $start) 1) $slots }} | ||
| {{- $start = math.Max 1 (add (sub $end $slots) 1) }} | ||
| {{- end }} | ||
|
|
||
| {{- range $k := seq $start $end }} | ||
| {{- if eq $.Paginator.PageNumber $k }} | ||
|
|
||
| {{- else }} | ||
|
|
||
| {{- end }} | ||
| {{- end }} | ||
|
|
||
| {{- with .Next }} | ||
| <li class="page-item"> | ||
| <a href="{{ .URL }}" aria-label="Next" class="page-link" role="button">Next →</a> | ||
| </li> | ||
| {{- else }} | ||
| <li class="page-item disabled"> | ||
| <a aria-disabled="true" aria-label="Next" class="page-link" role="button" tabindex="-1">Next →</a> | ||
| </li> | ||
| {{- end }} | ||
|
|
||
| {{- with .Last }} | ||
| {{- if ne $currentPageNumber .PageNumber }} | ||
| {{- else }} | ||
| {{- end }} | ||
| {{- end }} | ||
| {{- end }} | ||
| {{- end -}} | ||
|
|
||
| {{/* Format: terse | ||
| {{/* --------------------------------------------------------------------- */}} | ||
| {{- define "partials/inline/pagination/terse" }} | ||
| {{- with .Paginator }} | ||
| {{- $currentPageNumber := .PageNumber }} | ||
|
|
||
| {{- with .First }} | ||
| {{- if ne $currentPageNumber .PageNumber }} | ||
| {{- end }} | ||
| {{- end }} | ||
|
|
||
| {{- with .Prev }} | ||
| <li class="page-item"> | ||
| <a href="{{ .URL }}" aria-label="Previous" class="page-link" role="button">← Prev</a> | ||
| </li> | ||
| {{- else }} | ||
| <li class="page-item disabled"> | ||
| <a aria-disabled="true" aria-label="Previous" class="page-link" role="button" tabindex="-1">← Prev</a> | ||
| </li> | ||
| {{- end }} | ||
|
|
||
| {{- $slots := 3 }} | ||
| {{- $start := math.Max 1 (sub .PageNumber (math.Floor (div $slots 2))) }} | ||
| {{- $end := math.Min .TotalPages (sub (add $start $slots) 1) }} | ||
| {{- if lt (add (sub $end $start) 1) $slots }} | ||
| {{- $start = math.Max 1 (add (sub $end $slots) 1) }} | ||
| {{- end }} | ||
|
|
||
| {{- range $k := seq $start $end }} | ||
| {{- if eq $.Paginator.PageNumber $k }} | ||
| {{- else }} | ||
| {{- end }} | ||
| {{- end }} | ||
|
|
||
| {{- with .Next }} | ||
| <li class="page-item"> | ||
| <a href="{{ .URL }}" aria-label="Next" class="page-link" role="button">Next →</a> | ||
| </li> | ||
| {{- else }} | ||
| <li class="page-item disabled"> | ||
| <a aria-disabled="true" aria-label="Next" class="page-link" role="button" tabindex="-1">Next →</a> | ||
| </li> | ||
| {{- end }} | ||
|
|
||
| {{- with .Last }} | ||
| {{- if ne $currentPageNumber .PageNumber }} | ||
| {{- end }} | ||
| {{- end }} | ||
| {{- end }} | ||
| {{- end -}} |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💡 Codebase verification
Accessibility Issue: Missing Focus Indicators on Pagination Links
The
.page-link:focusselector inpagination.csslacks visible focus styles such asoutlineorbox-shadow. This omission can impair keyboard navigation by not providing clear visual feedback for focused elements, negatively impacting accessibility.Recommendations:
Add Focus Styles: Implement
outlineorbox-shadowproperties in the.page-link:focusselector to ensure focused pagination links are clearly visible.Example:
Test Keyboard Navigation: After adding focus styles, verify that users can navigate through pagination links using the keyboard and that the focus indicators are prominent and consistent.
🔗 Analysis chain
LGTM! Consider testing keyboard navigation.
The hover and focus states for
.page-linkare well-defined, providing good visual feedback to users. The z-index adjustments and box-shadow on focus enhance usability and accessibility.To ensure a great user experience for keyboard users, please verify that the focus styles work well with keyboard navigation. You can test this by tabbing through the pagination links and checking if the focus indicator is clearly visible and functional.
To ensure that keyboard navigation provides clear visual feedback, please run the following script to verify the focus styles in
pagination.css:It appears there was a syntax error in the previous shell script due to incorrect escaping of the
{character. Please use the corrected script below to verify that.page-link:focushas appropriate visual indicator styles:🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
Length of output: 125493
Script:
Length of output: 237
Script:
Length of output: 237