feat: pagination improvements to maximize space utilization (#1165)
* Minor improvements to pagination functions * Update pagination styles with enhanced UI/UX design - Implemented full-width layout with flexible page numbers - Added fixed-width arrow buttons for consistent navigation - Enhanced hover and active states for better user interaction - Improved responsive design with proper flex layout - Added comprehensive styling for disabled and ellipsis states * Simplify pagination logic and use SVG files to avoid repeated definition * Remove change to jsconfig.json * Remove comments and classes --------- Co-authored-by: delize <4028612+delize@users.noreply.github.com> Co-authored-by: Jimmy <jimmy@cai.im>
This commit is contained in:
Andrew Doering
co-authored by
delize
Jimmy
delize
Jimmy
parent
dc94a29617
commit
47db505228
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>
|
||||
|
After Width: | Height: | Size: 336 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
|
||||
|
After Width: | Height: | Size: 336 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-dots"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
|
||||
|
After Width: | Height: | Size: 459 B |
@@ -4,18 +4,47 @@
|
||||
box-shadow: var(--shadow-l1);
|
||||
border-radius: var(--card-border-radius);
|
||||
overflow: hidden;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.page-link {
|
||||
padding: 16px 32px;
|
||||
display: inline-flex;
|
||||
padding: 16px 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1 1 auto;
|
||||
min-width: 48px;
|
||||
color: var(--card-text-color-secondary);
|
||||
text-decoration: none;
|
||||
|
||||
&.current {
|
||||
font-weight: bold;
|
||||
background-color: var(--card-background-selected);
|
||||
color: var(--card-text-color-main);
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
flex: 0 0 48px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
color: var(--card-text-color-secondary);
|
||||
&:hover:not(.current):not(.disabled) {
|
||||
background-color: var(--card-background-selected);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: var(--card-background-selected);
|
||||
color: var(--card-text-color-main);
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
color: var(--card-text-color-secondary);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +1,70 @@
|
||||
{{ if gt .Paginator.TotalPages 1 }}
|
||||
<nav class='pagination'>
|
||||
{{ $.Scratch.Set "hasPrevDots" false }}
|
||||
{{ $.Scratch.Set "hasNextDots" false }}
|
||||
{{- $pag := $.Paginator -}}
|
||||
{{- if gt $pag.TotalPages 1 -}}
|
||||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||
{{- /* Previous page button */ -}}
|
||||
<a class="page-link {{ if not $pag.Prev }}disabled{{ end }}"
|
||||
{{- if $pag.Prev -}}href="{{ $pag.Prev.URL }}" {{- end -}}
|
||||
aria-label="Previous page"
|
||||
{{- if not $pag.Prev -}}aria-disabled="true"{{- end -}}>
|
||||
{{ partial "helper/icon" "chevron-left" }}
|
||||
</a>
|
||||
|
||||
{{ range .Paginator.Pagers }}
|
||||
{{ if eq . $.Paginator }}
|
||||
<span class='page-link current'>
|
||||
{{- .PageNumber -}}
|
||||
</span>
|
||||
{{ else if or (or (eq . $.Paginator.First) (eq . $.Paginator.Prev)) (or (eq . $.Paginator.Next) (eq . $.Paginator.Last )) }}
|
||||
<a class='page-link' href='{{ .URL }}'>
|
||||
{{- .PageNumber -}}
|
||||
</a>
|
||||
{{ else }}
|
||||
{{ if and (not ($.Scratch.Get "hasPrevDots")) (lt .PageNumber $.Paginator.PageNumber) }}
|
||||
{{ $.Scratch.Set "hasPrevDots" true }}
|
||||
<span class='page-link dots'>…</span>
|
||||
{{ else if and (not ($.Scratch.Get "hasNextDots")) (gt .PageNumber $.Paginator.PageNumber) }}
|
||||
{{ $.Scratch.Set "hasNextDots" true }}
|
||||
<span class='page-link dots'>…</span>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
{{- /* Page numbers logic */ -}}
|
||||
{{- $window := 4 -}}
|
||||
{{- $showFirst := true -}}
|
||||
{{- $showLast := true -}}
|
||||
|
||||
{{- /* First page */ -}}
|
||||
<a class="page-link {{ if eq $pag.PageNumber 1 }}current{{ end }}" aria-label="Page 1"
|
||||
{{- if eq $pag.PageNumber 1 -}}aria-current="page" {{- end -}}
|
||||
{{- if ne $pag.PageNumber 1 -}}href="{{ $pag.First.URL }}"{{- end -}}>
|
||||
1
|
||||
</a>
|
||||
|
||||
{{- /* Left ellipsis - show if current page is > 3 */ -}}
|
||||
{{- if gt $pag.PageNumber 3 -}}
|
||||
<span class="page-link pagination-link">
|
||||
{{ partial "helper/icon" "dots" }}
|
||||
</span>
|
||||
{{- end -}}
|
||||
|
||||
{{- /* Middle pages - show current and neighbors */ -}}
|
||||
{{- range $pag.Pagers -}}
|
||||
{{- if and (gt .PageNumber 1) (lt .PageNumber $pag.TotalPages) -}}
|
||||
{{- if and (ge .PageNumber (sub $pag.PageNumber $window)) (le .PageNumber (add $pag.PageNumber $window)) -}}
|
||||
<a class="page-link {{ if eq .PageNumber $pag.PageNumber }}current{{ end }}"
|
||||
{{- if eq .PageNumber $pag.PageNumber -}}aria-current="page" {{- end -}} href="{{ .URL }}"
|
||||
aria-label="Page {{ .PageNumber }}">
|
||||
{{ .PageNumber }}
|
||||
</a>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- /* Right ellipsis - show if current page is < last-2 */ -}}
|
||||
{{- if lt $pag.PageNumber (sub $pag.TotalPages 2) -}}
|
||||
<span class="page-link pagination-link">
|
||||
{{ partial "helper/icon" "dots" }}
|
||||
</span>
|
||||
{{- end -}}
|
||||
|
||||
{{- /* Last page (if more than 1 page total) */ -}}
|
||||
|
||||
{{- if gt $pag.TotalPages 1 -}}
|
||||
<a class="page-link {{ if eq $pag.PageNumber $pag.TotalPages }}current{{ end }}"
|
||||
{{- if ne $pag.PageNumber $pag.TotalPages -}}href="{{ $pag.Last.URL }}" {{- end -}}
|
||||
aria-label="Page {{ $pag.TotalPages }}"
|
||||
{{- if eq $pag.PageNumber $pag.TotalPages -}}aria-current="page"{{- end -}}>
|
||||
{{ $pag.TotalPages }}
|
||||
</a>
|
||||
{{- end -}}
|
||||
|
||||
{{- /* Next page button */ -}}
|
||||
<a class="page-link {{ if not $pag.Next }}disabled{{ end }}"
|
||||
{{- if $pag.Next -}}href="{{ $pag.Next.URL }}" {{- end -}}
|
||||
aria-label="Next page"
|
||||
{{- if not $pag.Next -}}aria-disabled="true"{{- end -}}>
|
||||
{{ partial "helper/icon" "chevron-right" }}
|
||||
</a>
|
||||
</nav>
|
||||
{{- end -}}
|
||||
Reference in New Issue
Block a user