mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-01-18 21:32:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve pagination (#4828)

Browse Source 
Based on the design repo updates by @benalleng in btcpayserver/btcpayserver-design#61. Closes #3835.
This commit is contained in:
d11n 2023-04-04 03:54:04 +02:00 committed by GitHub
parent 57544068e9
commit 2bd1842da1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 104 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
BTCPayServer/Components/Pager/Default.cshtml
View File

@ -6,51 +6,53 @@
@if (Model.Total is null || Model.Total.Value > pageSizeOptions.Min())
{
<nav aria-label="..." class="w-100 clearfix">
<nav aria-label="..." class="d-flex flex-wrap gap-3 justify-content-between">
@if (Model.Total is null || Model.Total.Value > Model.Count)
{
<ul class="pagination float-start">
<li class="page-item @(Model.Skip == 0 ? "disabled" : null)">
<a class="page-link" tabindex="-1" href="@NavigatePages(-1, Model.Count)">&laquo;</a>
</li>
<ul class="pagination me-auto">
@if (Model.Skip > 0)
{
<li class="page-item">
<a class="page-link" tabindex="-1" href="@NavigatePages(-1, Model.Count)">Prev</a>
</li>
}
<li class="page-item disabled">
<span class="page-link @(Model.Total is null ? "px-0" : (Model.Skip == 0 ? "ps-0" : null))">
@if (Model.Total is null)
{
<span class="page-link">
@(Model.Skip + 1)–@(Model.Skip + Model.Count)
</span>
}
else if (Model.Total.Value <= Model.Count)
{
<span class="page-link">
1–@Model.Total.Value
</span>
@($"{Model.Skip + 1} – {Model.Skip + Model.Count}")
}
else if (Model.Total.Value <= Model.Count)
{
@($"1 – {Model.Total.Value}")
}
else
{
<span class="page-link">
@(Model.Skip + 1)–@(Model.Skip + Model.Count), Total: @Model.Total.Value
</span>
@($"{Model.Skip + 1} – {Model.Skip + Model.Count}, Total: {Model.Total.Value}")
}
</span>
</li>
<li class="page-item @(((Model.Total is null && Model.CurrentPageCount >= Model.Count) || (Model.Total is not null && Model.Total.Value > (Model.Skip + Model.Count))) ? null : "disabled")">
<a class="page-link" href="@NavigatePages(1, Model.Count)">&raquo;</a>
</li>
@if ((Model.Total is null && Model.CurrentPageCount >= Model.Count) || (Model.Total is not null && Model.Total.Value > Model.Skip + Model.Count))
{
<li class="page-item">
<a class="page-link" href="@NavigatePages(1, Model.Count)">Next</a>
</li>
}
</ul>
}
@if (Model.Total is null || Model.Total.Value >= pageSizeOptions.Min())
{
<ul class="pagination float-end">
<ul class="pagination ms-auto">
<li class="page-item disabled">
<span class="page-link">Page Size:</span>
<span class="page-link">Page Size</span>
</li>
@foreach (int pageSize in pageSizeOptions)
@foreach (var pageSize in pageSizeOptions)
{
if (Model.Total is null || Model.Total.Value >= pageSize)
{
<li class="page-item @(Model.Count == pageSize ? "active" : null)">
<a class="page-link" href="@NavigatePages(0, pageSize)">@pageSize</a>
<a class="page-link @(Model.Count != pageSize && pageSize == pageSizeOptions.Max() ? "pe-0" : null)" href="@NavigatePages(0, pageSize)">@pageSize</a>
</li>
}
}

134
BTCPayServer/wwwroot/main/bootstrap/bootstrap.css vendored
View File

@ -4649,26 +4649,26 @@ fieldset:disabled .btn {
}
.pagination {
--btcpay-pagination-padding-x: 0.75rem;
--btcpay-pagination-padding-y: 0.375rem;
--btcpay-pagination-padding-x: var(--btcpay-space-s);
--btcpay-pagination-padding-y: var(--btcpay-space-s);
--btcpay-pagination-font-size: 0.875rem;
--btcpay-pagination-color: var(--btcpay-body-link);
--btcpay-pagination-bg: var(--btcpay-body-bg-light);
--btcpay-pagination-color: var(--btcpay-body-text-muted);
--btcpay-pagination-bg: var(--btcpay-body-bg);
--btcpay-pagination-border-width: 1px;
--btcpay-pagination-border-color: var(--btcpay-body-border-light);
--btcpay-pagination-border-color: transparent;
--btcpay-pagination-border-radius: var(--btcpay-border-radius);
--btcpay-pagination-hover-color: var(--btcpay-body-link);
--btcpay-pagination-hover-bg: var(--btcpay-body-bg-hover);
--btcpay-pagination-hover-border-color: var(--btcpay-body-border-light);
--btcpay-pagination-focus-color: var(--btcpay-body-link);
--btcpay-pagination-focus-bg: var(--btcpay-body-bg-hover);
--btcpay-pagination-focus-box-shadow: 0 0 0 2px var(--btcpay-body-shadow);
--btcpay-pagination-hover-color: var(--btcpay-body-text);
--btcpay-pagination-hover-bg: var(--btcpay-body-bg);
--btcpay-pagination-hover-border-color: transparent;
--btcpay-pagination-focus-color: var(--btcpay-body-text);
--btcpay-pagination-focus-bg: var(--btcpay-body-bg);
--btcpay-pagination-focus-box-shadow: none;
--btcpay-pagination-active-color: var(--btcpay-body-text-active);
--btcpay-pagination-active-bg: var(--btcpay-body-bg-active);
--btcpay-pagination-active-border-color: var(--btcpay-body-border-medium);
--btcpay-pagination-active-border-color: transparent;
--btcpay-pagination-disabled-color: var(--btcpay-body-text-muted);
--btcpay-pagination-disabled-bg: var(--btcpay-body-bg-light);
--btcpay-pagination-disabled-border-color: var(--btcpay-body-border-light);
--btcpay-pagination-disabled-bg: var(--btcpay-body-bg);
--btcpay-pagination-disabled-border-color: transparent;
display: flex;
padding-left: 0;
list-style: none;
@ -11076,6 +11076,23 @@ a.nav-link:hover {
background: var(--btcpay-nav-bg-hover);
}
.pagination {
gap: var(--btcpay-space-s);
margin-bottom: 0;
font-weight: var(--btcpay-font-weight-semibold);
}
a.page-link {
border-radius: var(--btcpay-border-radius-l) !important;
min-width: 2.9em;
text-align: center;
}
.active > a.page-link:hover,
.active > a.page-link:focus {
background: var(--btcpay-primary-bg-active);
}
main p > a {
font-weight: var(--btcpay-font-weight-semibold);
}
@ -11117,7 +11134,7 @@ ul:not([class]) li {
/* Modals */
.modal-content {
box-shadow: 0 20px 20px rgba(0, 0, 0, .15);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.15);
}
/* Accordion */
@ -11244,12 +11261,12 @@ textarea.w-auto {
}
/* Pull tables out of the grid by their horizontal column padding */
main *:not([class^="table-responsive"]) > .table {
main *:not([class*='table-responsive']) > .table {
width: calc(100% + 1rem);
margin: 1.5rem -0.5rem;
}
main [class^="table-responsive"] {
main [class*='table-responsive'] {
width: calc(100% + 1rem);
margin: 1.5rem -0.5rem;
}
@ -11280,49 +11297,54 @@ main [class^="table-responsive"] {
cursor: pointer;
}
.w-100px {
width: 100px;
}
.w-125px {
width: 125px;
}
.w-150px {
width: 150px;
}
.w-175px {
width: 175px;
}
.w-200px {
width: 200px;
}
.w-225px {
width: 225px;
}
.w-250px {
width: 250px;
}
.w-275px {
width: 275px;
}
.w-300px {
width: 300px;
}
.w-325px {
width: 325px;
}
.w-350px {
width: 350px;
@media screen {
.w-75px {
width: 75px;
}
.w-100px {
width: 100px;
}
.w-125px {
width: 125px;
}
.w-150px {
width: 150px;
}
.w-175px {
width: 175px;
}
.w-200px {
width: 200px;
}
.w-225px {
width: 225px;
}
.w-250px {
width: 250px;
}
.w-275px {
width: 275px;
}
.w-300px {
width: 300px;
}
.w-325px {
width: 325px;
}
.w-350px {
width: 350px;
}
}
/* Chrome, Safari, Edge, Opera */
input[type="number"].hide-number-spin::-webkit-outer-spin-button,
input[type="number"].hide-number-spin::-webkit-inner-spin-button {
input[type='number'].hide-number-spin::-webkit-outer-spin-button,
input[type='number'].hide-number-spin::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"].hide-number-spin {
input[type='number'].hide-number-spin {
-moz-appearance: textfield;
}
@ -11375,14 +11397,14 @@ input[type="number"].hide-number-spin {
margin-bottom: 1.5rem;
}
.form-select:not(:disabled,.disabled,.is-valid,.is-invalid):hover,
.form-control:not(:disabled,.disabled,.is-valid,.is-invalid):hover,
.form-check-input:not(:disabled,.disabled,.is-valid,.is-invalid):hover {
.form-select:not(:disabled, .disabled, .is-valid, .is-invalid):hover,
.form-control:not(:disabled, .disabled, .is-valid, .is-invalid):hover,
.form-check-input:not(:disabled, .disabled, .is-valid, .is-invalid):hover {
border-color: var(--btcpay-form-border-hover);
}
[data-required]::after {
content: " *";
content: ' *';
color: var(--btcpay-danger);
}