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.
Modal
When and how to use modals
- Trap focus. Keyboard navigation never leaves the modal. Underlying content is not reachable.
- Height. Regarding content. If there is to much content use pagination or scrollbar.
- Highlight modals by making the background darker ( #000 * 0.5).
- Width. Modals containing tasks use .modal-lg for more space.
- Closing. 4 ways to close a modal (x | esc | close-button | click anywhere else).
No one likes to be interrupted but sometimes it is necessary to get a response before the users can go on with their specific tasks. Therefore we use modals which appear on top of the content so that the user can get additional information without leaving the actual screen. To catch the user’s full attention the background is greyed out/ disabled.
The modal is handled as an independent context. It has an individual headline, a modal specific content and a primary action. For keyboard navigation this means that the focus remains in the modal when users press tab or shift + tab.
There are several options to leave the modal. Either by clicking the “x”, cancel, outside the modal or by pressing the esc key.
Various modals
Small modal
Small modals are usually used to highlight important information or to warn the user about a particular thing. The user's interaction possibilities are usually very limited. Usually (s)he has the choice to confirm or to reject the given information. Show me the small modal
<div class="wui-bs-modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close">
<i class="fa fa-times"></i>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body modal-body--has-sections">
<div class="modal-body__section">
<p>One fine body…</p>
</div>
</div>
<div class="modal-footer">
<div class="wui-inline-list pull-right">
<div class="wui-inline-list__item">
<a href="#" class="wui-btn wui-btn--link">Cancel</a>
</div>
<div class="wui-inline-list__item">
<a href="#" class="wui-btn wui-btn--primary">Primary action</a>
</div>
</div>
</div>
</div>
</div>
</div>
Big modal
Modals where users can complete one or multiple tasks have the additional class “modal-lg” in the outer div and a max-width of 900px. Show me the big modal
<div class="wui-bs-modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close">
<i class="fa fa-times"></i>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body modal-body--has-sections">
<div class="modal-body__section modal-body__section--filter clearfix">
<div class="wui-inline-list pull-right">
<div class="wui-inline-list__item">
<a href="#" class="wui-btn wui-btn--outline wui-btn--primary">New XYZ</a>
</div>
<div class="wui-inline-list__item">
<form class="wui-bs-form wui-bs-form--inline display--inline-block">
<div class="input-group hidden-xs hidden-sm">
<div class="wui-form-control-group wui-form-control-group--has-icon">
<input type="text" placeholder="A proper placeholder" autocomplete="off"
class="wui-form-control">
<span class="wui-form-control-icon">
<i class="fa fa-search"></i>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-body__section">
<p>One fine body…</p>
</div>
</div>
<div class="modal-footer">
<div class="wui-inline-list pull-left">
<div class="wui-inline-list__item">
<ul class="wui-pagination" role="navigation" aria-label="pagination">
<li class="wui-pagination__item wui-pagination__item--disabled">
<a href="#" aria-label="Previous">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
</li>
<li class="wui-pagination__item wui-pagination__item--active">
<a href="#">1</a>
</li>
<li class="wui-pagination__item">
<a href="#">2</a>
</li>
<li class="wui-pagination__item">
<a href="#">3</a>
</li>
<li class="wui-pagination__item">
<a href="#" aria-label="Next">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="wui-inline-list pull-right">
<div class="wui-inline-list__item">
<a href="#" class="wui-btn wui-btn--link">
Cancel
</a>
</div>
<div class="wui-inline-list__item">
<a href="#" class="wui-btn wui-btn--outline wui-btn--primary">Secondary action</a>
</div>
<div class="wui-inline-list__item">
<a class="wui-btn wui-btn--primary">
Primary button
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Modal with tiles
These modales are a prime example in case the user can select one or more elements. On Grid and Content tiles you will find all the information you need, to build this component. Show me the tile modal
<div role="dialog" tabindex="-1" class="wui-bs-modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close"><i
class="fa fa-times"></i></button>
<div class="page-size-setter pull-left"><span class="page-size-setter__range-display">
Content-Quellen (Ansicht 1-8 von 22)
</span>
<!---->
</div>
</div>
<div class="modal-body modal-body--has-sections">
<div class="modal-body__section modal-body__section--filter clearfix">
<div class="wui-inline-list pull-right">
<div class="wui-inline-list__item">
<div class="fake-input" style="max-width:260px; position:relative;">
<input class="form-control" placeholder="Filter placeholder">
<span style="position:absolute; right:7px; top:7px;">
<span class="fa fa-chevron-down" style="color:#888888;"></span>
</span>
</div>
</div>
<div class="wui-inline-list__item">
<div class="fake-search" style="max-width:250px; position:relative;">
<input class="form-control" placeholder="Search placeholder">
<span style="position:absolute; right:7px; top:4px;">
<span class="fa fa-search" style="color:#888888;"></span>
</span>
</div>
</div>
<div class="wui-inline-list__item">
<ul class="wui-pagination" role="navigation" aria-label="pagination">
<li class="wui-pagination__item wui-pagination__item--disabled">
<a href="#">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
</li>
<li class="wui-pagination__item">
<a href="#">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="modal-body__section p-0">
<div class="wui-grid wui-grid--sm">
<div class="wui-grid__item col-3">
<a class="unstyled" href="#">
wui-content-tile goes here
</a>
</div>
<div class="wui-grid__item col-3">
<a class="unstyled" href="#">
wui-content-tile goes here
</a>
</div>
<div class="wui-grid__item col-3">
<a class="unstyled" href="#">
wui-content-tile goes here
</a>
</div>
<div class="wui-grid__item col-3">
<a class="unstyled" href="#">
wui-content-tile goes here
</a>
</div>
<div class="wui-grid__item col-3">
<a class="unstyled" href="#">
wui-content-tile goes here
</a>
</div>
<div class="wui-grid__item col-3">
<a class="unstyled" href="#">
wui-content-tile goes here
</a>
</div>
<div class="wui-grid__item col-3">
<a class="unstyled" href="#">
wui-content-tile goes here
</a>
</div>
<div class="wui-grid__item col-3">
<a class="unstyled" href="#">
wui-content-tile goes here
</a>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="wui-inline-list pull-left">
<div class="wui-inline-list__item">
<ul class="wui-pagination" role="navigation" aria-label="pagination">
<li class="wui-pagination__item wui-pagination__item--disabled">
<a href="#" aria-label="Previous">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
</li>
<li class="wui-pagination__item wui-pagination__item--active">
<a href="#">1</a>
</li>
<li class="wui-pagination__item">
<a href="#">2</a>
</li>
<li class="wui-pagination__item">
<a href="#">3</a>
</li>
<li class="wui-pagination__item">
<a href="#" aria-label="Next">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
<div class="wui-inline-list__item">
<div class="fake-input" style="max-width:260px; position:relative;">
<input class="form-control" placeholder="Bulk placeholder">
<span style="position:absolute; right:7px; top:7px;">
<span class="fa fa-chevron-down" style="color:#888888;"></span>
</span>
</div>
</div>
</div>
<div class="wui-inline-list pull-right">
<div class="wui-inline-list__item">
<a href="#" class="wui-btn wui-btn--link">
Cancel
</a>
</div>
<div class="wui-inline-list__item">
<a class="wui-btn wui-btn--primary">
Primary button
</a>
</div>
</div>
</div>
</div>
</div>
</div>