Page MenuHomePhabricator

Make notification styling on the Notifications Page closer to the ones in the panel
Closed, ResolvedPublic

Description

Notification items in the Notification Page don't seem to follow the layout guidelines used for the notifications in the Notification panel:

notif-layout-spacing-reference.png (158×502 px, 18 KB)

Current state:

Notifications Page- 2016-05-30 at 10.43.41.png (1×1 px, 174 KB)

Current state with some of the layout guidelines on top:

notif-page-layout.png (687×654 px, 82 KB)

Some aspects to adjust:

  • Icon size, and position.
  • "X" icon position.
  • Timestamp position.
  • Left margin adjustments.

Event Timeline

Change 291855 had a related patch set uploaded (by Mooeypoo):
Adjust styling for Special:Notification items

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

Change 291855 merged by jenkins-bot:
Adjust styling for Special:Notification items

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

Change 291962 had a related patch set uploaded (by Catrope):
Adjust styling for Special:Notification items

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

Change 291962 merged by jenkins-bot:
Adjust styling for Special:Notification items

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

Mentioned in SAL [2016-05-31T23:33:12Z] <dereckson@tin> Synchronized php-1.28.0-wmf.4/extensions/Echo/modules/styles/: Adjust styling for Special:Notification items (T136572, 1/2) (duration: 00m 30s)

Mentioned in SAL [2016-05-31T23:33:49Z] <dereckson@tin> Synchronized php-1.28.0-wmf.4/extensions/Echo/modules/ui/mw.echo.ui.NotificationItemWidget.js: Adjust styling for Special:Notification items (T136572, 2/2) (duration: 00m 24s)

Checked in betalabs.
Seems that the following suggestions have been implemented - @Pginer-WMF, please take a look.

Some aspects to adjust:
Icon size, and position.
"X" icon position.
Timestamp position.
Left margin adjustments.

    • Icons are larger
  • "X" icon and timestamp positions are adjusted to the left
  • left margin is more balanced

Screen Shot 2016-06-01 at 9.57.04 AM.png (157×858 px, 30 KB)

Screen Shot 2016-06-01 at 9.55.41 AM.png (703×1 px, 120 KB)

jmatazzoni added a subscriber: jmatazzoni.

Reopening this ticket so we can fix one more issue illustrated in the screenshot below. Namely, the right margin should be adjusted so that the text doesn't run underneath the mark as read controls:

Screen Shot 2016-06-01 at 1.18.02 PM.png (610×1 px, 153 KB)

Please see the description, above, for specs on what the margin should be.

Change 296843 had a related patch set uploaded (by Mooeypoo):
Pad the content so it doesn't stretch beyond the markread button

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

Change 296843 merged by jenkins-bot:
Pad the content so it doesn't stretch beyond the markread button

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

Checked in betalabs - the padding is there.

Screen Shot 2016-07-01 at 11.23.49 AM.png (173×1 px, 40 KB)