| 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.
Widgets
Summary
A widget (Wi(ndow) + (Ga)dget) helps the user to complete specific tasks. To provide the right support for each task, we build each widget individually using existing elements and utils. With the flexibility, we always focus on the consistency of basic elements to create a coherent layout for the user.
Related pages
Frequently used widgets
Highlighted widget
To highlight special information more clearly within the widget column, we use an alert. The widget should always be placed first and never in combination with any other alert to give it more focus.
Actually I am an alert ;)
Unlike all other widgets, this one is not based on the .wui-bs-panel but on a .wui-bs-alert.
You can find more information about alerts at styleguide/alert/
<div class="wui-bs-alert wui-bs-alert--highlight">
<ul class="wui-fa-list">
<li>
<span class="wui-fa-list__fa-bullet">
<i class="fas fa-traffic-cone"></i>
</span>
<p><strong>Actually this is an alert ;)</strong></p>
<p class="m-b-0">Unlike all other widgets, this one is not based on the <span
class="wsg-code--class">.wui-bs-panel</span>
but on a <span class="wsg-code--class">.wui-bs-alert</span>.<br>
You can find more information about alerts at <a href="/next/css/alert/" class="alert-link"
target="_blank">styleguide/alert/</a>
</p>
</li>
</ul>
</div>
Simple text widget
The widget in this example is based on the .wui-bs-panel and contains a simple heading, text, and an unordered list. At the same time, it can also be the starting point for many other, more complex widgets.
Simple text widget
Headline in widget
Prow scuttle parrel ho shrouds spirits boom. Pinnace holystone quarter crow's nest nipperkin hempen halter
- Deadlights jack lad schooner scallywag
- Shiver me timbers to go on account lookout
<div class="wui-bs-panel">
<div class="panel-heading">
<h2 class="panel-title text--overflow-ellipsis">Simple text widget</h2>
</div>
<div class="panel-body">
<p><strong>Headline in widget</strong></p>
<p>Prow scuttle parrel ho shrouds spirits boom. Pinnace
holystone quarter crow's nest nipperkin hempen halter</p>
<ul class="wui-list--left-aligned m-b-0">
<li>Deadlights jack lad schooner scallywag</li>
<li>Shiver me timbers to go on account lookout</li>
</ul>
</div>
</div>
Validation widget (flashy)
The validation widget always informs the user about the status of the current task. With the flashy version of this widget, we want to "motivate to take action", "mitigate frustration and errors", and "attract attention" familiar with the reasons why we use Empty State Images (styleguide/feedback)
Validation widget (flashy)
Congratulations
- Everything runs as expected. You are doing really good.
<div class="wui-bs-panel">
<div class="panel-heading">
<h2 class="panel-title text--overflow-ellipsis">
Validation widget (flashy)
</h2>
</div>
<div class="panel-body">
<div class="display--table w-full">
<div class="display--table-cell v-align--middle text--center w-1/3">
<div class="wui-image">
<img src="https://cdn.wescale.com/wescale/wui/images/cta-feedback/aim-hit.svg"
style="max-width: 120px;">
</div>
</div>
<div class="display--table-cell v-align--middle p-l-10 w-2/3">
<p>
<strong>
Congratulations
</strong>
</p>
<ul class="wui-fa-list wui-fa-list--left-aligned">
<li>
<span class="wui-fa-list__fa-bullet">
<i class="fas fa-check wui-color--success"></i>
</span>
Everything runs as expected. You are doing really well.
</li>
</ul>
</div>
</div>
</div>
</div>
Validation widget (focused)
The validation widget always informs the user about the status of the current task. With this widget´s focused version, we want to provide as much information as possible in a clear and structured way. This widget, with its rather high information content, is mainly used in the management area.
Validation widget (focused)
During validation, the loading indicator is displayed in the panel-header. Depending on the status, one of the following icons is used in that place.
- far fa-check for success ()
- fas fa-exclamation-triangle for failure ()
<div class="wui-bs-panel">
<div class="panel-heading">
<i class="fad fa-spinner-third fa-spin display--block pull-right line-height--controls"></i>
<h2 class="panel-title text--overflow-ellipsis p-r-15">
Validation widget (focused)
</h2>
</div>
<div class="panel-body">
<p>During validation, the loading indicator is displayed in the panel-header. Depending on the
status, one of the following icons is displayed in that place.</p>
<ul class="wui-list--left-aligned">
<li><span class="wsg-code--class">far fa-check</span> for success (<i
class="far fa-check wui-color--success"></i>)</li>
<li>
<span class="wsg-code--class">fas fa-exclamation-triangle</span> for failure (<i
class="fas fa-exclamation-triangle wui-color--danger"></i>)
</li>
</ul>
</div>
</div>
1/3 - 2/3 widget
In the nature of widgets, they display very different contents and thus also look very different. However, to keep a nice and neat overview, we limit it to two basic layouts. In addition to single-column widgets, there are - as in this example - widgets with a 1/3 - 2/3 split. This widget in turn can serve as a starting point for other, more complex widgets.
Your contact (3)
John Doe
- mail-me@wescale.com
- +49-(0)1234 567 8910
- Mon - Fri, 9:00 AM - 6:00 PM
<div class="wui-bs-panel">
<div class="panel-heading">
<ul role="navigation" aria-label="quick table pagination"
class="panel-heading__pagination wui-pagination pull-right">
<li class="wui-pagination__item wui-pagination__item--disabled">
<a aria-label="Previous">
<i aria-hidden="true" class="fa fa-chevron-left"></i>
</a>
</li>
<li class="wui-pagination__item">
<a aria-label="Next">
<i aria-hidden="true" class="fa fa-chevron-right"></i>
</a>
</li>
</ul>
<h2 class="panel-title text--overflow-ellipsis">
Your contact (3)
</h2>
</div>
<div class="panel-body">
<div class="display--table w-full">
<div class="display--table-cell v-align--middle text--center w-1/3">
<div class="wui-appicon2 wui-appicon2--lg">
<div class="wui-image wui-image--content-fit">
<img src="/next/assets/images/avatar.png">
</div>
</div>
<p class="m-t-5 m-b-0"><strong>John Doe</strong></p>
</div>
<div class="display--table-cell v-align--middle p-l-10 w-2/3">
<ul class="wui-fa-list wui-fa-list--left-aligned m-b-0">
<li>
<span class="wui-fa-list__fa-bullet">
<i class="far fa-envelope"></i>
</span>
<a href="mailto:#">mail-me@wescale.com</a>
</li>
<li>
<span class="wui-fa-list__fa-bullet">
<i class="far fa-phone"></i>
</span>
<a href="tel:1234 567 8910">+49-(0)1234 567 8910</a>
</li>
<li>
<span class="wui-fa-list__fa-bullet">
<i class="far fa-clock"></i>
</span>
Mon - Fri, 9:00 AM - 6:00 PM
</li>
</ul>
</div>
</div>
</div>
</div>
Scrollable widget
This widget is rather complex. Nevertheless, it can be built using existing elements as well as utils. Moreover, this widget has some features that can be used with other widgets as well. In this case, the widget has a .panel-footer and is scrollable.
Since the scrollable container´s height depends heavily on the use case, it is set individually in the app CSS. If possible, the height should be set so that one of the items appears in the bleed. Among other things, this gives the user an additional clue that scrolling is possible at this point. If - as in this example - there are more items than can be seen at first glance, there is usually an additional indicator about the total number of items in the headline (this also applies to pageable widgets).
Scrollable widget (4)
<div class="wui-bs-panel">
<div class="panel-heading">
<h2 class="panel-title text--overflow-ellipsis">Scrollable widget (4)</h2>
</div>
<div class="panel-body p-b-0 h-max-350">
<a href="#" class="">
<div class="p-10 m-b-10 wui-bs-alert wui-bs-alert--grapes">
<div class="display--table w-full">
<div class="display--table-cell w-3/4">
<span title="Draft" class="m-b-5 wui-bg-color--grapes wui-label">
wui-label
</span>
<br>
<strong>
--grapes
</strong>
<span> color for label and alert to indicate state</span>
</div>
<div class="display--table-cell w-1/4 text--right v-align--bottom text--no-wrap p-l-10">
1.00 USD
</div>
</div>
</div>
</a>
<a href="#" class="">
<div class="p-10 m-b-10 wui-bs-alert wui-bs-alert--peach">
<div class="display--table w-full">
<div class="display--table-cell w-3/4">
<span title="Quotation expired" class="m-b-5 wui-bg-color--peach wui-label">
wui-label
</span>
<br>
<strong>
--peach
</strong>
<span>
color for label and alert to indicate state
</span>
</div>
<div class="display--table-cell w-1/4 text--right v-align--bottom text--no-wrap p-l-10">
1.50 USD
</div>
</div>
</div>
</a>
<a href="#" class="">
<div class="p-10 m-b-10 wui-bs-alert wui-bs-alert--blueberry">
<div class="display--table w-full">
<div class="display--table-cell w-3/4">
<span title="Draft" class="m-b-5 wui-bg-color--blueberry wui-label">
wui-label
</span>
<br>
<strong>
--blueberry
</strong>
<span>color for label and alert to indicate state</span>
</div>
<div class="display--table-cell w-1/4 text--right v-align--bottom text--no-wrap p-l-10">
1.20 USD
</div>
</div>
</div>
</a>
<a href="#" class="">
<div class="p-10 m-b-10 wui-bs-alert wui-bs-alert--yangmei">
<div class="display--table w-full">
<div class="display--table-cell w-3/4">
<span title="Draft" class="m-b-5 wui-bg-color--yangmei wui-label">
wui-label
</span>
<br>
<strong>
--yangmei
</strong>
<span>color for label and alert to indicate state</span>
</div>
<div class="display--table-cell w-1/4 text--right v-align--bottom text--no-wrap p-l-10">
3.50 USD
</div>
</div>
</div>
</a>
</div>
<div class="panel-footer text--right">
<a href="#" class="">Show in overview</a>
</div>
</div>
Alignment in widget
Another example of a widget based on utils and other wui elements can be seen here. If the text is preceded by an element, such as icons or a label, it should always have the same width. This way we can make sure that the text of the different rows is not misaligned. To avoid drawing the user's focus too much to the buttons or the widget itself, we use very subtle buttons with the modifiers .wui-btn--default, .wui-btn--outline and .wui-btn--sm.
Alignment in widget
<div class="wui-bs-panel">
<div class="panel-heading">
<ul role="navigation" aria-label="quick table pagination"
class="panel-heading__pagination wui-pagination pull-right">
<li class="wui-pagination__item wui-pagination__item--disabled">
<a aria-label="Previous">
<i aria-hidden="true" class="fa fa-chevron-left"></i>
</a>
</li>
<li class="wui-pagination__item">
<a aria-label="Next">
<i aria-hidden="true" class="fa fa-chevron-right"></i>
</a>
</li>
</ul>
<h2 class="panel-title text--overflow-ellipsis">Alignment in widget</h2>
</div>
<div class="panel-body">
<div class="display--flex m-b-10" style="align-items: center;">
<div>
<span class="wui-label wui-label--percentage">
84%
</span>
</div>
<div class="text--overflow-ellipsis w-full p-x-10">
Some text here that gets truncated by overflow ellipsis if it is to long for one row.
</div>
<div>
<button class="wui-btn wui-btn--default wui-btn--outline wui-btn--sm">Use</button>
</div>
</div>
<div class="display--flex m-b-10" style="align-items: center;">
<div>
<span class="wui-label wui-label--percentage wui-bg-color--gray-60">
11%
</span>
</div>
<div class="text--overflow-ellipsis w-full p-x-10">
Some text here
</div>
<div>
<button class="wui-btn wui-btn--default wui-btn--outline wui-btn--sm">Use</button>
</div>
</div>
<div class="display--flex" style="align-items: center;">
<div>
<span class="wui-label wui-label--percentage wui-bg-color--gray-60">
2%
</span>
</div>
<div class="text--overflow-ellipsis w-full p-x-10">
Some text here
</div>
<div>
<button class="wui-btn wui-btn--default wui-btn--outline wui-btn--sm">Use</button>
</div>
</div>
</div>
</div>