<div class="container-fluid">
<div class="grid-uploads">
<div class="well clearfix">
<div class="btn-group filters-button-group">
<button type="button" class="btn btn-default" data-filter="*">Show All</button>
<button type="button" class="btn btn-default" data-filter=".html">.HTML</button>
<button type="button" class="btn btn-default" data-filter=".jpg">.JPG</button>
<button type="button" class="btn btn-default" data-filter=".mp3">.MP3</button>
<button type="button" class="btn btn-default" data-filter=".png">.PNG</button>
</div><!-- /.btn-group -->
<div class="btn-group sort-button-group pull-right">
<button class="btn btn-default" data-sort-direction="asc" data-sort-value="original-order" type="button">Sort <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
<button class="btn btn-default" data-sort-direction="asc" data-sort-value="fileby" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
<button class="btn btn-default" data-sort-direction="asc" data-sort-value="filesize" type="button">File Size <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
<button class="btn btn-default" data-sort-direction="asc" data-sort-value="filedate" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
<button class="btn btn-default" data-sort-direction="asc" data-sort-value="filename" type="button">File Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
</div><!-- /.btn-group -->
</div><!-- /.well -->
<div class="uploads-row row">
<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 mp3" data-filesize="2587760" data-ticks="636335572495870000">
<div class="thumbnail">
<div class="col-media-item col-media-icon">
<span class="glyphicon glyphicon-file"></span>
</div><!-- /.col-media-item -->
<div class="caption col-media-details">
<p>
<span class="label label-default pull-right"> <span class="file-size"> 2.5MB </span> - mp3 </span>
<span class="file-by"> Carroll Wike</span> <br />
<small class="file-date"> 6/20/2017 </small>
</p>
<div><small class="file-name"> onehour-mp3 </small></div>
</div><!-- /.caption -->
</div><!-- /.thumbnail -->
</div><!-- /.col -->
<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 jpg" data-filesize="225940" data-ticks="636334710921070000">
<div class="thumbnail">
<div class="col-media-item col-media-icon">
<span class="glyphicon glyphicon-file"></span>
</div><!-- /.col-media-item -->
<div class="caption col-media-details">
<p>
<span class="label label-default pull-right"> <span class="file-size"> 220.6KB </span> - jpg </span>
<span class="file-by"> Rodger Brundige </span> <br>
<small class="file-date"> 6/19/2017 </small>
</p>
<div><small class="file-name"> ecp-page-jpg </small></div>
</div><!-- /.caption -->
</div><!-- /.thumbnail -->
</div><!-- /.col -->
<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 jpg" data-filesize="1013621" data-ticks="636332169180770000">
<div class="thumbnail">
<div class="col-media-item col-media-icon">
<span class="glyphicon glyphicon-file"></span>
</div><!-- /.col-media-item -->
<div class="caption col-media-details">
<p>
<span class="label label-default pull-right"> <span class="file-size"> 989.9KB </span> - jpg </span>
<span class="file-by"> Melaine Shurtleff </span> <br>
<small class="file-date"> 6/16/2017 </small>
</p>
<div> <small class="file-name"> desktop-computer-jpg </small> </div>
</div><!-- /.caption -->
</div><!-- /.thumbnail -->
</div><!-- /.col -->
<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 png" data-filesize="8431" data-ticks="636332169170070000">
<div class="thumbnail">
<div class="col-media-item col-media-icon">
<span class="glyphicon glyphicon-file"></span>
</div><!-- /.col-media-item -->
<div class="caption col-media-details">
<p>
<span class="label label-default pull-right"> <span class="file-size"> 8.2KB </span> - png </span>
<span class="file-by"> Shawana Bowles </span> <br>
<small class="file-date"> 6/16/2017 </small>
</p>
<div> <small class="file-name"> caravan-png </small> </div>
</div><!-- /.caption -->
</div><!-- /.thumbnail -->
</div><!-- /.col -->
<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 png" data-filesize="6274" data-ticks="636332169168700000">
<div class="thumbnail">
<div class="col-media-item col-media-icon">
<span class="glyphicon glyphicon-file"></span>
</div><!-- /.col-media-item -->
<div class="caption col-media-details">
<p>
<span class="label label-default pull-right"> <span class="file-size"> 6.1KB </span> - png </span>
<span class="file-by"> Prince Lineberry </span> <br>
<small class="file-date"> 6/16/2017 </small>
</p>
<div> <small class="file-name"> icon-phone-png </small> </div>
</div><!-- /.caption -->
</div><!-- /.thumbnail -->
</div><!-- /.col -->
<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 jpg" data-filesize="1294930" data-ticks="636332155255900000">
<div class="thumbnail">
<div class="col-media-item col-media-icon">
<span class="glyphicon glyphicon-file"></span>
</div><!-- /.col-media-item -->
<div class="caption col-media-details">
<p>
<span class="label label-default pull-right"> <span class="file-size"> 1.2MB </span> - jpg </span>
<span class="file-by"> Salena Kesterson </span> <br>
<small class="file-date"> 6/16/2017 </small>
</p>
<div><small class="file-name"> zach-betten-jpg </small></div>
</div><!-- /.caption -->
</div><!-- /.thumbnail -->
</div><!-- /.col -->
</div><!-- /.uploads-row -->
</div><!-- /.grid-uploads -->
</div><!-- /.container -->
.thumbnail {
border-color: #dde4e6;
}
.thumbnail.active,
.thumbnail:focus,
.thumbnail:hover {
border-color: #337ab7;
}
.col-media-item {
font-size: 40px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background: #ededed;
}
.col-media-details {
line-height: 1;
}
// init Isotope
var $grid = $('.uploads-row').isotope({
itemSelector: '.col-media',
layoutMode: 'fitRows',
getSortData: {
fileby: '.file-by',
filename: '.file-name',
filedate: '[data-ticks]',
filesize: function( itemElem ) {
var filesize = $( itemElem ).attr('data-filesize');
return parseInt( filesize );
}
}
});
// bind filter button click
$('.filters-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
// bind sort button click
$('.sort-button-group').on( 'click', 'button', function() {
/* Get the element name to sort */
var sortValue = $(this).attr('data-sort-value');
/* Get the sorting direction: asc||desc */
var direction = $(this).attr('data-sort-direction');
/* convert it to a boolean */
var isAscending = (direction == 'asc');
var newDirection = (isAscending) ? 'desc' : 'asc';
/* pass it to isotope */
$grid.isotope({ sortBy: sortValue, sortAscending: isAscending });
$(this).attr('data-sort-direction', newDirection);
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
