If you display your dashboards on devices with different screen sizes, for example, on mobiles, or tablets, you can adapt the font size of the displayed widgets.
The font size of most widget elements, such as the widget title, is automatically adjusted to the device size. But you can adjust the font size of all widget elements, such as the KPI values of a speedometer (see the example below).
By default, MashZone NextGen uses a predefined font size with the default size factor 1. To adjust the font size to different devices, MashZone NextGen multiplies the default font size by the following predefined device factors:
Device |
Device factor (Factors for media query) |
Font size, for example |
---|---|---|
Desktop (default) |
@default-factor: 1; min-width: 950px max-width: 1128px |
12px |
Mobile |
@small-device-factor: 0.8; max-width: 529px |
10px |
Tablet |
@medium-device-factor: 0.9; min-width: 530px) max-width: 949px |
11px |
Large devices |
@large-device-factor: 1.2; min-width: 1129px |
15px |
The font sizes are specified in the default.less template file. The file is located in the following directory.
<MashZone NextGen installation>\apache-tomcat\webapps\mashzone\hub\dashboard\assets\custom-look-and-feel\dashboard
Example
You want to specify the font sizes for the KPI values of a speedometer. The font sizes for mobiles and tables are based on the predefined font size font-big. Font-big is set as default size for the widget element here.
@speedometer-kpi-value-font-size: @font-big;
@speedometer-kpi-value-font-size-mobile: ceil(@speedometer-kpi-value-font-size * @small-device-factor);
@speedometer-kpi-value-font-size-tab: ceil(@speedometer-kpi-value-font-size * @medium-device-factor);
@speedometer-kpi-value-font-array: @speedometer-kpi-value-font-size-mobile @speedometer-kpi-value-font-size-tab;
Procedure
For example:
@speedometer-kpi-value-font-size: @font-big;
For example:
@speedometer-kpi-value-font-size-mobile: ceil(@speedometer-kpi-value-font-size * @small-device-factor);
@speedometer-kpi-value-font-size-tab: ceil(@speedometer-kpi-value-font-size * @medium-device-factor);
For example:
@speedometer-kpi-value-font-array: @speedometer-kpi-value-font-size-mobile @speedometer-kpi-value-font-size-tab;
<MashZone NextGen installation>\apache-tomcat\webapps\mashzone\hub\dashboard\assets\custom-look-and-feel\dashboard
You settings are applied.