Make comments prettier

3 files changed, 79 insertions, 3 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 />
diff --git a/templates/feedlink.tmpl b/templates/feedlink.tmpl
new file mode 100644
index 0000000..7d82c02
--- /dev/null
+++ b/templates/feedlink.tmpl
@@ -0,0 +1,8 @@
+<div class="text-right" style="margin-top:1em; margin-bottom:1em;">
+  <TMPL_IF RSSURL>
+    <a class="label label-info" type="application/rss+xml" rel="alternate" title="<TMPL_VAR RSSDESC>" href="<TMPL_VAR RSSURL>">RSS</a>
+  </TMPL_IF>
+  <TMPL_IF ATOMURL>
+    <a class="label label-info" type="application/atom+xml" rel="alternate" title="<TMPL_VAR ATOMDESC>" href="<TMPL_VAR ATOMURL>">Atom</a>
+  </TMPL_IF>
+</div>
diff --git a/templates/page.tmpl b/templates/page.tmpl
index 5ead3c0..14d48d9 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -146,11 +146,12 @@
       </p>
 
       <TMPL_IF COMMENTS>
-        <div id="comments">
+        <h2>Comments</h2>
+        <div id="comments" style="margin-bottom:2em;">
         <TMPL_VAR COMMENTS>
         <TMPL_IF ADDCOMMENTURL>
-          <div class="addcomment">
-            <a href="<TMPL_VAR ADDCOMMENTURL>">Add a comment</a>
+          <div class="addcomment text-right">
+            <a class="btn btn-primary" href="<TMPL_VAR ADDCOMMENTURL>">Add a comment</a>
           </div>
         <TMPL_ELSE>
           <div class="addcomment">Comments on this page are closed.</div>