<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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/macio2/pen/pbOgmX?limit=all&page=4&q=comment" />
<style class="cp-pen-styles">body {
background-color: #e9ebee;
color: #1d2129;
}
#app {
background-color: #fff;
font-family: helvetica;
margin: 30px auto;
width: 500px;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
}
.creator {
position: relative;
}
.creator img {
width: 40px;
height: 40px;
background-image: url(http://cp91279.biography.com/1000509261001/1000509261001_1822909398001_BIO-Biography-29-Innovators-Mark-Zuckerberg-115956-SF.jpg);
background-size: cover;
background-position: center;
margin: 12px 0 0 12px;
position: absolute;
}
.creator div {
display: inline-block;
margin-left: 60px;
}
.creator div p {
font-size: 14px;
}
.creator div p:first-of-type {
cursor: pointer;
font-weight: bold;
color: #365899;
}
.creator div p:first-of-type:hover {
text-decoration: underline;
}
.creator div p:last-of-type {
font-size: 12px;
color: #90949c;
margin-top: -10px;
}
.message {
font-size: 14px;
margin-top: 8px;
padding: 0 12px;
line-height: 18px;
}
.bar {
width: calc(100% - 24px);
border-top: 1px solid #e5e5e5;
margin: 0 12px;
}
.bar .action-button {
margin-left: 20px;
display: inline-block;
font-size: 12px;
font-weight: bold;
color: #7f7f7f;
cursor: pointer;
}
.bar .action-button:before {
content: '';
background-image: url(https://www.facebook.com/rsrc.php/v2/yo/r/7-oMGl7sBZ-.png);
display: inline-block;
height: 14px;
margin: 0 6px -3px 0;
width: 14px;
background-repeat: no-repeat;
background-size: auto;
}
.bar .action-button:first-of-type {
margin: 0;
}
.bar .action-button:first-of-type:before {
content: '';
background-position: -47px -164px;
}
.bar .action-button:nth-of-type(2):before {
background-position: -32px -164px;
}
.bar .action-button:nth-of-type(3):before {
background-position: -45px -181px;
}
.bar .action-button:hover {
text-decoration: underline;
}
.single-comment {
padding: 0 0 0 12px;
margin: 0;
}
.single-comment:first-of-type {
border-top: 1px solid #e1e2e3;
padding-top: 12px;
}
.single-comment:first-of-type img {
background-image: url(http://static.srcdn.com/slir/w730-h383-q90-c730:383/wp-content/uploads/Batman-Movies-Worst-Moments.jpg);
}
.single-comment:nth-of-type(2) img {
background-image: url(http://cp91279.biography.com/1000509261001/1000509261001_1822909398001_BIO-Biography-29-Innovators-Mark-Zuckerberg-115956-SF.jpg);
}
.single-comment img {
position: absolute;
width: 32px;
height: 32px;
background-image: url(https://heatherchristenaschmidt.files.wordpress.com/2011/09/facebook_no_profile_pic2-jpg.gif);
background-size: cover;
background-position: center;
border: none;
}
.single-comment .single-container {
padding-left: 40px;
padding-right: 20px;
}
.single-comment .single-container span {
font-size: 12px;
margin-left: 5px;
}
.single-comment .single-container span:first-of-type {
cursor: pointer;
font-weight: bold;
color: #365899;
font-size: 12px;
margin: 0;
}
.single-comment .single-container span:first-of-type:hover {
text-decoration: underline;
}
.single-comment .buttons {
margin-top: 0;
padding-left: 40px;
}
.single-comment .buttons p {
display: inline-block;
color: #365899;
cursor: pointer;
text-decoration: none;
font-size: 12px;
margin-right: 8px;
margin-top: 5px;
}
.single-comment .buttons p:hover {
text-decoration: underline;
}
.single-comment .buttons p:last-of-type {
color: #90949c;
cursor: auto;
text-decoration: none;
}
.comment-section {
background-color: #f6f7f9;
margin: 0;
}
.input {
margin-top: 0;
background-color: #f6f7f9;
padding: 4px 12px 8px 12px;
}
.input img {
width: 32px;
height: 32px;
background-image: url(https://heatherchristenaschmidt.files.wordpress.com/2011/09/facebook_no_profile_pic2-jpg.gif);
background-size: cover;
background-position: center;
border: none;
position: absolute;
}
.input textarea {
background: #fff;
border: 1px solid #bdc7d8;
box-sizing: border-box;
cursor: text;
width: calc(100% - 40px);
margin-left: 40px;
padding: 7px;
font-family: helvetica;
outline: none;
resize: none;
overflow: hidden;
height: 32px;
}
</style></head><body>
<!--
I do not own any off the used images. Also I'm a total beginner so any comments and suggestions would be awesome!
This is not in any way connected with facebook, so don't worry, you won't post anything on your profile :)
-->
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://fb.me/react-15.1.0.min.js'></script><script src='https://fb.me/react-dom-15.1.0.min.js'></script>
<script >"use strict";
var appId = "app";
var main = document.createElement("DIV");
main.id = appId;
document.body.appendChild(main);
var app = document.getElementById('app');
var Hour = React.createClass({
displayName: "Hour",
getDefaultProps: function getDefaultProps() {
return {
time: 42
};
},
render: function render() {
return React.createElement(
"p",
null,
this.props.time,
" h"
);
}
});
var Creator = React.createClass({
displayName: "Creator",
getDefaultProps: function getDefaultProps() {
return {
name: "Mark Zuckerberg"
};
},
render: function render() {
return React.createElement(
"div",
{ className: "creator" },
React.createElement("img", null),
React.createElement(
"div",
null,
React.createElement(
"p",
null,
this.props.name
),
React.createElement(Hour, { time: 4 })
)
);
}
});
var Message = React.createClass({
displayName: "Message",
render: function render() {
return React.createElement(
"p",
{ className: "message" },
"Omg it's snowing outside!"
);
}
});
var Action = React.createClass({
displayName: "Action",
render: function render() {
return React.createElement(
"p",
{ className: "action-button" },
this.props.text
);
}
});
var Bar = React.createClass({
displayName: "Bar",
render: function render() {
return React.createElement(
"div",
{ className: "bar" },
React.createElement(Action, { text: "Like!" }),
React.createElement(Action, { text: "Comment" }),
React.createElement(Action, { text: "Share" })
);
}
});
var Comment = React.createClass({
displayName: "Comment",
getDefaultProps: function getDefaultProps() {
return { name: "Douglas Adams" };
},
render: function render() {
return React.createElement(
"div",
{ className: "single-comment" },
React.createElement("img", null),
React.createElement(
"div",
{ className: "single-container" },
React.createElement(
"span",
null,
this.props.name
),
React.createElement(
"span",
null,
this.props.children
)
),
React.createElement(
"div",
{ className: "buttons" },
React.createElement(Action, { text: "Like!" }),
React.createElement(Action, { text: "Respond" }),
React.createElement(Hour, { time: this.props.time })
)
);
}
});
var CommentSection = React.createClass({
displayName: "CommentSection",
getInitialState: function getInitialState() {
return {
comments: []
};
},
_eachComment: function _eachComment(text, i) {
return React.createElement(
Comment,
{ key: i, index: i, removeComment: this._deleteComment },
text
);
},
_addComment: function _addComment(text) {
var arr = this.state.comments;
arr.push(text);
this.setState({ comments: arr });
},
_handleKeyPress: function _handleKeyPress(e) {
if (e.key === "Enter") {
this._addComment(this.refs.newText.value);
this.refs.newText.value = "";
e.preventDefault();
}
},
render: function render() {
return React.createElement(
"div",
null,
React.createElement(
"div",
{ className: "comment-section" },
React.createElement(
Comment,
{ name: "Bruce Wayne", time: 3 },
"Mark, we have windows..."
),
React.createElement(
Comment,
{ name: "Mark Zuckerberg", time: 2 },
"Shut up Bruce"
),
this.state.comments.map(this._eachComment)
),
React.createElement(
"div",
{ className: "input" },
React.createElement("img", null),
React.createElement("textarea", { ref: "newText", onKeyPress: this._handleKeyPress, placeholder: "Write a comment..." })
)
);
}
});
var Post = React.createElement(
"div",
null,
React.createElement(Creator, null),
React.createElement(Message, null),
React.createElement(Bar, null),
React.createElement(CommentSection, null)
);
ReactDOM.render(Post, app);
// Normal js
var textarea = document.getElementsByTagName('textarea')[0];
textarea.onkeyup = function () {
textarea.style.height = "34px";
textarea.style.height = textarea.scrollHeight + "px";
};
/* */
//# sourceURL=pen.js
</script>
</body></html>
