5
| 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 |
1
John DoeDo you have any design-related questions or suggestions? We'd love to hear from you.
Please contact Wuiman to discuss your ideas.
Panel Sections
Summary
The wui-bs-panel element is one of the most elementary in wui. Its main purpose is to group different items and to separate them from each other. The panel element is based on Bootstrap and basically consists of a grey-shaded header and a bordered content area. Many wui-elements are based on the panel-section. These elements are described in detail on separate pages.
Panel header
Default header
- Headline. With 15px the panel headline is slightly bigger than the default font size in wescale.
- General struture. There should never be two consecutive headers. Each panel header includes a panel body or another kind of content, such as a wui-bs-table.
Page size setter (view 1-10 of xyz)
- Pagination. Whenever there is a pagination, the default headline is replaced by the "wui-page-size-setter".
- Placement. The pagination buttons are moved 5px to the right so that they have an equal padding to all sides by .panel-heading__pagination.
Header with button
- Dependency. The action of the button within a panel header refers exclusively to the content of the associated panel body.
- Placement. The button is moved 5px to the right so that it has an equal padding to all sides by .m-r--5.
Page size setter (view 1-10 of xyz)
- Dependency. Similar to the actions, the search or possible filters also refer exclusively to the associated panel body.
- Order. The order of possible elements in the panel header is always "Button - Filter - Search - Pagination"(LTR). All elements can (but do not have to) be there at the same time.
Panel body
Full-size with form elements
Reduced-size with form elements
Widget e.g.
More information about the different form elements can be found here styleguide/form/
Panel body with tiles
More information about the different types of content-tiles can be found here styleguide/content-tile/
Audit logs
Full-size with audit logs
Date
Message
.col-4 .col-lg-3 .col-xlg-2
.col-8 .col-lg-9 .col-xlg-10
Mon, Apr 27, 1987, 5:05 PM
The length of the date with this formatting is always approximately the same. To prevent it from wrapping to the next line, we set several specific col-classes here.
Subnavigation e.g.
Reduced-size with audit logs
Date
Message
.col-4 .col-xlg-3
.col-8 .col-xlg-9