Option to revert page navigation buttons to top of page

[CaptainLibrary]

Describe the feature you'd like

With v0.29.1 the page navigation button is pinned to the bottom of the page when viewing scenes / performers / studios and so on. It's always present on the page, which is convenient because the user can see what page they're on and how to navigate to the first/previous/next/last page, even when they're in the middle of that page. However, from a presentation point of view, it can get lost among the scene thumbnails etc. unless you fully scroll to the bottom of the page.

I personally liked it when I was able to navigate between pages from the top of the page, right where the filter and sort buttons are, and subsequently the navigation buttons were always visible against a plain background. It felt more fluent whether navigating with mouse or touch. Would you be able to make this change optional in future updates so that I could restore the page navigation buttons to the top of the page?

Describe the benefits this would bring to existing users

Coherent flow to filtering, sorting and navigating pages - at the moment the filter and sort are at the top of the page while the page navigation is at the bottom, which doesn't feel as seamless as before when navigating with mouse or touch.

Is there an existing way to achieve this goal?

No - at the moment, the page navigation buttons default to being at the bottom of the page.

Have you searched for an existing open/closed issue?

• I have searched for existing issues and none cover the core request of my proposal

Additional context

No response

[bluecat533st]

I fully agree with @CaptainLibrary when viewing on a desktop screen. However, when viewing on my mobile, I like the new placement of the page controls at the bottom as it is easier to reach with the thumb / one handed. (On the mobile screen it also does not get lost, as it is relatively large compared to the rest due to the smaller screen.)

One can use below custom css (Interface -> Custom CSS -> Edit) to move the page controls to the very top, just between the navigation bar and the filter tool bar. I added the min-width: 1100px condition to apply the css only on my desktop screen. It works fine for me, but no guarantees about unwanted side effects (I could not spot any so far). The page drop down list is a bit displaced to the right (when it is opened/not hidden), but personally I do not use that. And as always with custom CSS: future updates of the stashapp might stop this from working properly.

NB: I also tried to apply the below css on my mobile (so without the min-width condition), but when in vertical orientation the navigation bar of Stashapp is hidden and then the tool bar and page controls sit too low on the top of the page. (I do not want to change the behaviour on my mobile anyways, so I did not try any further. Someone with proper css skills can probably get this working as well.)

NB2: One can probably tweak the top and gap values to get it perfect to the pixel, but I am satisfied.

/* Scenes: page controls to top on desktop screen */
@media all and (min-width: 1100px) {
/* make containing div flex */
.sidebar-pane > div:nth-child(2) {
  display: flex;
  flex-direction: column;
}

/* make pagination-footer 1st */
.pagination-footer {
  order: -1;
}

/* adjust pagination-footer to make it stick and span whole width */
.pagination-footer {
  background-color: #202b33;
  box-sizing: border-box;  
  display:flex;
  flex-wrap: nowrap;
  gap:1rem;
  height:30px;
  position: sticky;
  top: 48px;
  width: 100%;
  z-index: 10;  
}

/* move toolbar down */
.scene-list-toolbar.filtered-list-toolbar {
  top:78px;
}  
}
/* END: Scenes: page controls to top on desktop screen */

[WithoutPants]

Resolved as part of #6322.