<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/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">
<div class="row">
<div class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]">
<div class="[ panel panel-default ] panel-google-plus">
<div class="panel-heading">
<h3>Tytuł komunikatu</h3>
<h5><span>Wysłany</span> - <span>Jun 27, 2014</span> </h5>
</div>
<div class="panel-body">
<p>Do people born in 2000 get to choose if they are Generation Y or Generation Z? How do you decide what generation you want to belong to?</p>
</div>
<div class="panel-footer">
<button type="button" class="[ btn btn-default ]">+1</button>
<button type="button" class="[ btn btn-default ]">
<span class="[ glyphicon glyphicon-share-alt ]"></span>
</button>
</div>
</div>
</div>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
.panel-google-plus {
position: relative;
border-radius: 0px;
border: 1px solid rgb(216, 216, 216);
font-family: 'Roboto', sans-serif;
}
.panel-google-plus > .panel-heading,
.panel-google-plus > .panel-footer {
background-color: rgb(255, 255, 255);
border-width: 0px;
}
.panel-google-plus > .panel-heading {
margin-top: 20px;
padding-bottom: 5px;
}
.panel-google-plus > .panel-heading > h3 {
margin: 0px;
font-size: 14px;
font-weight: 700;
}
.panel-google-plus > .panel-heading > h5 {
color: rgb(153, 153, 153);
font-size: 12px;
font-weight: 400;
}
.panel-google-plus > .panel-body {
padding-top: 5px;
font-size: 13px;
}
.panel-google-plus > .panel-footer {
font-size: 14px;
font-weight: 700;
min-height: 54px;
}
.panel-google-plus > .panel-footer > .btn {
float: left;
margin-right: 8px;
}
.panel-google-plus .btn {
border-radius: 3px;
}
.panel-google-plus .btn-default {
border: 1px solid rgb(217, 217, 217);
box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 0px 0px;
}
.panel-google-plus .btn-default:hover,
.panel-google-plus .btn-default:focus,
.panel-google-plus .btn-default:active {
background-color: rgb(255, 255, 255);
border-color: rgb(0, 0, 0);
}
$(function () {
$('.panel-google-plus > .panel-footer > .input-placeholder, .panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > button[type="reset"]').on('click', function(event) {
var $panel = $(this).closest('.panel-google-plus');
$comment = $panel.find('.panel-google-plus-comment');
$comment.find('.btn:first-child').addClass('disabled');
$comment.find('textarea').val('');
$panel.toggleClass('panel-google-plus-show-comment');
if ($panel.hasClass('panel-google-plus-show-comment')) {
$comment.find('textarea').focus();
}
});
$('.panel-google-plus-comment > .panel-google-plus-textarea > textarea').on('keyup', function(event) {
var $comment = $(this).closest('.panel-google-plus-comment');
$comment.find('button[type="submit"]').addClass('disabled');
if ($(this).val().length >= 1) {
$comment.find('button[type="submit"]').removeClass('disabled');
}
});
});
