Carlie Bradshaw , Asaf Ben-Oved, Shani Laendler (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
...
A unified list of system notifications and alerts can be accessed from the header bar. Notifications can be generated by any product within the suite.
See /wiki/spaces/UserExp/pages/1970119523 Notifications for more information on the behavior of notifications.
...
States
State | Image | Details |
|---|---|---|
Regular |  When there are no unread notifications: the grey bell icon is shown. |
|
Hover |  | |
Active |  |
Interaction
Top Navigation mode
Clicking on the bell icon will open the /wiki/spaces/UserExp/pages/1970119523 Notifications menu.
Internal logic
When there are over 99 items in the notification menu, the count should read 99+.
...
For more information, see the general Responsive Design guidelines.
Responsive guidelines
The VerinTop has been designed at 1366 px width. As the screen width changes, it the VerinTop should respond based on the number and length of menu items , in both 1st and 2nd level navigation.
The space between menu items should not be adjusted at any width.
Each menu item will have 5 px the same padding either side of the label. The selection highlight should extend across this padding.
1st level menu items will have an additional 20 px spacing between them.and 2nd level menu items will have an additional 10 px consistent spacing between them.
Wide screens
...
 |
Where the screen size is wide enough to comfortably show everything contained within the VerinTop:
...
a More… option should be added on the right-hand side.
clicking More… will open a drop-down menu containing the remaining menu items.
the same hover and selected states from the main menu should be used for menu items in the drop-down.
Example at 1281 px:
 |
  |
 |
Where 1st level navigation does not fit within the screen width, even after line wrapping:
The entire menu should be replaced by a menu icon button ⋮.
When the icon button is clicked, a drop-down menu will open.
1st level menu items will be shown on the left.
When a 1st level menu item is hovered over or clicked, the related 2nd level menu items will be shown on the right.
When a 2nd level menu item is selected:
the menu will close.
the new page will be shown in the workspace.
When the menu is first opened, the currently-selected 1st level and 2nd level menu items should be shown by default.
The current selection should be shown at both levels.
A hover state should be shown for all menu items on hover (unless using a touch device).
Where possible, the selected page will be shown next to the menu icon button. This should include both 1st and 2nd levels.
...
Current selection |  |
Hover |  |
For more information about responsive design for mobile, please contact the UX team.
...
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
...