This commit is contained in:
root
2019-12-13 22:20:23 +00:00
parent 3c32a4b96c
commit 1a4d72f145
136 changed files with 7187 additions and 138 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

+39
View File
@@ -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
View File
@@ -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
View File
@@ -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> &mdash;
<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> &mdash;
<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> &mdash;
<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> &mdash;
<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>