Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Initial widget order

After a new widget is added

Image RemovedImage AddedImage RemovedImage Added

Interaction

  • Each widget may include a maximize option to show the content in a larger space such as a Popup or separate page.

  • Scroll:

    • Static layout and Customisable auto-layout dashboards should not have a master vertical scroll, where possible.

    • Customisable manual layout dashboards may have a vertical scroll where there are more rows than can be shown.

    • Dashboards should never have a horizontal scroll.

...

Responsive design

Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.

  • As the width of a dashboard changes, so will the widths of the individual widgets. Each one should continue to take up the same proportion of the available width.

  • The widget heights will not respond relative to widget width as the dashboard is narrowed.

  • All dashboards may have a master vertical scroll below a minimum width.

  • Dashboards should have additional breakpoints, which may result in additional rows and vertical scroll. For example:

    • a minimum-width breakpoint, below which all widgets will be shown at full width, regardless of their original size. A vertical scroll will be included.

    • additional breakpoints where either:

      • (Auto-layout) the maximum number of widgets permitted on each row is decreased, or

      • (Manual layout) the proportion of the dashboard width that each widget size uses is automatically increased. For example, S widgets may each increase to 1/2 width, 6 columns.

  • The spacing between widgets may also be reduced at each breakpoint.

  • The original widget sizes should always be retained, so the original layout can be restored if the dashboard width is increased above a breakpoint again.

...

Zeplin link

Screen thumbnail

https://zpl.io/a7rlGdMB1e8WxA

Image RemovedImage Added

Code

...