optional use of schnack icon font

DayFan · Oct 20, 2017 · 36aa77e · 36aa77e
1 parent 3ca31d6
commit 36aa77e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/build/embed.js b/build/embed.js
diff --git a/src/embed/comments.jst.html b/src/embed/comments.jst.html
@@ -22,26 +22,28 @@
 <% } %>
 <ul class="schnack-comments">
     <% data.comments.forEach((comment) => { %>
-        <li class="schnack-comment<% if (!comment.approved && !comment.trusted) { %> schnack-not-approved<% } %>">
+        <li data-id="<%= comment.id %>" class="schnack-comment<% if (!comment.approved && !comment.trusted) { %> schnack-not-approved<% } %>">
             <div class="schnack-dateline">
                 <span class="schnack-author"><% if (comment.author_url) { %><a href="<%= comment.author_url %>" target="_blank"><% } %><%= comment.display_name || comment.name %><% if (comment.author_url) { %></a><% } %></span>
-                <span class="schnack-date"><%= comment.created_at_s %>:</span>
                 <% if (data.user && data.user.admin &&!comment.trusted) {
                 ['trust', 'block'].forEach((action) => { %>
-                <button class="schnack-action" data-target="<%= comment.user_id %>" data-class="user" data-action="<%= action %>"><%= action %></button>
+                <button class="schnack-action" data-target="<%= comment.user_id %>" data-class="user" data-action="<%= action %>"><i class="icon schnack-icon-<%= action %>"></i> <span><%= action %></span></button>
                 <% }); } %>
+                <span class="schnack-date"><%= comment.created_at_s %></span>
             </div>
             <blockquote class="schnack-body">
                 <%= comment.comment %>
             </blockquote>
             <% if (!comment.approved && !comment.trusted) { %>
             <div class="schnack-awaiting-approval">
-                This comment is still waiting for <%= data.user.admin ? 'your ' : '' %>approval<%= !data.user.admin ? ' by the site owner' : ''%>.
                 <% if (data.user && data.user.admin) {
                 ['approve', 'reject'].forEach((action) => { %>
-                <button class="schnack-action" data-target="<%= comment.id %>" data-class="comment" data-action="<%= action %>"><%= action %></button>
+                <button class="schnack-action" data-target="<%= comment.id %>" data-class="comment" data-action="<%= action %>"><i class="icon schnack-icon-<%= action %>"></i> <span><%= action %></span></button>
                 <% }); } %>
+                This comment is still waiting for <%= data.user.admin ? 'your ' : '' %>approval<%= !data.user.admin ? ' by the site owner' : ''%>.
             </div>
+            <% } else { %>
+            <button>reply</button>
             <% } %>
         </li>
     <% }) %>

diff --git a/test/index.html b/test/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>schnack.js test page</title>
   <link rel="stylesheet" type="text/css" href="schnack.css">
+  <link rel="stylesheet" type="text/css" href="schnack-icons.css">
 </head>
 <body>
     <script type="text/javascript"

diff --git a/test/schnack.css b/test/schnack.css
@@ -19,4 +19,22 @@ li.schnack-comment {
 
 .schnack-body p {
     margin: 0;
+}
+
+button.schnack-action {
+    border:0;
+    background: none;
+    cursor: pointer;
+    padding:0;
+    opacity: 0.5;
+}
+
+
+button.schnack-action:hover {
+    color: #c00;
+    opacity: 1;
+}
+
+button.schnack-action span {
+    display: none;
 }