<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DataTables example - Bootstrap 3</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
</head>
<div class="container">
<div class="mail-box">
<div class="row">
<div class="col-md-12 header">
<img class="headerImage" src="http://www.bk.mufg.jp/global/globalnetwork/americas/imgs/city_13_l.jpg" alt="Smiley face" />
<div class="inbox-head">
<h3>Process Assets Library</h3>
<h6>Below the list of all tha Process access Information Technology Clutser, Use the left panel to filter this list by <b>keyword</b>,<b>location</b> and <b>type</b></h6>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<aside class="sm-side">
<div class="inbox-body">
<div id="crumbs">
<span class="button-checkbox">
<a href="#">Local Procedures
<input type="checkbox" class="hidden" value='LocalProcedures' />
</a>
</span>
<span class="button-checkbox">
<a href="#">Local Policies
<input type="checkbox" class="hidden" value='LocalPolicies' />
</a>
</span>
<span class="button-checkbox">
<a href="#">Global Policies
<input type="checkbox" class="hidden" value='GlobalPolicies' />
</a>
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="filterContainer">
<div class="filterHeader">Filter By:</div>
<div class="filterBlocks">
<span>KEYWORD</span>
<div>
<input type="text" class="sr-input" placeholder="Search">
</div>
</div>
<div class="filterBlocks">
<span>LOCATION</span>
<div class="locationFilter">
<p>Calgary</p>
<p>Montreal</p>
<p>Toronto</p>
<p>Vancouver</p>
<span class="label label-primary"><i class="glyphicon glyphicon-chevron-down"></i> View All</span>
</div>
</div>
<div class="filterBlocks">
<span>LANGUAGE</span>
<div class="languageFilter">
<p href="#">English</p>
</div>
</div>
<div class="filterBlocks">
<span>SITE</span>
<div class="siteFilter">
<p>Communications</p>
<p>Treasury</p>
<span class="label label-primary"><i class="glyphicon glyphicon-chevron-down"></i> View All</span>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
<div class="col-md-9">
<aside class="lg-side">
<div class="inbox-body">
<div class="filtersBox">
<h4>Selected Filters</h4>
<div class="line-separator">
<div class="side-line-1"> </div>
<div class="triangle"> </div>
<div class="side-line-2"></div>
<div class="dynamicFilters">
<span class='display LocalProcedures'>Local Procedures</span>
<span class='display LocalPolicies'>Local Procedures</span>
<span class='display GlobalPolicies'>Local Procedures</span>
<span class='clearall'><img src='https://windsurfstuff.com/images/icons/close_white.svg' class='close-svg' id='close-all'>Clear All</span>
</div>
</div>
<hr />
</div>
<table class="table table-striped" id="dev-table">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Location</th>
<th>Site</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icdocx.png" /></td>
<td><a href="#">PGM-DOM-ML-0118</a></td>
<td>Montreal</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icpdf.png" /></td>
<td><a href="#">LA-d-9</a></td>
<td>Calgary</td>
<td>MTD</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">Crusher general Lockout</a></td>
<td>Toronto</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">Crusher general Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr><tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
<tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr><tr>
<td><img src="http://officeWebapp/_layouts/15/images/icxlsx.png" /></td>
<td><a href="#">General Lockout</a></td>
<td>Vancouver</td>
<td>Communications</td>
<td><img src="https://png.icons8.com/metro/1600/info.png" height=20px width=20px />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Map_marker%2C_star.svg/1000px-Map_marker%2C_star.svg.png" height=18px width=18px /></td>
</tr>
</tbody>
</table>
</div>
</aside>
</div>
</div>
</div>
</div>
@import url("https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css")
.mail-box {
border-collapse: collapse;
border-spacing: 0;
display: table;
table-layout: fixed;
width: 100%;
}
.mail-box aside {
display: table-cell;
float: none;
height: 100%;
padding: 0;
vertical-align: top;
}
.mail-box .sm-side {
background: none repeat scroll 0 0;
border-radius: 4px 0 0 4px;
width: 25%;
border-right: 2px solid #3498db;
}
.mail-box .lg-side {
background: none repeat scroll 0 0 #fff;
border-radius: 0 4px 4px 0;
width: 10%;
}
.inbox-head {
background: none repeat scroll 0 0 #e60000;
border-radius: 0 4px 0 0;
color: #fff;
min-height: 80px;
padding: 20px;
}
.inbox-head h3 {
display: inline-block;
font-weight: 300;
margin: 0;
padding-top: 6px;
}
.sr-input {
color: #8a8a8a;
height: 25px;
padding: 0px 0px 0px 10px;
margin: 0px 20px 0px 20px;
}
.inbox-head .sr-btn {
background: none repeat scroll 0 0 #00a6b2;
border: medium none;
border-radius: 0 4px 4px 0;
color: #fff;
height: 40px;
padding: 0 20px;
}
.table-inbox {
border: 1px solid #d3d3d3;
margin-bottom: 0;
}
.table-inbox tr td {
padding: 12px !important;
}
.table-inbox tr td:hover {
cursor: pointer;
}
.table-inbox tr td .fa-star.inbox-started, .table-inbox tr td .fa-star:hover {
color: #f78a09;
}
.table-inbox tr td .fa-star {
color: #d5d5d5;
}
.table-inbox tr.unread td {
background: none repeat scroll 0 0 #f7f7f7;
font-weight: 600;
}
ul.inbox-pagination {
float: right;
}
ul.inbox-pagination li {
float: left;
}
.mail-option {
display: inline-block;
margin-bottom: 10px;
width: 100%;
}
.mail-option .chk-all, .mail-option .btn-group {
margin-right: 5px;
}
.mail-option .chk-all, .mail-option .btn-group a.btn {
background: none repeat scroll 0 0 #fcfcfc;
border: 1px solid #e7e7e7;
border-radius: 3px !important;
color: #afafaf;
display: inline-block;
padding: 5px 10px;
}
.inbox-pagination a.np-btn {
background: none repeat scroll 0 0 #fcfcfc;
border: 1px solid #e7e7e7;
border-radius: 3px !important;
color: #afafaf;
display: inline-block;
padding: 5px 15px;
}
.mail-option .chk-all input[type="checkbox"] {
margin-top: 0;
}
.mail-option .btn-group a.all {
border: medium none;
padding: 0;
}
.inbox-pagination a.np-btn {
margin-left: 5px;
}
.inbox-pagination li span {
display: inline-block;
margin-right: 5px;
margin-top: 7px;
}
.fileinput-button {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #e6e6e6;
}
.inbox-body {
margin-bottom: 10px;
}
.btn-send, .btn-send:hover {
background: none repeat scroll 0 0 #00a8b3;
color: #fff;
}
.btn-send:hover {
background: none repeat scroll 0 0 #009da7;
}
.modal-header h4.modal-title {
font-family: "Open Sans",sans-serif;
font-weight: 300;
}
.modal-body label {
font-family: "Open Sans",sans-serif;
font-weight: 400;
}
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#dev-table td:nth-child(1) {
padding:5px 0px 0px 0px;
width:1px;
}
#crumbs a {
display: block;
height: 40px;
background: #ff4e4e;
text-align: left;
padding: 12px 0px 0 13px;
position: relative;
font-size: 13px;
text-decoration: none;
color: #fff;
}
#crumbs a:hover {
background-color: #e60000 ;
}
#crumbs a:hover:after{
border-left: 10px solid #e60000;
}
.filterContainer
{
background-color:#E9E9E9;
}
.filterContainer .filterHeader
{
display: block;
padding: 15px 0px 5px 0px;
position: relative;
margin: 0px 15px 2px 15px;
font-size: 16px;
text-decoration: none;
border-bottom: 1px dashed grey;
}
.filterBlocks
{
padding-bottom :30px;
border-bottom: 1px dashed grey;
margin: 0px 15px 2px 15px;
}
.filterBlocks span
{
display: block;
padding: 8px 10px 5px 0px;
position: relative;
margin: 10px 0px 0px 20px;
font-size: 12px;
text-decoration: none;
width: 80px;
}
.filterBlocks p
{
margin: 6px 30px 0px 20px;
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
}
.headerImage{
float:right;
width:120px;
height:105px;
margin-right:25px;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
}
.state-icon
{
float: right;
padding-right: 15px;
}
#crumbs a.active {
background-color: #e60000 ;
}
#crumbs a.active:after{
border-left: 10px solid #e60000;
content: "";
border-top: 20px solid white;
border-bottom: 20px solid white;
position: absolute;
right: -10px;
top: 0;
}
.side-line-1 {
display: inline-block;
border-top: 1px solid #e60000;
width: 3%;
}
.side-line-2 {
display: inline-block;
border-top: 1px solid #e60000;
width: 96%;
}
.triangle {
display: inline-block;
height: 7px;
width: 7px;
transform: rotate(45deg);
border-top: 1px solid #e60000;
border-left: 1px solid #e60000;
margin-left: -3px;
margin-right: -3px;
margin-bottom: -2.9px;
}
hr {
display: block;
border-top: 1px solid #e60000;
padding: 0;
}
.close-svg {
width:10px;
margin: 2px;
}
.display, .clearall{
display:none;
background-color: red;
padding: 6px;
border-radius: 6px;
font-weight: bold;
color: #fff;
}
.dynamicFilters{
margin-top: 10px;
}
.siteSubFilter, .locationSubFilter, .languageSubFilter{
background-color: red;
padding: 6px;
border-radius: 6px;
font-weight: bold;
color: #fff;
margin-right:10px;
}
$(function () {
$('.button-checkbox').each(function () {
// Settings
var $widget = $(this),
$button = $widget.find('a'),
$checkbox = $widget.find('input:checkbox'),
color = $button.data('color'),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'glyphicon glyphicon-unchecked'
}
};
// Event Handlers
$button.on('click', function () {
$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
});
$checkbox.on('change', function () {
updateDisplay();
});
// Actions
function updateDisplay() {
var isChecked = $checkbox.is(':checked');
var checkboxname = $checkbox.val();
// Set the button's state
$button.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$button.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$button.data('state')].icon);
// Update the button's color
if (isChecked) {
$button
.removeClass('btn-default')
.addClass('active');
$(".display." + checkboxname).show();
$('.clearall').show();
}
else {
$button
.removeClass('btn-' + color + ' active');
//.addClass('btn-default');
$('.display.' + checkboxname).hide();
}
$('#close-all').click(function() {
// $('input[type="checkbox"]').empty();
$('input[type=checkbox]').each(function() { this.checked = false; });
$('.display.' + checkboxname).hide();
$('.clearall').hide();
$button.removeClass('btn-' + color + ' active');
$button.data('state', 'off');
$button.find('.state-icon')
.addClass('state-icon ' + settings[$button.data('state')].icon);
$('.siteSubFilter').hide();
$('.languageSubFilter').hide();
$('.locationSubFilter').hide();
dataTable.fnFilter('',2);
dataTable.fnFilter('',3);
});
}
// Initialization
function init() {
updateDisplay();
// Inject the icon if applicable
if ($button.find('.state-icon').length === 0) {
$button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i>');
}
}
init();
});
var dataTable = $('#dev-table').dataTable();
$(".siteFilter p").on('click', function () {
$('.siteSubFilter').hide();
$('.clearall').show();
$('.dynamicFilters').prepend("<span class='siteSubFilter'>" + $(this).text() +"</span>");
dataTable.fnFilter($(this).text(), 3);
});
$(".languageFilter p").on('click', function () {
$('.languageSubFilter').hide();
$('.clearall').show();
$('.dynamicFilters').prepend("<span class='languageSubFilter'>" + $(this).text() +"</span>");
});
$(".locationFilter p").on('click', function () {
$('.locationSubFilter').hide();
$('.clearall').show();
$('.dynamicFilters').prepend("<span class='locationSubFilter'>" + $(this).text() +"</span>");
dataTable.fnFilter($(this).text(), 2);
});
$('input.sr-input').on( 'keyup click', function () {
dataTable.fnFilter($(this).val(), 1);
} );
});
