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:

Current state:

Current state with some of the layout guidelines on top:


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

Mooeypoo claimed this task.May 31 2016, 1:09 AM
Mooeypoo moved this task from Untriaged to Needs Review on the Collab-Team-2016-Apr-Jun-Q4 board.

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

jmatazzoni closed this task as Resolved.Jun 1 2016, 7:23 PM
jmatazzoni reopened this task as Open.Jun 1 2016, 8:22 PM
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:

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.

jmatazzoni closed this task as Resolved.Jul 5 2016, 10:55 PM