PiranhaCMS / piranha.core.templates

Project templates for Piranha.Core
MIT License
22 stars 23 forks source link

Paging runs over edge of screen on Page Archive #45

Open blakepell opened 2 years ago

blakepell commented 2 years ago

When there are a lot of entries in an archive, the pager runs off the edge of the screen on both sides. You can scroll to the right to get to the end of the pager but it won't allow you to scroll all the way to the left to get to the first set of pages. I'm attaching a screenshot below to illustrate (you can see the scrollbar can scroll right, but not left). I tested in Edge & FireFox.

image

My workaround currently is to increase the page size so that there are less pages.

blakepell commented 2 years ago

On further inspection I see I can update the template Archive.cshtml to change the behavior. This probably isn't ideal for everyone but I set a static length of it for my simple blog. Sharing in case it's useful to anyone else.

@for (var n = Math.Max(1, Model.Archive.CurrentPage - 10); n <= Math.Min(Model.Archive.CurrentPage < 10 ? 11 : Model.Archive.CurrentPage, Model.Archive.TotalPages); n++)
{
    <li class="page-item @(Model.Archive.CurrentPage == n ? "active" : "")"><a class="page-link" href="@BlogLink()/page/@n">@n</a></li>
}
axunonb commented 2 years ago

I had the same issue and solved it in a similar way. See the sample below. The pager allows any odd number for the size. Guess, this is a common requirement. @tidyui Would you accept a PR on that

https://user-images.githubusercontent.com/10255664/170662981-c6466a5a-c642-4ac1-9d34-bf107b2b70c4.mp4

?