| 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.
Tables
Summary
Because of its very individual content, there are a bunch of different modifiers to adjust the table cells. To keep the consistency try to keep as much of the modifiers as possible. Each table cell is listed here with a small description. To see them in the wild click here.
- Table List-view. Tables are mainly to be found in the management area. For a certain group of users, such as managers, the tables provide the opportunity to edit, create, delete, etc. content. The list view, on the other hand, is used to display existing items for users, e.g. in the form of search results or app content.
- Structure. A .wui-bs-table is usually wrapped into a .wui-bs-panel with a .panel-heading and a .panel-footer
- Row height. A table row usually does not contain more than two lines of text.
- Table Head. Under certain circumstances there may be icons in the table head.
- Sorting. Clicking on .wui-th-sortable sorts the contents of the respective column in ascending () or descending order (). The first click triggers an ascending order for names and numbers (a-z, 1-9) and a descending order for dates (now - 2 days ago).
- Default setup. When you come to a page with an overview-table, the search field in the sticky-header is focused and the table is sorted. Whether it is sorted in ascending or descending order and which column is selected varies from case to case. Often it makes sense to sort according to the "last-updated-column" so that the user always sees a new item at the top of the table after creating it.
- Breakpoints. The content of tables as well as the number of TDs varies a lot from table to table. This makes it very tricky to set fixed breakpoints that make sense for every table. However, the following rules of thumb should be considered.
On screens all th-elements should be fully visible. To do this, the widths of the bootstrap cols can be used inside the respective TH.
On laptops If necessary, first columns can be hidden. In order to react flexibly to the large gap between .col-md and .col-lg, a further class can be added to the app CSS in form of "hidden-lg-xx", where xx stands for the needed screen size. (see table examples)
On mobile devices less important columns are hidden by the classes .hidden-md/ -sm /-xs
Checkboxes
The checkboxes can be used to select several columns within a table. Therefore the checkboxes always appear with the corresponding drop-down for bulk actions. If there is no need for bulk actions in the particular table, the content of the next column moves to the first column.
<td class="wui-td wui-td--content-fit">
<div class="wui-checkbox wui-checkbox--inline wui-checkbox--no-text">
<input id="checkbox-ID" type="checkbox">
<label for="checkbox-3"> </label>
</div>
</td>
Status |
|---|
| Label default |
| Label secondary |
| Label inactive |
Labels
Labels are used, among other things, to display the status. Different statuses have different colors. For a Boolean status, the colors are #078390 (active) and #999999 (inactive).
Note that labels are truncated after a length of 150px (resp. 120px for smaller screens). When labels are placed one below the other, they all have the same length according to the longest. (see: Labels)
<td class="wui-td wui-td--label">
<span class="wui-label wui-td__label" title="Title of label">
Label default
</span>
</td>
Numbers |
|---|
| 27 |
| 4 |
Numbers
Numbers - whether they are in a label or not - are centered by using the class .text--center
An exception are numbers where it makes sense to make a sum out of them (e.g. prices). In this case, the numbers are always aligned to the right. The contents of the table head is aligned according to the table cells.
<td class="text--center">
<span class="wui-label wui-label--number" title="Title of label">
27
</span>
</td>
Numbers + text |
|---|
1 / 32 |
5 / 32 |
Numbers + text
Sometimes number labels come in combination with text. They will be wrapped by .text--no-wrap so that the table-cell is always wide enough to have label and text next to each other.
To set both elements inline we use the wui-inline-list. (see: Spacing)
<td>
<div class="text--no-wrap wui-inline-list wui-inline-list--md">
<div class="wui-inline-list__item">
<span class="wui-label wui-label--number">5</span>
</div>
<div class="wui-inline-list__item">/ 32</div>
</div>
</td>
Monetary amount |
|---|
| 2,652,700.00 EUR |
| 52,650.90 EUR |
| 305,058,184,501,650.00 PLN |
Monetary amount
In order to have a better overview of prices, these are wrapped in one line. They have a minimum width so that at least 8 digits are displayed. In addition, prices are always aligned to the right and they are most likely at the last column in the table. To display the currency we use the abbreviation of the international currency code (consisting of 3 letters) and we format according to the CLDR standard.
<td class="wui-td wui-td--monetary-amount" title="52,650.90 EUR">
<span>52,650.90 EUR</span>
</td>
Name |
|---|
| Single-line text gets truncated within this table-cell |
| See what happens with this text when reducing the size of the browser window Another single-line text that will be truncated ;) |
Single-line text
By default table cells are expanded by the containing texts. When using .wui-td--max-lines-1 and .wui-td__text, the text length is determined by the external width of the table-cell or the given width in the TH (e.g. by .col-lg-4).
It is also valid to have two single-line texts in one table cell.
<td class="wui-td wui-td--max-lines-1">
<span class="wui-td__text">
Text of table cell
</span>
</td>
<td class="wui-td wui-td--max-lines-1">
<span class="wui-td__text">
See what happens with this text when reducing the size of the browser window
</span>
<span class="wui-td__text">
Another single-line text that will be truncated ;)
</span>
</td>
Two-line text
To prevent the table rows from becoming too high, the text within table cells is limited to two lines by the classes .wui-td--max-lines-2 and .wui-td__text.
There is one exception to this rule: an ID, for example, would not be truncated. First, because the completeness of this information is extremely important. And second, it could be that this kind of information is further processed, which means that it should be markable and copyable. In this case, the entire table row becomes as high as necessary. A suitable min- width should then be assigned to the respective table cell.
<td class="wui-td wui-td--max-lines-2">
<span class="wui-td__text text--break-all">
<a href="#" title="Name of object">
Text of table cell
</a>
</span>
</td>
Last updated |
|---|
| 6 month ago Apr 27, 2020, 6:34:21 AM |
| 6 month ago Apr 27, 2020, 6:34:21 AM |
Two lined date
The date in tables is always set up as follows: 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.
Just like the text, the date should not exceed two lines. In addition, the date should not be truncated. This is done using the class .text--no-wrap. If there are too many columns in an overview table, this column is one of those that should be hidden on smaller screens.
For a more detailed description of the different styles see:
<td class="text--no-wrap hidden-md hidden-sm hidden-xs" title="Monday, April 27, 2020 at 6:34:21 AM GMT">
6 month ago
<br />Apr 27, 2020, 6:34:21 AM
</td>
Last updated by |
|---|
| James whose name is truncated Berry |
| Juliane Becker |
Users
The user appicon and the name of the user are always next to each other. The length of the name is relative to the width of the table cell. If the table cell becomes too narrow, the name is truncated by overflow-ellipsis. The column for "Last updated by" also belongs to the columns that are hidden for smaller devices.
<td>
<span title="James whose name is truncated Berry" class="wui-td-user">
<img src="/next/assets/images/avatar.png" class="img-circle wui-td-user__image">
<span class="wui-td-user__name text--overflow-ellipsis">James whose name is truncated Berry</span>
</span>
</td>
Buttons
If there are buttons in a table, they are always in the last column. For button texts of different lengths, the width of the shorter buttons is always adjusted to the width of the longest button, so that all buttons have the same length.
The table cell of buttons is never wider than the button itself, which is given by the class .wui-td--content-fit
Table with subrows | ||
|---|---|---|
| TD 1 | TD 2 | |
| TD 1 | TD 2 | |
| TD 1 | TD 2 | |
| TD 1 | TD 2 | |
Subrows
If a TR is dependent on another TR, this can be represented by a subrow. This occurs, for example, in the shopping cart for required articles. Since each TR can contain a subrow, it is important that the starting point contains the modifier .wui-subrow--first-element
<tr class="wui-subrow wui-subrow--first-element">
<td class="wui-subrow__arrow-td">
<i class="wui-subrow__arrow fas fa-level-up-alt fa-rotate-90"/>
</td>
<td>
TD 1
</td>
<td>
TD 2
</td>
</tr>
<tr class="wui-subrow">
<td class="wui-subrow__arrow-td">
<i class="wui-subrow__arrow fas fa-level-up-alt fa-rotate-90"/>
</td>
<td>
TD 1
</td>
<td>
TD 2
</td>
</tr>
Bookmarks |
|---|
| Default text (no truncation) |
| This element can also be combined with ".wui-td--max-lines-1" |
Bookmarks
To highlight items within a table with different colors we use .wui-td__bookmark.
These styles can also be used in combination with.wui-td--max-lines-1 or .wui-td--max-lines-2.
<td class="wui-td wui-td--bookmark">
<i class="fas fa-bookmark wui-td__bookmark wui-color--kiwano"></i>
Default text (no truncation)
</td>
Disabled table row | |
|---|---|
| One fine text | Another fine text |
| One fine text | Another fine text |
Disabled table rows
By setting the class .wui-tr--disabled, the respective table row will be grayed out. Please make sure that the contents of this table row must also be disabled. Perhaps links, buttons, checkboxes etc of the disabled row should no longer be clickable
<tr class="wui-tr wui-tr--disabled">
<td class="wui-td wui-td--max-lines-1">
<span class="wui-td__text">
One fine text
</span>
</td>
<td class="wui-td wui-td--max-lines-1">
<span class="wui-td__text">
Another fine text
</span>
</td>
</tr>
Table examples
| Status | Subject | |
|---|---|---|
| Active | This is a quite long title but don't worry it will be truncated at some point Second line is truncated as well | |
| Active with a pretty long name in it | Name There is always a line break |