Page MenuHomePhabricator

Special:Notifications - make the pagination controls sticky
Closed, ResolvedPublic

Description

Split off T129363: Pagination for the Notification Page

  • The header (where the pagination controls are) will become sticky as the user scrolls. That allows to keep the navigation controls at hand if needed:

notif-page-mark-read-sticky-header.png (1×1 px, 175 KB)

Event Timeline

@Pginer-WMF @jmatazzoni Once the pagination controls on the top are sticky, do we still need the bottom ones? IIRC those were only put in so that you wouldn't have to scroll back to the top.

Change 313613 had a related patch set uploaded (by Kmuthu):
Make notifications top toolbar controls sticky

https://gerrit.wikimedia.org/r/313613

Change 313613 merged by jenkins-bot:
Make notifications top toolbar controls sticky

https://gerrit.wikimedia.org/r/313613

@Pginer-WMF @jmatazzoni Once the pagination controls on the top are sticky, do we still need the bottom ones? IIRC those were only put in so that you wouldn't have to scroll back to the top.

With the sticky header, having pagination controls on top should be enough. Having them duplicated at the bottom is not a problem, but for simplicity I'd prefer to remove the bottom ones.

@Pginer-WMF @jmatazzoni Once the pagination controls on the top are sticky, do we still need the bottom ones? IIRC those were only put in so that you wouldn't have to scroll back to the top.

With the sticky header, having pagination controls on top should be enough. Having them duplicated at the bottom is not a problem, but for simplicity I'd prefer to remove the bottom ones.

Moving back to In Development for that. Note that we should only hide the bottom pagination controls when JS is available: in the no-JS case we should still have them, because the sticky feature requires JS.

Change 315719 had a related patch set uploaded (by Kmuthu):
Remove notifications bottom controls

https://gerrit.wikimedia.org/r/315719

Change 315719 merged by jenkins-bot:
Remove notifications bottom controls

https://gerrit.wikimedia.org/r/315719

Checked in betalabs.

The header is sticky, but in the sticky state there should be a shadow to clarify the relationship between the layers as illustrated in the mockup. I included the CSS code that can be added (only to the sticky state) to achieve this:

.mw-echo-ui-notificationsInboxWidget-main-toolbar-affixed {
    ...
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.1);
    ...
}

Change 319764 had a related patch set uploaded (by Kmuthu):
Add shadow to the notifications top toolbar

https://gerrit.wikimedia.org/r/319764

Change 319764 merged by jenkins-bot:
Add shadow to the notifications top toolbar

https://gerrit.wikimedia.org/r/319764

Re-checked for the fix.
Presently mw-echo-ui-notificationsInboxWidget-main-toolbar-affixed has the following:

notificationsInboxWidget-main-toolbar-affixed {
    position: fixed;
    z-index: 2;
    top: 0;
    background: #fff;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.1);

QA recommendation: Resolve.