paco
This commit is contained in:
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
+39
@@ -0,0 +1,39 @@
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
|
||||
|
||||
body { background: #fff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
|
||||
/* optional Container STYLES */
|
||||
.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
|
||||
.comments { width: 427px; margin: 15px auto; }
|
||||
.comments ul { margin-left: 35px; list-style: none; }
|
||||
.comment {
|
||||
color: #333333;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-top: 6px;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.comment img {
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
float: left;
|
||||
height: 30px;
|
||||
margin-right: 8px;
|
||||
margin-top: 3px;
|
||||
width: 30px;
|
||||
}
|
||||
.comment p {
|
||||
color: #42474A;
|
||||
font-size: 14px;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 0;
|
||||
max-height: 4.2em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comment .user {
|
||||
color: rgba(30, 55, 70, 0.4);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.Treant .comment { margin: 0; padding: 3px; border: 1px solid #ddd; border-radius: 3px; }
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
var config = {
|
||||
container: "#OrganiseChart8",
|
||||
levelSeparation: 70,
|
||||
siblingSeparation: 60,
|
||||
nodeAlign: "BOTTOM",
|
||||
connectors: {
|
||||
type: "step",
|
||||
style: {
|
||||
"stroke-width": 2,
|
||||
"stroke": "#ccc",
|
||||
"stroke-dasharray": "--", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
|
||||
"arrow-end": "classic-wide-long"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
first_post = {
|
||||
innerHTML: "#first-post"
|
||||
},
|
||||
|
||||
first_reply = {
|
||||
parent: first_post,
|
||||
innerHTML: "#first-reply"
|
||||
},
|
||||
|
||||
second_reply = {
|
||||
parent: first_post,
|
||||
innerHTML: "#second-reply"
|
||||
}
|
||||
|
||||
second_reply_reply = {
|
||||
parent: second_reply,
|
||||
innerHTML: "#second-reply-reply"
|
||||
},
|
||||
|
||||
tree_structure = [
|
||||
config, first_post, first_reply, second_reply, second_reply_reply
|
||||
];
|
||||
|
||||
|
||||
/* ALTERNATIVE tree_structure CONFIG, same result as above
|
||||
|
||||
var tree_structure = {
|
||||
chart: {
|
||||
container: "#OrganiseChart8",
|
||||
levelSeparation: 70,
|
||||
siblingSeparation: 60,
|
||||
nodeAlign: "BOTTOM",
|
||||
connectors: {
|
||||
type: "step",
|
||||
style: {
|
||||
"stroke-width": 2,
|
||||
"stroke": "#ccc",
|
||||
"stroke-dasharray": "--",
|
||||
"arrow-end": "classic-wide-long"
|
||||
}
|
||||
}
|
||||
},
|
||||
nodeStructure: {
|
||||
innerHTML: "#first-post",
|
||||
children: [
|
||||
{
|
||||
innerHTML: "#first-reply"
|
||||
},
|
||||
{
|
||||
innerHTML: "#second-reply",
|
||||
children: [
|
||||
{
|
||||
innerHTML: "#second-reply-reply"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
*/
|
||||
|
||||
|
||||
+78
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title> Comments, selector example </title>
|
||||
<link rel="stylesheet" href="../../Treant.css">
|
||||
<link rel="stylesheet" href="example8.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="comments">
|
||||
<ul>
|
||||
<li>
|
||||
<div id="first-post" class="comment">
|
||||
<img alt="Avatar" src="avatar.jpg">
|
||||
<p>
|
||||
<span class="user">John Smitt</span> —
|
||||
<span class="line-truncate">
|
||||
<em>Treant.js</em> is an library that handles drawing and visualisation of tree structural charts. What does that mean?
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div id="first-reply" class="comment">
|
||||
<img alt="Avatar" src="avatar.jpg">
|
||||
<p>
|
||||
<span class="user"> Peter Griffin </span> —
|
||||
<span class="line-truncate">
|
||||
Great collection! A lot of good inspiration. Thanks!
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="second-reply" class="comment">
|
||||
<img alt="Avatar" src="avatar.jpg">
|
||||
<p>
|
||||
<span class="user">Jane Black</span> —
|
||||
<span class="line-truncate">
|
||||
Thanks for tutorial. One issue I have is that all tutorials is on dev environment. What about production? what differences between …
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div id="second-reply-reply" class="comment">
|
||||
<img alt="Avatar" src="avatar.jpg">
|
||||
<p>
|
||||
<span class="user"> Joe Linux </span> —
|
||||
<span class="line-truncate">
|
||||
Looks very promising. I'll have to take a closer look some time.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="chart" id="OrganiseChart8"></div>
|
||||
|
||||
<script src="../../vendor/raphael.js"></script>
|
||||
<script src="../../Treant.js"></script>
|
||||
|
||||
|
||||
<script src="example8.js"></script>
|
||||
<script>
|
||||
new Treant( tree_structure );
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user