Make comments prettier

1 files changed, 67 insertions, 0 deletions

diff --git a/templates/comment.tmpl b/templates/comment.tmpl
new file mode 100644
index 0000000..30602eb
--- /dev/null
+++ b/templates/comment.tmpl
@@ -0,0 +1,67 @@
+<TMPL_IF HTML5><article class="comment row" id="<TMPL_VAR COMMENTID>">
+<TMPL_ELSE><div class="comment row" id="<TMPL_VAR COMMENTID>"></TMPL_IF>
+
+<!-- User avatar in a small column on the left -->
+<div class="col-md-1 col-sm-1 col-xs-1">
+  <TMPL_IF COMMENTAUTHORAVATAR>
+    <div class="comment-avatar">
+      <img src="<TMPL_VAR COMMENTAUTHORAVATAR>" alt="Avatar" class="img-responsive img-circle" />
+    </div>
+  </TMPL_IF>
+</div>
+
+<div class="col-md-11 col-sm-11 col-xs-11">
+  <!-- HEADER: Print the name of the comment poster and the date -->
+  <header class="comment-subject text-muted row" style="margin-bottom:1em;">
+    <div class="col-md-6 col-sm-6 col-xs-6"> <!-- Author -->
+      <strong>
+        <TMPL_IF COMMENTUSER>
+          <TMPL_IF COMMENTOPENID>
+            <a class="text-muted" href="<TMPL_VAR COMMENTOPENID>"><TMPL_VAR COMMENTAUTHOR></a>
+          <TMPL_ELSE>
+            <TMPL_IF COMMENTAUTHORURL>
+              <a class="text-muted" href="<TMPL_VAR COMMENTAUTHORURL>"><TMPL_VAR COMMENTAUTHOR></a>
+            <TMPL_ELSE>
+              <TMPL_VAR COMMENTAUTHOR>
+            </TMPL_IF>
+          </TMPL_IF>
+        <TMPL_ELSE>
+          <TMPL_IF AUTHOR>
+            <TMPL_IF AUTHORURL>
+              <a class="text-muted" href="<TMPL_VAR AUTHORURL>"><TMPL_VAR AUTHOR></a>
+            <TMPL_ELSE>
+              <TMPL_VAR AUTHOR>
+            </TMPL_IF>
+          </TMPL_IF>
+        </TMPL_IF>
+      </strong>
+    </div>
+    <!-- Date --><div class="col-md-6 col-sm-6 col-xs-6 text-right"><TMPL_VAR CTIME></div>
+  </header>
+
+  <section class="inlinecontent" style="margin-top:1em">
+    <strong><TMPL_VAR TITLE></strong><br/>
+    <TMPL_VAR CONTENT>
+  </section>
+
+  <div class="text-right">
+    <!-- Show the link to remove comments (probably admin only) -->
+    <TMPL_IF REMOVEURL>
+      <a href="<TMPL_VAR PERMALINK>" class="text-muted" title="Remove comment">
+        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
+        <span class="sr-only">Remove comment</span>
+      </a>
+    </TMPL_IF>
+    <!-- Show the permalink as a chain icon on the bottom right of the post
+         But make it accessible to screen readers -->
+    <TMPL_IF PERMALINK>
+      <a href="<TMPL_VAR PERMALINK>" class="text-muted" title="Permalink">
+        <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
+        <span class="sr-only">Permalink</span>
+      </a>
+    </TMPL_IF>
+  </div>
+
+</div>
+<TMPL_IF HTML5></article><TMPL_ELSE></div></TMPL_IF>
+<hr />