<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://icons.iconarchive.com/icons/mat-u/heaven-and-hell/32/Heaven-Documents-icon.png" alt="...">
DOCSY</a>
<ul class="nav navbar-nav">
<li><a href="#myBooks" role="tab" data-toggle="tab">All books</a></li>
<li><a href="#users" role="tab" data-toggle="tab">All users</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" ><span class="glyphicon glyphicon-search"></span></span>
<input type="text" class="form-control" placeholder="Search" id="searchInput">
<span class="input-group-addon" id = "searchAddon">
<div class="btn-group-vertical btn-group-xs" id = "selectSearch" role="group">
<a href="javascript:toggleClass();" class="btn btn-xs btn-default" id="pickBook"><span class="glyphicon glyphicon-book"></span>Books</a>
<a href="javascript:toggleClass();" class="btn btn-xs btn-info" id="pickUser"><span class="glyphicon glyphicon-user"></span>Users</a>
</div>
</span>
</div>
</div>
</form>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" role="tablist">
<li><a href="#addBook" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-plus"></span>Add new book </a>
</li>
<li>
<a href="#myBooks" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-book"></span>My books</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-bell"></span><span class="label label-info">1</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#"><span class="label label-warning">3:00 AM</span></a>
<div class="media">
<div class="pull-left">
<a href="#">
<img class="media-object" src="http://icons.iconarchive.com/icons/treetog/file-type/48/html-icon.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Stranica.html</h4>
<p>by User Userovic</p>
</div>
</div>
</li>
<li>
<a href="#"><span class="label label-warning">3:00 AM</span></a>
<div class="media">
<div class="pull-left">
<a href="#">
<img class="media-object" src="http://icons.iconarchive.com/icons/treetog/file-type/48/html-icon.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Stranica.html</h4>
<p>by User Userovic</p>
</div>
</div>
</li>
<li class="divider"></li>
<li><a href="#" class="text-center">Vidi ostale notifikacije</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
class="glyphicon glyphicon-user"></span>Zaposlenik <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#userDetails" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-user"></span>Profile</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span>Settings</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-off"></span>Logout</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class="panel panel-default">
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="addBook">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="concept" name="concept" placeholder="Title">
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<textarea type="text" class="form-control" id="description" name="description" placeholder="Description"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<div class="upload-drop-zone" id="drop-zone">
Just drag and drop files here
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<button type="button" class="btn btn-success">
<span class="glyphicon glyphicon-plus"></span> Add
</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="myBooks">
<div class="well">
<div class="media">
<div class="pull-left">
<a href="#bookDetails" role="tab" data-toggle="tab">
<img class="media-object" src="http://icons.iconarchive.com/icons/treetog/file-type/72/docx-win-icon.png">
</a>
<a href="#" class="btn btn-xs btn-success"><span class="glyphicon glyphicon-floppy-save"></span>Download</a>
</div>
<div class="media-body">
<h4 class="media-heading">Receta.docx</h4>
<p class="text-left">By Francisco</p>
<ul class="list-inline list-unstyled">
<li><span><i class="glyphicon glyphicon-calendar"></i> 2 days, 8 hours </span></li>
<li>|</li>
<span><i class="glyphicon glyphicon-comment"></i> 2 comments</span>
<li>|</li>
<li>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</li>
<li>|</li>
<li>
<!-- Use Font Awesome http://fortawesome.github.io/Font-Awesome/ -->
<span><i class="fa fa-facebook-square"></i></span>
<span><i class="fa fa-twitter-square"></i></span>
<span><i class="fa fa-google-plus-square"></i></span>
</li>
</ul>
</div>
</div>
</div>
<div class="well">
<div class="media">
<div class="pull-left" >
<a href="#bookDetails" role="tab" data-toggle="tab">
<img class="media-object" src="http://icons.iconarchive.com/icons/treetog/file-type/72/pdf-icon.png">
</a>
<a href="#" class="btn btn-xs btn-success"><span class="glyphicon glyphicon-floppy-save"></span>Download</a>
</div>
<div class="media-body">
<h4 class="media-heading">Receta.pdf</h4>
<p class="text-left">By Anailuj</p>
<ul class="list-inline list-unstyled">
<li><span><i class="glyphicon glyphicon-calendar"></i> 2 days, 8 hours </span></li>
<li>|</li>
<span><i class="glyphicon glyphicon-comment"></i> 2 comments</span>
<li>|</li>
<li>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</li>
<li>|</li>
<li>
<!-- Use Font Awesome http://fortawesome.github.io/Font-Awesome/ -->
<span><i class="fa fa-facebook-square"></i></span>
<span><i class="fa fa-twitter-square"></i></span>
<span><i class="fa fa-google-plus-square"></i></span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="users">
<div class="well">
<div class="media">
<div class="pull-left">
<a href="#userDetails" role="tab" data-toggle="tab">
<img class="media-object" src="http://icons.iconarchive.com/icons/itzikgur/my-seven/72/Girls-Blue-Dress-icon.png">
</a>
<a href="#" class="btn btn-xs btn-danger"><span class="glyphicon glyphicon-remove-circle"></span> Ban</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Userovic</h4>
<ul class="list-inline list-unstyled">
<li><a href="#myBooks" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-open"></i>3 uploads </a></li>
<li>|</li>
<span><a href="#myBooks" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-save"></i>2 downloads </a></span>
</ul>
</div>
</div>
</div>
<div class="well">
<div class="media">
<div class="pull-left" >
<a href="#userDetails" role="tab" data-toggle="tab">
<img class="media-object" src="http://icons.iconarchive.com/icons/babasse/old-school/72/user-icon.png">
</a>
<a href="#" class="btn btn-xs btn-warning"><span class="glyphicon glyphicon-check"></span>Unban</a>
</div>
<div class="media-body">
<h4 class="media-heading">Korisnik Korisnikovic</h4>
<ul class="list-inline list-unstyled">
<li><a href="#myBooks" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-open"></i>3 uploads </a></li>
<li>|</li>
<span><a href="#myBooks" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-save"></i>2 downloads </a></span>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="userDetails">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/256/Girls-Blue-Dress-icon.png" alt="" class="img-rounded img-responsive" />
</div>
<div class="col-sm-6 col-md-8">
<h4>
Bhaumik Patel</h4>
<ul class="list-inline list-unstyled">
<li><a href="#myBooks" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-open"></i>3 uploads </a></li>
<li>|</li>
<span><a href="#myBooks" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-save"></i>2 downloads </a></span>
</ul>
<small><cite title="San Francisco, USA">San Francisco, USA <i class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="glyphicon glyphicon-envelope"></i>email@example.com
<br />
<i class="glyphicon glyphicon-globe"></i><a href="http://www.jquery2dotnet.com">www.jquery2dotnet.com</a>
<br />
<i class="glyphicon glyphicon-gift"></i>June 02, 1988</p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="bookDetails">
<div class="media">
<div class="pull-left">
<a href="#bookDetails" role="tab" data-toggle="tab">
<img class="media-object" src="http://icons.iconarchive.com/icons/treetog/file-type/128/docx-win-icon.png">
</a>
<a href="#" class="btn btn-primary btn-success"><span class="glyphicon glyphicon-floppy-save"></span> Download</a>
</div>
<div class="media-body">
<h4 class="media-heading">Receta.docx</h4>
<p class="text-left">By Francisco</p>
<div id="hearts-existing" class="starrr" data-rating='4'></div>
<ul class="list-inline list-unstyled">
<li><span><i class="glyphicon glyphicon-open"></i> 6 uploads </span></li>
<li>|</li>
<span><i class="glyphicon glyphicon-save"></i> 2 downloads</span>
<li>|</li>
<li>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</li>
</ul>
</div>
</div>
<br/>
<div class="panel panel-default">
<div class="panel-body">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/48/Girls-Red-Dress-icon.png" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Zaposlenik</h4>
<form accept-charset="UTF-8" action="" method="post">
<textarea class="form-control animated" cols="3"name="comment" placeholder="Enter your review here..." rows="3"></textarea>
</form>
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
<img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/48/Girls-Blue-Dress-icon.png" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">User Userovic</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<ul class="list-inline list-unstyled">
<li><span><i class="glyphicon glyphicon-calendar"></i> 2 days, 8 hours </span></li>
<li><span><i class="glyphicon glyphicon-thumbs-up"></i>3</span></li>
</ul>
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
<img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/48/Girls-Blue-Dress-icon.png" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">User Userovic</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<ul class="list-inline list-unstyled">
<li><span><i class="glyphicon glyphicon-calendar"></i> 2 days, 8 hours </span></li>
<li><span><i class="glyphicon glyphicon-thumbs-up"></i>3</span></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#pickBook {
width: 60px; height: 20px;margin-top: 0;
border-top-left-radius:0;
}
#pickUser{
width: 60px; height: 20px;margin-bottom: 0;
border-bottom-left-radius:0;
}
#searchAddon{
padding:0;
width: 60px; height: 40px;margin:0;
background-color:#FFFFFF;
border:0;
}
#searchInput{
height: 40px;
}
#addBook{
margin-left:25%;
margin-right:25%;
}
/* layout.css Style */
.upload-drop-zone {
height: 100px;
border-width: 2px;
margin-bottom: 10px;
}
/* skin.css Style*/
.upload-drop-zone {
color: #ccc;
border-style: dashed;
border-color: #ccc;
line-height: 100px;
text-align: center
}
.upload-drop-zone.drop {
color: #222;
border-color: #222;
}
#hearts { color: #FF0000;}
#hearts-existing { color: #87bad7;}
function toggleClass(){
$("#pickBook,#pickUser").toggleClass('btn-default');
$("#pickBook,#pickUser").toggleClass('btn-info');
}
// Starrr plugin (https://github.com/dobtco/starrr)
var __slice = [].slice;
(function($, window) {
var Starrr;
Starrr = (function() {
Starrr.prototype.defaults = {
rating: void 0,
numStars: 5,
change: function(e, value) {}
};
function Starrr($el, options) {
var i, _, _ref,
_this = this;
this.options = $.extend({}, this.defaults, options);
this.$el = $el;
_ref = this.defaults;
for (i in _ref) {
_ = _ref[i];
if (this.$el.data(i) != null) {
this.options[i] = this.$el.data(i);
}
}
this.createStars();
this.syncRating();
this.$el.on('mouseover.starrr', 'span', function(e) {
return _this.syncRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('mouseout.starrr', function() {
return _this.syncRating();
});
this.$el.on('click.starrr', 'span', function(e) {
return _this.setRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('starrr:change', this.options.change);
}
Starrr.prototype.createStars = function() {
var _i, _ref, _results;
_results = [];
for (_i = 1, _ref = this.options.numStars; 1 <= _ref ? _i <= _ref : _i >= _ref; 1 <= _ref ? _i++ : _i--) {
_results.push(this.$el.append("<span class='glyphicon .glyphicon-heart-empty'></span>"));
}
return _results;
};
Starrr.prototype.setRating = function(rating) {
if (this.options.rating === rating) {
rating = void 0;
}
this.options.rating = rating;
this.syncRating();
return this.$el.trigger('starrr:change', rating);
};
Starrr.prototype.syncRating = function(rating) {
var i, _i, _j, _ref;
rating || (rating = this.options.rating);
if (rating) {
for (i = _i = 0, _ref = rating - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
this.$el.find('span').eq(i).removeClass('glyphicon-heart-empty').addClass('glyphicon-heart');
}
}
if (rating && rating < 5) {
for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) {
this.$el.find('span').eq(i).removeClass('glyphicon-heart').addClass('glyphicon-heart-empty');
}
}
if (!rating) {
return this.$el.find('span').removeClass('glyphicon-heart').addClass('glyphicon-heart-empty');
}
};
return Starrr;
})();
return $.fn.extend({
starrr: function() {
var args, option;
option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return this.each(function() {
var data;
data = $(this).data('star-rating');
if (!data) {
$(this).data('star-rating', (data = new Starrr($(this), option)));
}
if (typeof option === 'string') {
return data[option].apply(data, args);
}
});
}
});
})(window.jQuery, window);
$(function() {
return $(".starrr").starrr();
});
$( document ).ready(function() {
$('#hearts').on('starrr:change', function(e, value){
$('#count').html(value);
});
$('#hearts-existing').on('starrr:change', function(e, value){
$('#count-existing').html(value);
});
});
