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.
Facets
- Grid. The .wui-facet is always part of a grid. Make sure you use the modifier .wui-gird--sm and the right utils for paddings and margins.
- Collapsing. Every facet is collapsable.
- Combine multiple values. Within a facet, all filter values are linked with an "OR" logic. Two facets, on the other hand, are linked by an "AND" logic.
Multiple selection facet
- Search. Only facets with more than 8 items are searchable.
- Height. The section with the selected buckets is as high as it gets. The bottom section is usually high enough to fit 10 buckets, but this height may vary from case to case.
- Sorting. The buckets are sorted in descending order by number of hits.
- Checkboxes. Zero, one, or many filter values can be selected. These are linked to each other by means of the "OR" logic. Visually, this functionality is indicated by the use of checkboxes.
- Default selection. No checkbox is selected. Since no selection or restriction has been made yet, the resulting set includes all filter values.
<div class="row">
<div class="wui-grid wui-grid--sm p-l-5 p-0">
<div class="wui-grid__item">
<div class="wui-facet wui-bs-panel m-0">
<div class="panel-heading panel-heading--expandable">
<a
class="panel-heading__expansion-toggle unstyled clickable panel-heading__expansion-toggle--open"></a>
<button title="TODO" class="wui-facet__search-toggle wui-btn wui-btn--active">
<i class="fa fa-times"></i>
</button>
<h2 class="panel-title text--overflow-ellipsis">
Title of facet
</h2>
</div>
<div class="wui-facet__panel-body panel-body">
<!---->
<form class="wui-facet__search wui-bs-form">
<div class="wui-input-group">
<div class="form-control-group form-control-group--has-icon">
<input placeholder="Search for title of facet" type="text" autocomplete="off"
class="form-control">
<span class="form-control-icon">
<i class="fa fa-search"></i>
</span>
<!---->
</div>
</div>
</form>
<div class="wui-facet__buckets">
<div class="wui-checkbox">
<input type="checkbox" checked>
<label class="text--break-all">
Selected bucket
<span>(<span>52</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox" checked>
<label class="text--break-all">
Selected bucket
<span>(<span>45</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox" checked>
<label class="text--break-all">
Selected bucket
<span>(<span>32</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox" checked>
<label class="text--break-all">
Selected bucket
<span>(<span>27</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox" checked>
<label class="text--break-all">
Selected bucket
<span>(<span>11</span>)</span>
</label>
</div>
</div>
<hr class="wui-facet__divider">
<div class="unselected-buckets" style="max-height: 285px; overflow-y: auto;">
<div class="wui-facet__buckets">
<div class="wui-checkbox">
<input type="checkbox">
<label class="text--break-all">
Unselected bucket 1
<span>(<span>701</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox">
<label class="text--break-all">
Unselected bucket 2
<span>(<span>621</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox">
<label class="text--break-all">
Unselected bucket 3
<span>(<span>589</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox">
<label class="text--break-all">
Unselected bucket 4
<span>(<span>512</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox">
<label class="text--break-all">
Unselected bucket 5
<span>(<span>458</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox">
<label class="text--break-all">
Unselected bucket 6
<span>(<span>432</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox">
<label class="text--break-all">
Unselected bucket 7
<span>(<span>321</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox">
<label class="text--break-all">
Unselected bucket 8
<span>(<span>208</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox">
<label class="text--break-all">
Unselected bucket 9
<span>(<span>154</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox">
<label class="text--break-all">
Unselected bucket 10
<span>(<span>56</span>)</span>
</label>
</div>
<div class="wui-checkbox">
<input type="checkbox">
<label class="text--break-all">
Unselected bucket 11
<span>(<span>12</span>)</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Drilldown facet (single selection)
- Default item. This is how it looks if nothing is selected
- Another default item
- All material groups
- Information, communication and media technology (2809)
- Machine element, fixing, mounting (118,828)
- Photo camera, video camera (234)
- Webcam (223)
- Camera digital video camera (unclassified) (39)
- Video camera (digital) (9)
- Search. Unlike the other facets, this one is not searchable.
- Structure. This facet is basically a .wui-drilldown inside a .wui-panel
- Height. The facet is usually high enough to contain all items, so no scrolling is needed.
- Sorting. The items are sorted in descending order by number of hits.
<div class="row">
<div class="wui-grid wui-grid--sm p-l-5 p-0">
<div class="wui-grid__item">
<div class="wui-facet wui-bs-panel m-0">
<div class="panel-heading panel-heading--expandable">
<a href="#"
class="panel-heading__expansion-toggle panel-heading__expansion-toggle--open unstyled">
</a>
<h2 class="panel-title text--overflow-ellipsis">
Material groups
</h2>
</div>
<div class="wui-facet__panel-body panel-body">
<ul class="wui-drilldown">
<li class="wui-drilldown-default">
<ul>
<li class="wui-drilldown-default__item">Default item. This is how it looks if nothing is selected</li>
<li class="wui-drilldown-default__item">Another default item</li>
</ul>
</li>
<li class="wui-drilldown-previous">
<ul>
<li class="wui-drilldown-previous__item">
<div class="wui-drilldown-previous__toggle">
<i class="far fa-chevron-left"></i>
</div>
<div class="wui-drilldown-previous__label">
All material groups
</div>
</li>
<li class="wui-drilldown-previous__item">
<div class="wui-drilldown-previous__toggle">
<i class="far fa-chevron-left"></i>
</div>
<div class="wui-drilldown-previous__label">
Information, communication and media technology (2809)
</div>
</li>
<li class="wui-drilldown-previous__item">
<div class="wui-drilldown-previous__toggle">
<i class="far fa-chevron-left"></i>
</div>
<div class="wui-drilldown-previous__label">
Machine element, fixing, mounting (118,828)
</div>
</li>
</ul>
</li>
<li class="wui-drilldown-active">
<div class="wui-drilldown-active__label">
Photo camera, video camera (234)
</div>
<div class="wui-drilldown-active__check">
<i class="far fa-check"></i>
</div>
</li>
<li class="wui-drilldown-next">
<ul>
<li class="wui-drilldown-next__item">Webcam (223)</li>
<li class="wui-drilldown-next__item">Camera digital video camera (unclassified)
(39)
</li>
<li class="wui-drilldown-next__item">Video camera (digital) (9)</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Single selection facet
- Search. The list of filter values should not be too long. For the rather short list of options a search is usually not needed.
- Sorting. In this case, the options are sorted by the length of the time period (from short to long). For other use cases, an alphabetical sorting is also conceivable.
- Height. The facet is usually high enough to contain all items, so no scrolling is needed.
- Radio button. There has to be excactly one selected option. Visually, this functionality is indicated by the use of radio buttons.
- Default selection. By convention, one option must always be selected. This way the user has the possibility to return to the original state - even after a selection has been made. To ensure that all items are visible initially, the "all options" option is selected by default.
- User Selection. The selected option (as opposed to other facets) is not moved to the top position - it stays where it is.
<div class="row">
<div class="wui-grid wui-grid--sm p-l-5 p-0">
<div class="wui-grid__item">
<div class="wui-facet wui-bs-panel m-0 m-b-30" title="SingleSelectionFacet">
<div class="panel-heading panel-heading--expandable">
<a
class="panel-heading__expansion-toggle unstyled cursor--pointer panel-heading__expansion-toggle--open"></a>
<h2 data-w-test="facet__title" class="panel-title">Creation date</h2>
</div>
<div class="panel-body wui-facet__panel-body">
<div class="wui-facet__buckets">
<div class="wui-radio">
<input id="radio-facet-option_1" name="singleSelectionFacet" type="radio">
<label for="radio-facet-option_1" title="Today" class="text--break-all">
Today
<span>(<span>4</span>)</span>
</label>
</div>
<div class="wui-radio">
<input id="radio-facet-option_2" name="singleSelectionFacet" type="radio">
<label for="radio-facet-option_2" title="Last 7 days" class="text--break-all">
Last 7 days
<span>(<span>12</span>)</span>
</label>
</div>
<div class="wui-radio">
<input id="radio-facet-option_3" name="singleSelectionFacet" type="radio">
<label for="radio-facet-option_3" title="Last 30 days" class="text--break-all">
Last 30 days
<span>(<span>42</span>)</span>
</label>
</div>
<div class="wui-radio">
<input id="radio-facet-option_4" name="singleSelectionFacet" type="radio">
<label for="radio-facet-option_4" title="Last 90 days" class="text--break-all">
Last 90 days
<span>(<span>114</span>)</span>
</label>
</div>
<div class="wui-radio">
<input id="radio-facet-option_5" name="singleSelectionFacet" type="radio">
<label for="radio-facet-option_5" title="Last 365 days" class="text--break-all">
Last 365 days
<span>(<span>320</span>)</span>
</label>
</div>
<div class="wui-radio">
<input id="radio-facet-option_6" name="singleSelectionFacet" type="radio" checked="checked">
<label for="radio-facet-option_6" title="All options" class="text--break-all">
All options <span>(<span>578</span>)</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>