| New Styleguide page for "Loading" | |
| Introduce CDN links to all images | |
| Add Section with index-tiles to branding page | |
| New Styleguide page for "Branding" | |
FC | Extend ".wui-bs-alert" with all fruit-color-variantes |
| Font-Awesome has been updated to version 5.12.0 | |
Ut | "Utils" has been extended with opacity, heights and colors |
Do you have any design-related questions or suggestions? We'd love to hear from you.
Please contact Wuiman to discuss your ideas.
Data Formats
Summary
When displaying the date and/or time, we follow the standards of the CLDR. (CLDR - Unicode Common Locale Data Repository)
- 4 styles. For both date and time, there are four different styles with different levels of detail.
- Styles. Don't mix styles in time + date combinations.
- Tooltip. Each time (whether absolute or relative) comes with a title attribute. This always contains the style full, so that the user gets weekday and time zone information.
Date and time format
Localized date, time and date-time formatting is not trivial. Depending on the country or language, there are different formats, habits or exceptions. Therefore, in wescale we follow the standard of CLDR for numerical and for linguistic notations. Basically, we distinguish four different styles (short, medium, long, full), each differing in its level of detail resp. length.
| Style | Date | Time | Date & Time |
|---|---|---|---|
| short | 3/19/21 | 8:23 AM | 3/19/21, 8:23 AM |
| medium (default) | Mar 19, 2021 | 8:23:27 AM | Mar 19, 2021, 8:23:27 AM |
| long | March 19, 2021 | 8:23:27 AM GMT | March 19, 2021 at 8:23:27 AM GMT |
| full | Friday, March 19, 2021 | 8:23:27 AM GMT | Friday, March 19, 2021 at 8:23:27 AM GMT |
WUI use cases
In addition to the absolute time, the relative time may also be of interest to the user. The timestamp can be in the past as well as in the future. Two years ago, last month, 3 minutes ago, tomorrow, in two weeks, ... - to name just a few of the possible values. These are also dependent on the user's language. Country specific words as well as pluralization of words is set automagically by the CLDR standards, so you don't have to worry about i18n and t10n here.
The following examples and use cases show how date and time can be combined with relative time in WUI.
Mar 19, 2021, 8:23:27 AM
Date & Time
Date and Time occurs very often as a combination. We use it, for example, in the audit logs to record when a certain event happened. Time and date are both displayed in our default (medium). The tooltip is in full style. So the user can - if needed - also display weekday and time zone information.
2 days ago
Mar 19, 2021, 8:23:27 AM
Date & Time in combination with relative time
We use this format very often in tables for the create or last updated date. It is always set up in the same way. The relative time, then a line break, then the date and time combination in style medium. Overall, there is a tooltip with the absolute time and date in full style.
08:50:21 .644
Time and milliseconds
The specification of milliseconds is in most cases completely irrelevant for the user. However, for technical dependencies, milliseconds can be decisive. In the support logs, for example, the time is therefore given in seconds and milliseconds.
Mar 19, 2021-Apr 19, 2021
Time range
With many time ranges, it is enough if they are accurate to the day. Here we use the date style medium without specifying a time. For the display of time ranges in tables, we use a separate column for the start and for the end value, so that sorting by both values is meaningful to the users.
7:16:25 PM Australian Eastern Daylight Time
Time zone
The time zone of a user is automatically set based on the respective user parameters. All times that a user sees within wescale are translated to hers/his local time (aka wall time). When someone from another time zone creates an item, you and your colleague will see different wall times - meaning the time that is displayed on each colleague's wall clock.
However, we cannot rely on wall-time for cross-time zone arrangements, like appointments. For these cases we use the Time format in full style. (For the page layout, it should always be taken into account that the display of timezones may be quite long)
More information about using and working with time zones can be found at www.w3.org/TR/timezone/
Punctuation and character setting
Summary
Small characters with big impact. This section is about punctuation and character setting. Depending on the context or language, different rules may apply to the same character. In terms of consistency, it sometimes gets even more tricky because in some cases different spellings can be correct at the same time. In order to be consistent across the platform, we use the German Duden as our single source of truth.
In general, of course, the country-specific rules for punctuation apply. However, if there is not "the one correct spelling", we transfer the rules from the Duden to the respective language.
(view 1-10 of 214)
Hyphen ( )
Based on the German language, there can be a space before and after a hyphen. However, the Duden recommends not to use spaces. Especially when displaying ranges, the advantage is that the numbers belonging together are grouped visually and can thus be better grasped as a unit.
‘…’ (en-GB)
“…” (en-US)
„…“ (de-DE)
« … » (fr-FR)
Quotes ( )
In our translations, we make sure that the country-specific quotation marks are used. The quotation marks in the example can also be found in other languages - but there are also others beyond that.