Sidebar specifications
The optional sidebar holds filters to manipulate the data shown on-screen. The sidebar has a slightly different behavior in content page as compared to the application page layouts - in content page the sidebar behaves as a sticky element - is fixed at the top of the screen when the user scrolls past the list of items, while in application page layouts the sidebar is fixed on the left of each main area. At screen resolutions below 992px, the sidebar in both types of layouts is transformed into a collapsed toggleable element.
Sidebar component
The sidebar has been developed to accommodate various filter types in the form of responsive toggleable filter modules, described below. The following markup is required to define a sidebar; keep in mind that all the markup is necessary in order for the sidebar to function properly in all devices and screen sizes.
button shown in the markup, is the action button that toggles the filtering options at small resolutions below 992px.HTML markup
Copy<div class="sidebar">
<div class="filters-box toggle">
<button class="btn btn-main btn-toggle" data-toggle="toggle">Filtering</button>
<div class="toggle-content">
<div class="box pad-sm">
<h4>Filter events</h4>
<!-- RESPONSIVE TOGGLEABLE FILTER MODULES -->
</div>
</div>
</div>
</div>
Sidebar responsive toggleable filter modules
The responsive toggleable filter modules are formed by placing filters inside responsive toggles - at resolutions below 767px the modules become toggleable - the toggle button label is used as the filter category title at resolutions above 768px.
HTML markup
Copy<div class="filters-item-toggle toggle">
<button class="btn-toggle" data-toggle="toggle">Filter category title</button>
<div class="toggle-content">
<!-- FILTER TYPES -->
</div>
</div>
Sidebar filter types
The sidebar accepts the filter types described below. The provided markup renders a formed responsive toggleable filter module.
Checkbox lists
Checkbox items can be optionally combined with color scales to match label colors used on list items. Checkbox lists are implemented in the sidebar using the following markup.
Copy<div class="filters-item-toggle toggle">
<button class="btn-toggle" data-toggle="toggle">Checkbox list title</button>
<div class="toggle-content">
<ul class="list-filters">
<li>
<label class="custom-checkbox">
<input value="checkbox1" checked="" type="checkbox">
<span><i class="color-square color-scale-1"></i>Option 1 <small><strong>(8)</strong></small></span>
</label>
</li>
<...>
</ul>
</div>
</div>
In cases where there are too many checkboxes, the list of items can be wrapped inside a contained scrollable extended-list-filters element.
The following features are also available for the extended list filters:
- An optional search box
- In the case of using checkboxes, an optional select/unselect all items
The example below renders the extended list filters with both optional features enabled.
Copy<div class="filters-item-toggle toggle">
<button class="btn-toggle" data-toggle="toggle">Checkbox-list category title</button>
<div class="toggle-content">
<div class="extended-list-filters">
<div class="search-group">
<input placeholder="Search filter category" class="form-control-sm" type="search">
<button type="submit"><i class="sky-icon-search"></i></button>
</div>
<ul class="list-filters-toggle">
<li><a href="#">Select all</a></li>
<li><a href="#">Unselect all</a></li>
</ul>
<ul class="list-filters">
<li>
<label class="custom-checkbox">
<input value="checkbox1" checked="" type="checkbox">
<span>Option 1 <small><strong>(8)</strong></small></span>
</label>
</li>
<...>
</ul>
</div>
</div>
</div>
Radio lists
Radio items can be optionally combined with color scales to match label colors used on list items. Radio lists are implemented in the sidebar using the following markup.
Copy<div class="filters-item-toggle toggle">
<button class="btn-toggle" data-toggle="toggle">Radio list title</button>
<div class="toggle-content">
<ul class="list-filters">
<li>
<label class="custom-radio">
<input name="group1" value="option0" checked="" type="radio">
<span>View all <small><strong>(33)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group1" value="option1" checked="" type="radio">
<span> <i class="color-square color-scale-1"></i>Option 1 <small><strong>(2)</strong></small></span>
</label>
</li>
<...>
</ul>
</div>
</div>
In cases where there are too many radios, the list of items can be wrapped inside a contained scrollable extended-list-filters element.
The following features are also available for the extended list filters:
- An optional search box
The example below renders the extended list filters with the search feature enabled.
Copy<div class="filters-item-toggle toggle">
<button class="btn-toggle" data-toggle="toggle">Radio list title</button>
<div class="toggle-content">
<div class="extended-list-filters">
<div class="search-group">
<input placeholder="Search filter category" class="form-control-sm" type="search">
<button type="submit"><i class="sky-icon-search"></i></button>
</div>
<ul class="list-filters">
<li>
<label class="custom-radio">
<input name="group2" value="option0" checked="" type="radio">
<span>View all <small><strong>(33)</strong></small></span>
</label>
</li>
<...>
</ul>
</div>
</div>
</div>
Sidebar select elements
One or more select elements can be placed inside a responsive toggle.
Copy<div class="filters-item-toggle toggle">
<button class="btn-toggle" data-toggle="toggle">Select title</button>
<div class="toggle-content">
<select class="form-control-sm">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 3</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
</select>
</div>
</div>
Date-time picker component
The date-time picker component has been specifically designed to be accommodated in a sidebar.
Copy<div class="filters-item-toggle toggle">
<button class="btn-toggle" data-toggle="toggle">Date-time picker title</button>
<div class="toggle-content">
<div id="datetime-1" class="tabs">
<div class="tab-buttons">
<div class="btn-group btn-group-justified">
<a class="btn btn-underlined active" data-toggle="tab" data-href="#datetime-1-presets">Presets</a>
<a class="btn btn-underlined" data-toggle="tab" data-href="#datetime-1-range">Range</a>
<a class="btn btn-underlined" data-toggle="tab" data-href="#datetime-1-drange">D-range</a>
</div>
</div>
<div class="tabs-content">
<div id="datetime-1-presets" class="tab active">
<ul class="list-filters">
<li>
<label class="custom-radio">
<input name="group3" value="preset1" type="radio">
<span>Preset 1</span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group3" value="preset2" type="radio">
<span>Preset 2</span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group3" value="preset3" type="radio">
<span>Preset 3</span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group3" value="preset4" type="radio">
<span>Preset 4</span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group3" value="preset5" type="radio">
<span>Preset 5</span>
</label>
</li>
</ul>
</div>
<div id="datetime-1-range" class="tab">
<div class="datepicker-range"></div>
</div>
<div id="datetime-1-drange" class="tab">
<div class="datepicker-directional-range"></div>
</div>
</div>
</div>
</div>
</div>
Sidebar boolean queries
Boolean queries can be implemented in a sidebar component to allow the use regular expressions to create complex filtering queries. The boolean queries module responds to the sidebar width changes and adapts to it accordingly, depending on screen resolution.
Copy<div class="spacer-sm"></div>
<div class="alert alert-info">
<div><strong>Produced conditions:</strong> Destination <span class="color-categorical-1"><strong>equal to</strong></span> Greece <span class="color-categorical-5"><strong>AND</strong></span> bandwidth <span class="color-categorical-1"><strong>greater than</strong></span> 20Mb</div>
</div>
<div class="spacer-sm"></div>
<div class="nested-group">
<div class="nested-group-header">
<select class="form-control-xs">
<option>AND</option>
<option>OR</option>
</select>
</div>
<div class="nested-group-row">
<div class="row row-sm">
<div class="col-xxs-12 col-xs-4 col-md-12">
<select class="form-control-sm">
<option>Date</option>
<option>Destination</option>
<option>Source</option>
</select>
</div>
<div class="col-xxs-12 col-xs-4 col-md-12">
<select class="form-control-sm">
<option>greater than</option>
<option>less than</option>
<option>equal to</option>
<option>not equal to</option>
</select>
</div>
<div class="col-xxs-12 col-xs-4 col-md-12">
<input class="form-control-sm" placeholder="value" type="text">
</div>
</div>
<a class="btn btn-sm btn-nested-row-action"></a>
</div>
<div class="nested-group-footer">
<div class="btn-group">
<a href="#" class="btn btn-xs btn-sec">Add group</a>
<a href="#" class="btn btn-xs btn-sec">Add condition</a>
</div>
</div>
<div class="nested-group">
<a class="btn btn-xs btn-nested-group-action">Remove</a>
<div class="nested-group-header">
<select class="form-control-xs">
<option>AND</option>
<option>OR</option>
</select>
</div>
<div class="nested-group-row">
<div class="row row-sm">
<div class="col-xxs-12 col-xs-4 col-md-12">
<select class="form-control-sm">
<option>Date</option>
<option>Destination</option>
<option>Source</option>
</select>
</div>
<div class="col-xxs-12 col-xs-4 col-md-12">
<select class="form-control-sm">
<option>greater than</option>
<option>less than</option>
<option>equal to</option>
<option>not equal to</option>
</select>
</div>
<div class="col-xxs-12 col-xs-4 col-md-12">
<input class="form-control-sm" placeholder="value" type="text">
</div>
</div>
<a class="btn btn-sm btn-nested-row-action"></a>
</div>
<div class="nested-group-footer">
<div class="btn-group">
<a href="#" class="btn btn-xs btn-sec">Add group</a>
<a href="#" class="btn btn-xs btn-sec">Add condition</a>
</div>
</div>
</div>
</div>
<div class="spacer-sm"></div>