Google Plus Styled Post
<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">
<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="dropdown">
<span class="dropdown-toggle" type="button" data-toggle="dropdown">
<span class="[ glyphicon glyphicon-chevron-down ]"></span>
</span>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<div class="panel-google-plus-tags">
<ul>
<li>#Millennials</li>
<li>#Generation</li>
</ul>
</div>
<div class="panel-heading">
<img class="[ img-circle pull-left ]" src="https://lh3.googleusercontent.com/-CxXg7_7ylq4/AAAAAAAAAAI/AAAAAAAAAQ8/LhCIKQC5Aq4/s46-c-k-no/photo.jpg" alt="Mouse0270" />
<h3>Robert McIntosh</h3>
<h5><span>Shared publicly</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 class="input-placeholder">Add a comment...</div>
</div>
<div class="panel-google-plus-comment">
<img class="img-circle" src="https://lh3.googleusercontent.com/uFp_tsTJboUY7kue5XAsGA=s46" alt="User Image" />
<div class="panel-google-plus-textarea">
<textarea rows="4"></textarea>
<button type="submit" class="[ btn btn-success disabled ]">Post comment</button>
<button type="reset" class="[ btn btn-default ]">Cancel</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="[ col-xs-12 col-sm-5 ]">
<div class="[ panel panel-default ] panel-google-plus">
<div class="dropdown">
<span class="dropdown-toggle" type="button" data-toggle="dropdown">
<span class="[ glyphicon glyphicon-chevron-down ]"></span>
</span>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<div class="panel-google-plus-tags">
<ul>
<li>#Snippet</li>
</ul>
</div>
<div class="panel-heading">
<img class="[ img-circle pull-left ]" src="https://lh3.googleusercontent.com/-CxXg7_7ylq4/AAAAAAAAAAI/AAAAAAAAAQ8/LhCIKQC5Aq4/s46-c-k-no/photo.jpg" alt="Mouse0270" />
<h3>Robert McIntosh</h3>
<h5><span>Shared publicly</span> - <span>Jun 25, 2014</span> </h5>
</div>
<div class="panel-body">
<p>Just created a new snippet inspired by the Svbtle Menu. Find it here: <a href="http://bootsnipp.com/snippets/MaWrA">http://bootsnipp.com/snippets/MaWrA</a></p>
<a class="panel-google-plus-image" href="https://plus.google.com/photos/115077481218689845626/albums/6028961040749409985/6028961040650432498">
<img src="https://lh4.googleusercontent.com/-6oO7re5XALY/U6ssH6ijb_I/AAAAAAAAARQ/CeqYilQH7dI/w426-h428/svbtle-inspired-menu.PNG" />
</a>
</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 class="input-placeholder">Add a comment...</div>
</div>
<div class="panel-google-plus-comment">
<img class="img-circle" src="https://lh3.googleusercontent.com/uFp_tsTJboUY7kue5XAsGA=s46" alt="User Image" />
<div class="panel-google-plus-textarea">
<textarea rows="4"></textarea>
<button type="submit" class="[ btn btn-success disabled ]">Post comment</button>
<button type="reset" class="[ btn btn-default ]">Cancel</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
body {
background-color: rgb(229, 229, 229);
padding-top: 60px;
padding-bottom: 30px;
}
.panel-google-plus {
position: relative;
border-radius: 0px;
border: 1px solid rgb(216, 216, 216);
font-family: 'Roboto', sans-serif;
}
.panel-google-plus > .dropdown {
position: absolute;
top: 5px;
right: 15px;
}
.panel-google-plus > .dropdown > span > span {
font-size: 10px;
}
.panel-google-plus > .dropdown > .dropdown-menu {
left: initial;
right: 0px;
border-radius: 2px;
}
.panel-google-plus > .panel-google-plus-tags {
position: absolute;
top: 35px;
right: -3px;
}
.panel-google-plus > .panel-google-plus-tags > ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.panel-google-plus > .panel-google-plus-tags > ul:hover {
box-shadow: 0px 0px 3px rgb(0, 0, 0);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
}
.panel-google-plus > .panel-google-plus-tags > ul > li {
display: block;
right: 0px;
width: 0px;
padding: 5px 0px 5px 0px;
background-color: rgb(245, 245, 245);
font-size: 12px;
overflow: hidden;
}
.panel-google-plus > .panel-google-plus-tags > ul > li::after {
content:"";
position: absolute;
top: 0px;
right: 0px;
height: 100%;
border-right: 3px solid rgb(66, 127, 237);
}
.panel-google-plus > .panel-google-plus-tags > ul:hover > li,
.panel-google-plus > .panel-google-plus-tags > ul > li:first-child {
padding: 5px 15px 5px 10px;
width: auto;
cursor: pointer;
margin-left: auto;
}
.panel-google-plus > .panel-google-plus-tags > ul:hover > li {
background-color: rgb(255, 255, 255);
}
.panel-google-plus > .panel-google-plus-tags > ul > li:hover {
background-color: rgb(66, 127, 237);
color: rgb(255, 255, 255);
}
.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 > img {
margin-right: 15px;
}
.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-body > .panel-google-plus-image {
display: block;
text-align: center;
background-color: rgb(245, 245, 245);
border: 1px solid rgb(217, 217, 217);
}
.panel-google-plus > .panel-body > .panel-google-plus-image > img {
max-width: 100%;
}
.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 > .panel-footer > .input-placeholder {
display: block;
margin-left: 98px;
color: rgb(153, 153, 153);
font-size: 12px;
font-weight: 400;
padding: 8px 6px 7px;
border: 1px solid rgb(217, 217, 217);
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 0px 0px;
}
.panel-google-plus.panel-google-plus-show-comment > .panel-footer > .input-placeholder {
display: none;
}
.panel-google-plus > .panel-google-plus-comment {
display: none;
padding: 10px 20px 15px;
border-top: 1px solid rgb(229, 229, 229);
background-color: rgb(245, 245, 245);
}
.panel-google-plus.panel-google-plus-show-comment > .panel-google-plus-comment {
display: block;
}
/*.panel-google-plus > .panel-google-plus-comment > img {
float: left;
}*/
.panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea {
float: right;
width: calc(100% - 56px);
}
.panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > textarea {
display: block;
/*margin-left: 60px;
width: calc(100% - 56px);*/
width: 100%;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(217, 217, 217);
box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 0px 0px;
resize: vertical;
}
.panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > .btn {
margin-top: 10px;
margin-right: 8px;
width: 100%;
}
@media (min-width: 992px) {
.panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > .btn {
width: auto;
}
}
.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);
}
Good snippet, but when i tried it on my app the comment form is like disabled.,I would need to see your implementation of the snippet to identify why it isn’t work. Are you able to share it with me? If not can you replicate the issue on codepen.io or jsfiddle.net,it’s just like yours, i didn’t change anything. Or should I?,Yes, but anything else you add or change to even code around it could make an impact. I will need more information to be able to assist you. It is hard to debug this without it.,http://codepen.io/Jessmoi/p…,Thankyou,this example is failing because it isn’t loading jquery or bootstrap.,sorry, it loads the jquery and bootstrap now. But the comment form is still disabled.,You were loading jquery after you loaded bootstrap. check this out: http://codepen.io/mouse0270…,it’s the jquery file then? Thankyou so much, it’s working :D,Why class are inside bracket [ col-xs-12 col-sm-offset-1 col-sm-5 ],This is a personal habit of mine that helps me organize classes so for example a font awesome icon that is floated left with bootstrap and a custom color would look like this. [ fa fa-cog ][ pull-left ][ text-purple ].,hi,Nice….,Nice work dude.,Amazing, thank you 😉 ,i have a question when i use this snipp with angulare it show the post but when you click inside the add a comment input box it does now open i can you pleas advise,happens to me also, but looks like no one has an answer,I would love to help you, but I do not use angularjs and wouldn’t even know what is causing the problem. Sorry.,that good,huy,thanks i was working on the same thing you saved alot of work thanks,You are welcome, glad I could help!,Great!!!,Nice but in firefox isn’t perfect.,It is now firefox friendly! Thanks for letting me know. Hope this helps!,Awe… The problem with programming this at 2300 hours. haha. I only tested it in chrome. I’ll see about patching it up for firefox. It only seems like small issues. Shouldn’t be to hard to fix.,Check back tomorrow it should be all patched up.,Now its ok. Thank you, I’ll use it. :),hj,Amazing – looking snippet!,Thank you, I just wish I didn’t start it at 2300 hours. Didn’t finish until around midnight. Trying to get everything as close to perfect as I could.,The author is mouse0270
Loading...
