From d6e4312e471fea67d6df45b0acdc562f674f34d5 Mon Sep 17 00:00:00 2001
From: posativ <info@posativ.org>
Date: Sun, 21 Oct 2012 22:26:05 +0200
Subject: [PATCH] threaded comments :>

---
 isso/static/post.html | 24 +++++++++++++++---------
 isso/static/style.css |  7 ++++++-
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/isso/static/post.html b/isso/static/post.html
index 584fd3b..b4bbace 100644
--- a/isso/static/post.html
+++ b/isso/static/post.html
@@ -61,7 +61,8 @@
                     text: text,
                     author: $('input[id="author"]').val() || null,
                     email: $('input[id="email"]').val() || null,
-                    website: $('input[id="website"]').val() || null
+                    website: $('input[id="website"]').val() || null,
+                    parent: id
                 }),
                 error: function(resp) {
                     alert("Mööp.");
@@ -114,22 +115,27 @@
             author = '<a href="' + post['website'] + '" rel="nofollow">' + author + '</a>';
         }
 
-
         var date = new Date(parseInt(post['created']) * 1000);
 
-        $('#isso_thread ul').append(
-            '<article class="isso">' +
-            '  <header><span class="author">' + author + '</span> schrieb am' +
-            '    <span class="date">' + format(date, 'de', '%d. %B %Y um %H:%M') + ':' +
-            '    </span>' +
+        // create <ul /> for parent, if used
+        if (post['parent']) {
+            $('#isso_' + post['parent']).append('<ul></ul>');
+        }
+
+        $(post['parent'] ? '#isso_' + post['parent'] + ' ul' : '#isso_thread ul').append(
+            '<article class="isso" id="isso_' + post['id'] + '">' +
+            '  <header><span class="author">' + author + '</span>' +
             '  </header>' + post['text'] +
             '  <footer>' +
-            '    <a href="#" id="isso_' + post['id'] + '">Antworten</a>' +
+            '    <a href="#">Antworten</a>' +
+            '    <a href="#isso_' + post['id'] + '">#' + post['id'] + '</a>' +
+            '    <span class="date">' + format(date, 'de', '%d.%m.%Y um %H:%M') +
+            '    </span>' +
             '  </footer>' +
             '</article>');
 
         // ability to answer directly to a comment
-        $('#isso_' + post['id']).on('click', function(event) {
+        $('footer > a:first-child', '#isso_' + post['id']).on('click', function(event) {
 
             if ($('#issoform_' + post['id']).length == 0) {
                 createForm(post['id'], function(html) {$('#isso_' + post['id']).after(html)});
diff --git a/isso/static/style.css b/isso/static/style.css
index 7a7c923..6d3d65e 100644
--- a/isso/static/style.css
+++ b/isso/static/style.css
@@ -13,13 +13,18 @@
 }
 
 .isso .date {
-    color: gray;
+    color: lightgray;
+    padding-left: 12px;
 }
 
 .isso header {
     border-bottom: solid 1px lightgray;
 }
 
+.isso + .issoform {
+    margin-left: 20px;
+}
+
 .issoform input, .issoform textarea {
     border: 4px solid rgba(0,0,0,0.1);
     padding: 8px 10px;