From fa73b481e6af14d2509a9893e9032e8e36839ea8 Mon Sep 17 00:00:00 2001
From: str4d <str4d@mail.i2p>
Date: Sun, 21 May 2017 02:59:50 +0000
Subject: [PATCH] i2psnark: Integrate ratings and comments into themes

---
 .../org/klomp/snark/web/I2PSnarkServlet.java  | 151 +++++++-----
 history.txt                                   |   3 +
 .../resources/themes/snark/classic/snark.css  | 191 +++++++++++++++
 .../resources/themes/snark/dark/snark.css     | 194 +++++++++++++++
 .../resources/themes/snark/light/snark.css    | 191 +++++++++++++++
 .../resources/themes/snark/midnight/snark.css | 192 +++++++++++++++
 .../resources/themes/snark/ubergine/snark.css | 191 +++++++++++++++
 .../resources/themes/snark/vanilla/snark.css  | 222 +++++++++++++++++-
 8 files changed, 1275 insertions(+), 60 deletions(-)

diff --git a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
index f0c2987cc..0a6e096b4 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
@@ -2429,25 +2429,29 @@ public class I2PSnarkServlet extends BasicServlet {
                   + "title=\"");
         out.write(_t("Use DHT to find additional peers"));
         out.write("\" ></td></tr>\n" +
-        
-                  "<tr><td>");
+
+                  "<tr><td><label for=\"ratings\">");
         out.write(_t("Enable Ratings"));
-        out.write(": <td><input type=\"checkbox\" class=\"optbox\" name=\"ratings\" value=\"true\" " 
+        out.write(":</label><td colspan=\"2\"><input type=\"checkbox\" class=\"optbox\" name=\"ratings\" id=\"ratings\" value=\"true\" "
                   + (useRatings ? "checked " : "") 
                   + "title=\"");
         out.write(_t("Show ratings on torrent pages"));
         out.write("\" ></td></tr>\n" +
-        
-                  "<tr><td>");
+
+                  "<tr><td><label for=\"comments\">");
         out.write(_t("Enable Comments"));
-        out.write(": <td><input type=\"checkbox\" class=\"optbox\" name=\"comments\" value=\"true\" " 
+        out.write(":</label><td colspan=\"2\"><input type=\"checkbox\" class=\"optbox\" name=\"comments\" id=\"comments\" value=\"true\" "
                   + (useComments ? "checked " : "") 
                   + "title=\"");
         out.write(_t("Show comments on torrent pages"));
-        out.write("\"> ");
-        out.write(_t("Your commenter name"));
-        out.write(": <input type=\"text\" name=\"nofilter_commentsName\" spellcheck=\"false\" value=\"" 
-                      + DataHelper.escapeHTML(_manager.util().getCommentsName()) + "\" size=\"32\" maxlength=\"32\" > " +
+        out.write("\"></td></tr><tr id=\"configureAuthor\"><td>");
+        out.write(_t("Comment Author"));
+        out.write(":</td><td colspan=\"2\"><input type=\"text\" name=\"nofilter_commentsName\" spellcheck=\"false\" value=\""
+                      + DataHelper.escapeHTML(_manager.util().getCommentsName()) + "\" size=\"32\" maxlength=\"32\" title=\"");
+            out.write(_t("Set the author name for your comments"));
+            out.write("\" placeholder=\"");
+            out.write(_t("required to post comments"));
+            out.write("\" >" +
                   "</td></tr>\n");
 
         //          "<tr><td>");
@@ -3444,32 +3448,62 @@ public class I2PSnarkServlet extends BasicServlet {
             Iterator<Comment> iter = null;
             int myRating = 0;
             CommentSet comments = snark.getComments();
-            buf.append("<table class=\"snarkCommentInfo\"><tr><th colspan=\"5\">")
-               .append(_t("Ratings and Comments"))
-               .append("</th><tr><td>");
+
+            buf.append("<table class=\"snarkCommentInfo\"><tr><th colspan=\"3\">")
+               .append(_t("Ratings and Comments"));
+            if (esc && _manager.util().getCommentsName().length() == 0) {
+                buf.append("&nbsp;&nbsp;&nbsp;<span id=\"nameRequired\">");
+                buf.append(_t("Author name required to post comments"));
+                buf.append("&nbsp;&nbsp;<a href=\"").append(_contextPath).append("/configure#configureAuthor\">");
+                buf.append(_t("[Configure]"));
+                buf.append("</a></span>");
+            }
+
+            buf.append("</th><tr id=\"commentsConfig\"><td>");
+            buf.append(_t("Comments"));
+            buf.append(":</td><td><label><input type=\"checkbox\" class=\"optbox\" name=\"enableComments\" id=\"enableComments\" ");
+            if (esc)
+                buf.append("checked=\"checked\"");
+            else if (!ec)
+                buf.append("disabled=\"disabled\"");
+            buf.append(">&nbsp;");
+            buf.append(_t("Enable viewing and posting comments for this torrent"));
+            buf.append("</label></td><td class=\"commentAction\">");
+            if (ec) {
+                buf.append("<input type=\"submit\" name=\"setCommentsEnabled\" value=\"");
+                buf.append(_t("Save Preference"));
+                buf.append("\" class=\"accept\">\n");
+            }
+            buf.append("</td></tr>");
+
             if (comments != null) {
                 synchronized(comments) {
                     // current rating
                     if (er) {
+                        buf.append("<tr id=\"myRating\"><td>");
                         myRating = comments.getMyRating();
                         if (myRating > 0) {
-                            buf.append(_t("My Rating")).append(": ");
-                            String img = toImg("itoopie_xxsm");
+                            buf.append(_t("My Rating")).append(":</td><td colspan=\"2\" class=\"commentRating\">");
+                            String img = toThemeImg("rateme", "★", "");
                             for (int i = 0; i < myRating; i++) {
                                 buf.append(img);
                             }
                         }
+                        buf.append("</td></tr>");
                     }
-                    buf.append("</td><td>");
                     if (er) {
+                        buf.append("<tr id=\"showRatings\"><td>");
                         int rcnt = comments.getRatingCount();
                         if (rcnt > 0) {
                             double avg = comments.getAverageRating();
-                            buf.append(_t("Average Rating")).append(": ").append(avg);  // todo format
+                            buf.append(_t("Average Rating")).append(":</td><td>").append(avg);  // todo format
                             //buf.append(' ').append(_t("Total Ratings")).append(": ").append(rcnt);
                         } else {
-                            buf.append(_t("No ratings for this torrent"));
+
+                            buf.append(_t("Average Rating")).append(":</td><td colspan=\"2\">");
+                            buf.append(_t("No community ratings currently available for this torrent"));
                         }
+                        buf.append("</td></tr>");
                     }
                     if (ec) {
                         int sz = comments.size();
@@ -3477,53 +3511,36 @@ public class I2PSnarkServlet extends BasicServlet {
                             iter = comments.iterator();
                     }
                 }
-            } else {
-                buf.append("</td><td>");
             }
-            buf.append("</td><td></td><td>");
-            buf.append(_t("Comments Enabled for this Torrent"));
-            buf.append(": <input type=\"checkbox\" class=\"optbox\" name=\"enableComments\" ");
-            if (esc)
-                buf.append("checked=\"checked\"");
-            else if (!ec)
-                buf.append("disabled=\"disabled\"");
-            buf.append("></td><td>");
-            if (ec) {
-                buf.append("&nbsp;&nbsp;&nbsp;<input type=\"submit\" name=\"setCommentsEnabled\" value=\"");
-                buf.append(_t("Save Comments Setting"));
-                buf.append("\" class=\"accept\">\n");
-            }
-            if (esc && _manager.util().getCommentsName().length() == 0) {
-                buf.append("<br><a href=\"").append(_contextPath).append("/configure\">");
-                buf.append(_t("Please configure your name for comments on the configuration page"));
-                buf.append("</a>");
-            }
-            buf.append("</td></tr><tr><td>");
+
             // new rating / comment form
+            buf.append("<tr id=\"newRating\"><td>");
             if (er) {
-                buf.append("&nbsp;&nbsp;&nbsp;<select name=\"myRating\">");
+                buf.append("<select name=\"myRating\">");
                 for (int i = 5; i >= 0; i--) {
                     buf.append("<option value=\"").append(i).append("\" ");
                     if (i == myRating)
                         buf.append("selected=\"selected\"");
                     buf.append('>');
                     if (i != 0) {
-                        buf.append(ngettext("{0} toopie", "{0} toopies", i));
+                        buf.append("★ ").append(ngettext("{0} star", "{0} stars", i));
                     } else {
-                        buf.append(_t("no rating"));
+                        buf.append("☆ ").append(_t("No rating"));
                     }
                     buf.append("</option>\n");
                 }
-                buf.append("</select></td><td></td><td>\n");
+                buf.append("</select></td>");
             }
             if (esc) {
-                buf.append("<textarea name=\"nofilter_newComment\" cols=\"44\" rows=\"4\"></textarea>");
+                buf.append("<td id=\"addCommentText\"><textarea name=\"nofilter_newComment\" cols=\"44\" rows=\"4\"></textarea></td>");
+            } else {
+                buf.append("<td></td>");
             }
-            buf.append("</td><td></td><td><input type=\"submit\" name=\"addComment\" value=\"");
+            buf.append("<td class=\"commentAction\"><input type=\"submit\" name=\"addComment\" value=\"");
             if (er && esc)
-                buf.append(_t("Add Rating and Comment"));
+                buf.append(_t("Rate and Comment"));
             else if (er)
-                buf.append(_t("Add Rating"));
+                buf.append(_t("Rate Torrent"));
             else
                 buf.append(_t("Add Comment"));
             buf.append("\" class=\"accept\">\n");
@@ -3535,41 +3552,61 @@ public class I2PSnarkServlet extends BasicServlet {
                 SimpleDateFormat fmt = new SimpleDateFormat("yyyy-MM-dd HH:mm");
                 fmt.setTimeZone(SystemVersion.getSystemTimeZone(_context));
                 buf.append("<table class=\"snarkComments\">");
+
+                // TODO Make .commentText and .commentDelete columns display only when comments are enabled
+                // buf.append("<tr><th class=\"commentAuthor\">");
+                // buf.append(_t("Author"));
+                // buf.append("</th><th class=\"commentRating\">");
+                // buf.append(_t("Rating"));
+                // buf.append("</th><th class=\"commentDate\">");
+                // buf.append(_t("Date"));
+                // buf.append("</th><th class=\"commentText\">");
+                // buf.append(_t("Comment"));
+                // buf.append("</th><th class=\"commentDelete\" title=\"");
+                // buf.append(_t("Mark for deletion"));
+                // buf.append("\"></th></tr>");
+
                 while (iter.hasNext()) {
                     Comment c = iter.next();
-                    buf.append("<tr><td>");
+                    buf.append("<tr><td class=\"commentAuthor\">");
                     // (c.isMine())
                     //  buf.append(_t("me"));
                     //else if (c.getName() != null)
                     // TODO can't be hidden... hide if comments are hidden?
-                    if (c.getName() != null)
+                    if (c.getName() != null) {
+                        buf.append("<span class=\"commentAuthorName\">");
                         buf.append(DataHelper.escapeHTML(c.getName()));
-                    buf.append("</td><td>");
+                        buf.append("</span>");
+                    }
+                    buf.append("</td><td class=\"commentRating\">");
                     if (er) {
                         int rt = c.getRating();
                         if (rt > 0) {
-                            String img = toImg("itoopie_xxsm");
+                            String img = toThemeImg("rateme", "★", "");
                             for (int i = 0; i < rt; i++) {
                                 buf.append(img);
                             }
                         }
                     }
-                    buf.append("</td><td>").append(fmt.format(new Date(c.getTime())));
+                    buf.append("</td><td class=\"commentDate\">").append(fmt.format(new Date(c.getTime())));
+                    buf.append("</td><td class=\"commentText\">");
                     if (esc) {
-                        buf.append("</td><td>");
                         if (c.getText() != null) {
+                            buf.append("<div class=\"commentWrapper\">");
                             buf.append(DataHelper.escapeHTML(c.getText()));
-                            buf.append("</td><td><input type=\"checkbox\" class=\"optbox\" name=\"cdelete.")
-                               .append(c.getID()).append("\" title=\"").append(_t("Delete")).append("\">");
+                            buf.append("</div></td><td class=\"commentDelete\"><input type=\"checkbox\" class=\"optbox\" name=\"cdelete.")
+                               .append(c.getID()).append("\" title=\"").append(_t("Mark for deletion")).append("\">");
                             ccount++;
                         }
+                    } else {
+                        buf.append("</td><td class=\"commentDelete\">"); // insert empty named columns to maintain table layout
                     }
                     buf.append("</td></tr>\n");
                 }
                 if (esc && ccount > 0) {
                     // TODO format better
-                    buf.append("<tr><td colspan=\"5\" align=\"right\"><input type=\"submit\" name=\"deleteComments\" value=\"");
-                    buf.append(_t("Delete Selected Comments"));
+                    buf.append("<tr id=\"commentDeleteAction\"><td colspan=\"5\" class=\"commentAction\" align=\"right\"><input type=\"submit\" name=\"deleteComments\" value=\"");
+                    buf.append(_t("Delete Selected"));
                     buf.append("\" class=\"delete\"></td></tr>\n");
                 }
                 buf.append("</table>");
diff --git a/history.txt b/history.txt
index 02159a93d..05bf51ef8 100644
--- a/history.txt
+++ b/history.txt
@@ -1,3 +1,6 @@
+2017-05-21 str4d
+ * i2psnark: Integrate ratings and comments into themes
+
 2017-05-20 str4d
  * Console:
    - Clarify choices on address helper save page (ticket #1940)
diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css
index cda37082b..962a999c9 100644
--- a/installer/resources/themes/snark/classic/snark.css
+++ b/installer/resources/themes/snark/classic/snark.css
@@ -2475,3 +2475,194 @@ td.snarkTorrentDownloaded {
 }
 /* end responsive layout */
 
+/* Comments Section */
+/* TODO: merge with other rules where applicable */
+
+.snarkCommentInfo, .snarkComments {
+     margin: 10px 0 0 !important;
+     border: 1px solid #bbf;
+     border-left: none;
+     border-right: none;
+}
+
+.snarkCommentInfo th, .snarkComments th {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo th:last-child {
+     text-align: right;
+}
+
+.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
+     border-top: 1px solid #bbf;
+     background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px) #fff;
+}
+
+.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
+     border-top: 1px solid #bbf;
+     background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fff;
+}
+
+.snarkCommentInfo th {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo td, .snarkComments td {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo td:first-child {
+     white-space: nowrap;
+}
+
+.snarkCommentInfo td:first-child {
+     font-weight: bold;
+}
+
+.snarkCommentInfo td:first-child::after, .snarkComments td:first-child::after {
+     content: "";
+     display: inline-block;
+     min-height: 32px;
+     vertical-align: middle;
+}
+
+.snarkCommentInfo input.accept {
+     float: right;
+     margin-right: 5px !important;
+}
+
+.snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
+     width: 100%;
+     min-height: 64px;
+     height: 64px;
+     resize: vertical;
+}
+
+.snarkComments th {
+     text-align: left;
+}
+
+.commentRating, .commentAuthor {
+     width: 1%;
+}
+
+#nameRequired {
+     float: right;
+}
+
+.commentRating {
+     padding-right: 10px !important;
+}
+
+.commentRating img {
+     margin: 0;
+     padding: 0;
+}
+
+.commentDate {
+     width: 100px;
+     background: url(images/clock.png) left center no-repeat;
+     padding-left: 20px !important;
+}
+
+.snarkCommentInfo td:first-child, .snarkComments td:first-child {
+     width: 160px !important;
+     padding-right: 2px;
+}
+
+.snarkCommentInfo td:last-child, .snarkComments td:last-child {
+     width: 1% !important;
+}
+
+.snarkComments td {
+     white-space: nowrap;
+}
+
+.commentAuthorName {
+     background: url(images/author.png) left center no-repeat;
+     padding-left: 20px;
+}
+
+td.commentText {
+     white-space: normal;
+     text-align: justify;
+}
+
+.commentWrapper {
+     border: 1px solid #bbf;
+     margin: 2px 0;
+     padding: 8px 10px 8px 26px;
+     border-radius: 3px;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 rgba(0,0,0,0.3);
+     background: url(images/comment.png) 6px center no-repeat #eef;
+     background-blend-mode: luminosity;
+}
+
+.commentText .optbox {
+     position: fixed;
+     right: 20px;
+     top: 10px;
+}
+
+#commentsConfig .optbox {
+     vertical-align: middle !important;
+}
+
+.snarkComments select {
+     margin-right: 0 !important;
+}
+
+#commentDeleteAction {
+     border-top: 1px solid #bbf;
+     background: linear-gradient(to bottom, #fff, #eef);
+}
+
+#commentDeleteAction td {
+     padding-right: 6px;
+}
+
+.commentAction, .commentDelete {
+     width: 1%;
+     white-space: nowrap;
+     min-width: 180px !important;
+     padding-left: 0;
+}
+
+.addCommentText, .commentText {
+     padding-right: 0;
+}
+
+.commentAction input[type="submit"] {
+     margin-top: 10px;
+     margin-bottom: 10px;
+}
+
+.commentDelete {
+     text-align: left;
+}
+
+#newRating td {
+     padding-top: 10px !important;
+     padding-bottom: 10px !important;
+}
+
+#myRating td:empty {
+     padding: 0 !important;
+     border-top: none !important;
+     border-bottom: none !important;
+}
+
+#myRating td:empty::after { /* hides My Ratings row when Ratings disabled  */
+     min-height: 1px !important;
+}
+
+.commentRating img {
+     margin: 0 0 4px;
+     padding: 0;
+     font-size: 14pt;
+     color: #FF7200;
+     text-shadow: 0 0 1px #900;
+     filter: none;
+}
+
+/* end Comments section */
\ No newline at end of file
diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css
index 8f76e9542..8674a8704 100644
--- a/installer/resources/themes/snark/dark/snark.css
+++ b/installer/resources/themes/snark/dark/snark.css
@@ -2609,3 +2609,197 @@ textarea[name="i2cpOpts"] {
 
 /* end responsive layout */
 
+/* Comments Section */
+/* TODO: merge with other rules where applicable */
+
+.snarkCommentInfo, .snarkComments {
+     margin: 10px 0 0 !important;
+     border: 1px solid #494;
+     border-left: none;
+     border-right: none;
+     background: #001100 url("/themes/console/dark/images/camotile2.png") repeat scroll center bottom;
+     filter: drop-shadow(0px 0 1px rgba(16, 8, 16, 0.7));
+}
+
+.snarkCommentInfo th, .snarkComments th {
+     background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 50%, #000 100%)
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo th:last-child {
+     text-align: right;
+}
+
+.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
+     background: #001000;
+     border-bottom: 1px inset #000;
+}
+
+.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
+     background: #000800;
+     border-bottom: 1px inset #000;
+}
+
+.snarkCommentInfo th {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo td, .snarkComments td {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo td:first-child {
+     white-space: nowrap;
+}
+
+.snarkCommentInfo td:first-child {
+     font-weight: bold;
+}
+
+.snarkCommentInfo td:first-child::after, .snarkComments td:first-child::after {
+     content: "";
+     display: inline-block;
+     min-height: 32px;
+     vertical-align: middle;
+}
+
+.snarkCommentInfo input.accept {
+     float: right;
+     margin-right: 5px !important;
+}
+
+.snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
+     width: 100%;
+     min-height: 64px;
+     height: 64px;
+     resize: vertical;
+}
+
+.snarkComments th {
+     text-align: left;
+}
+
+.commentRating, .commentAuthor {
+     width: 1%;
+}
+
+#nameRequired {
+     float: right;
+}
+
+.commentRating {
+     padding-right: 10px !important;
+}
+
+.commentRating img {
+     margin: 0;
+     padding: 0;
+}
+
+.commentDate {
+     width: 100px;
+     background: url(images/clock.png) left center no-repeat;
+     padding-left: 20px !important;
+}
+
+.snarkCommentInfo td:first-child, .snarkComments td:first-child {
+     width: 160px !important;
+     padding-right: 2px;
+}
+
+.snarkCommentInfo td:last-child, .snarkComments td:last-child {
+     width: 1% !important;
+}
+
+.snarkComments td {
+     white-space: nowrap;
+}
+
+.commentAuthorName {
+     background: url(images/author.png) left center no-repeat;
+     padding-left: 20px;
+}
+
+td.commentText {
+     white-space: normal;
+     text-align: justify;
+}
+
+.commentWrapper {
+     border: 1px solid #030;
+     margin: 2px 0;
+     padding: 8px 10px 8px 26px;
+     border-radius: 3px;
+     box-shadow: inset 0 0 0 1px #393, 0 0 1px 0 rgba(0,0,0,0.3);
+     background: url(images/comment.png) 6px center no-repeat #010;
+     background-blend-mode: luminosity;
+}
+
+.commentText .optbox {
+     position: fixed;
+     right: 20px;
+     top: 10px;
+}
+
+#commentsConfig .optbox {
+     vertical-align: middle !important;
+}
+
+.snarkComments select {
+     margin-right: 0 !important;
+}
+
+#commentDeleteAction {
+     border-top: 1px solid #494;
+     background: none;;
+}
+
+#commentDeleteAction td {
+     padding-right: 6px;
+}
+
+.commentAction, .commentDelete {
+     width: 1%;
+     white-space: nowrap;
+     min-width: 180px !important;
+     padding-left: 0;
+}
+
+.addCommentText, .commentText {
+     padding-right: 0;
+}
+
+.commentAction input[type="submit"] {
+     margin-top: 10px;
+     margin-bottom: 10px;
+}
+
+.commentDelete {
+     text-align: left;
+}
+
+#newRating td {
+     padding-top: 10px !important;
+     padding-bottom: 10px !important;
+}
+
+#myRating td:empty {
+     padding: 0 !important;
+     border-top: none !important;
+     border-bottom: none !important;
+}
+
+#myRating td:empty::after { /* hides My Ratings row when Ratings disabled  */
+     min-height: 1px !important;
+}
+
+.commentRating img {
+     margin: 0 0 4px;
+     padding: 0;
+     font-size: 14pt;
+     color: #FF7200;
+     text-shadow: 0 0 1px #900;
+     filter: none;
+}
+
+/* end Comments section */
diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css
index b0fefd434..02dc701d0 100644
--- a/installer/resources/themes/snark/light/snark.css
+++ b/installer/resources/themes/snark/light/snark.css
@@ -2058,3 +2058,194 @@ input[type="submit"] {
 
 /* end responsive layout */
 
+/* Comments Section */
+/* TODO: merge with other rules where applicable */
+
+.snarkCommentInfo, .snarkComments {
+     margin: 10px 0 0 !important;
+     border: 1px solid #bbf;
+     border-left: none;
+     border-right: none;
+}
+
+.snarkCommentInfo th, .snarkComments th {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo th:last-child {
+     text-align: right;
+}
+
+.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
+     border-top: 1px solid #bbf;
+     background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px) #fff;
+}
+
+.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
+     border-top: 1px solid #bbf;
+     background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fff;
+}
+
+.snarkCommentInfo th {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo td, .snarkComments td {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo td:first-child {
+     white-space: nowrap;
+}
+
+.snarkCommentInfo td:first-child {
+     font-weight: bold;
+}
+
+.snarkCommentInfo td:first-child::after, .snarkComments td:first-child::after {
+     content: "";
+     display: inline-block;
+     min-height: 32px;
+     vertical-align: middle;
+}
+
+.snarkCommentInfo input.accept {
+     float: right;
+     margin-right: 5px !important;
+}
+
+.snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
+     width: 100%;
+     min-height: 64px;
+     height: 64px;
+     resize: vertical;
+}
+
+.snarkComments th {
+     text-align: left;
+}
+
+.commentRating, .commentAuthor {
+     width: 1%;
+}
+
+#nameRequired {
+     float: right;
+}
+
+.commentRating {
+     padding-right: 10px !important;
+}
+
+.commentRating img {
+     margin: 0;
+     padding: 0;
+}
+
+.commentDate {
+     width: 100px;
+     background: url(images/clock.png) left center no-repeat;
+     padding-left: 20px !important;
+}
+
+.snarkCommentInfo td:first-child, .snarkComments td:first-child {
+     width: 160px !important;
+     padding-right: 2px;
+}
+
+.snarkCommentInfo td:last-child, .snarkComments td:last-child {
+     width: 1% !important;
+}
+
+.snarkComments td {
+     white-space: nowrap;
+}
+
+.commentAuthorName {
+     background: url(images/author.png) left center no-repeat;
+     padding-left: 20px;
+}
+
+td.commentText {
+     white-space: normal;
+     text-align: justify;
+}
+
+.commentWrapper {
+     border: 1px solid #bbf;
+     margin: 2px 0;
+     padding: 8px 10px 8px 26px;
+     border-radius: 3px;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 rgba(0,0,0,0.3);
+     background: url(images/comment.png) 6px center no-repeat #eef;
+     background-blend-mode: luminosity;
+}
+
+.commentText .optbox {
+     position: fixed;
+     right: 20px;
+     top: 10px;
+}
+
+#commentsConfig .optbox {
+     vertical-align: middle !important;
+}
+
+.snarkComments select {
+     margin-right: 0 !important;
+}
+
+#commentDeleteAction {
+     border-top: 1px solid #bbf;
+     background: linear-gradient(to bottom, #fff, #eef);
+}
+
+#commentDeleteAction td {
+     padding-right: 6px;
+}
+
+.commentAction, .commentDelete {
+     width: 1%;
+     white-space: nowrap;
+     min-width: 180px !important;
+     padding-left: 0;
+}
+
+.addCommentText, .commentText {
+     padding-right: 0;
+}
+
+.commentAction input[type="submit"] {
+     margin-top: 10px;
+     margin-bottom: 10px;
+}
+
+.commentDelete {
+     text-align: left;
+}
+
+#newRating td {
+     padding-top: 10px !important;
+     padding-bottom: 10px !important;
+}
+
+#myRating td:empty {
+     padding: 0 !important;
+     border-top: none !important;
+     border-bottom: none !important;
+}
+
+#myRating td:empty::after { /* hides My Ratings row when Ratings disabled  */
+     min-height: 1px !important;
+}
+
+.commentRating img {
+     margin: 0 0 4px;
+     padding: 0;
+     font-size: 14pt;
+     color: #FF7200;
+     text-shadow: 0 0 1px #900;
+     filter: none;
+}
+
+/* end Comments section */
\ No newline at end of file
diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css
index 25ab1e61c..fd9118fe7 100644
--- a/installer/resources/themes/snark/midnight/snark.css
+++ b/installer/resources/themes/snark/midnight/snark.css
@@ -2543,3 +2543,195 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
 
 /* end responsive layout */
 
+/* Comments Section */
+/* TODO: merge with other rules where applicable */
+
+.snarkCommentInfo, .snarkComments {
+     margin: 10px 0 0 !important;
+     background: #270027 none repeat scroll 0 0;
+     border: 1px solid #443da0;
+     filter: drop-shadow(0px 0 1px rgba(16, 8, 16, 0.7));
+}
+
+.snarkCommentInfo th, .snarkComments th {
+     background: linear-gradient(to bottom, #121225, #00000d);
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo th:last-child {
+     text-align: right;
+}
+
+.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
+     background: #010010;
+     border-bottom: 1px inset #12111f;
+}
+
+.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
+     background: #010008;
+     border-bottom: 1px inset #12111f;
+}
+
+.snarkCommentInfo th {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo td, .snarkComments td {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo td:first-child {
+     white-space: nowrap;
+}
+
+.snarkCommentInfo td:first-child {
+     font-weight: bold;
+}
+
+.snarkCommentInfo td:first-child::after, .snarkComments td:first-child::after {
+     content: "";
+     display: inline-block;
+     min-height: 32px;
+     vertical-align: middle;
+}
+
+.snarkCommentInfo input.accept {
+     float: right;
+     margin-right: 5px !important;
+}
+
+.snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
+     width: 100%;
+     min-height: 64px;
+     height: 64px;
+     resize: vertical;
+}
+
+.snarkComments th {
+     text-align: left;
+}
+
+.commentRating, .commentAuthor {
+     width: 1%;
+}
+
+#nameRequired {
+     float: right;
+}
+
+.commentRating {
+     padding-right: 10px !important;
+}
+
+.commentRating img {
+     margin: 0;
+     padding: 0;
+}
+
+.commentDate {
+     width: 100px;
+     background: url(images/clock.png) left center no-repeat;
+     padding-left: 20px !important;
+}
+
+.snarkCommentInfo td:first-child, .snarkComments td:first-child {
+     width: 160px !important;
+     padding-right: 2px;
+}
+
+.snarkCommentInfo td:last-child, .snarkComments td:last-child {
+     width: 1% !important;
+}
+
+.snarkComments td {
+     white-space: nowrap;
+}
+
+.commentAuthorName {
+     background: url(images/author.png) left center no-repeat;
+     padding-left: 20px;
+}
+
+td.commentText {
+     white-space: normal;
+     text-align: justify;
+}
+
+.commentWrapper {
+     border: 1px solid #003;
+     margin: 2px 0;
+     padding: 8px 10px 8px 26px;
+     border-radius: 3px;
+     box-shadow: inset 0 0 0 1px #339, 0 0 1px 0 rgba(0,0,0,0.3);
+     background: url(images/comment.png) 6px center no-repeat #002;
+     background-blend-mode: luminosity;
+}
+
+.commentText .optbox {
+     position: fixed;
+     right: 20px;
+     top: 10px;
+}
+
+#commentsConfig .optbox {
+     vertical-align: middle !important;
+}
+
+.snarkComments select {
+     margin-right: 0 !important;
+}
+
+#commentDeleteAction {
+     border-top: 1px solid #443da0;
+     background: linear-gradient(to bottom, #000018, #00000d);
+}
+
+#commentDeleteAction td {
+     padding-right: 6px;
+}
+
+.commentAction, .commentDelete {
+     width: 1%;
+     white-space: nowrap;
+     min-width: 180px !important;
+     padding-left: 0;
+}
+
+.addCommentText, .commentText {
+     padding-right: 0;
+}
+
+.commentAction input[type="submit"] {
+     margin-top: 10px;
+     margin-bottom: 10px;
+}
+
+.commentDelete {
+     text-align: left;
+}
+
+#newRating td {
+     padding-top: 10px !important;
+     padding-bottom: 10px !important;
+}
+
+#myRating td:empty {
+     padding: 0 !important;
+     border-top: none !important;
+     border-bottom: none !important;
+}
+
+#myRating td:empty::after { /* hides My Ratings row when Ratings disabled  */
+     min-height: 1px !important;
+}
+
+.commentRating img {
+     margin: 0 0 4px;
+     padding: 0;
+     font-size: 14pt;
+     color: #FF7200;
+     text-shadow: 0 0 1px #900;
+     filter: none;
+}
+
+/* end Comments section */
diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css
index 3ef671fe2..1ae301df4 100644
--- a/installer/resources/themes/snark/ubergine/snark.css
+++ b/installer/resources/themes/snark/ubergine/snark.css
@@ -2072,6 +2072,7 @@ input#toggle_debug:not(checked) + label {
      padding: 3px 10px 5px;
      background: #000;
      margin: -33px 0 -12px;
+     border-radius: 0 0 4px 4px;
 }
 
 .dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug {
@@ -2671,3 +2672,193 @@ select {
 
 /* end responsive layout */
 
+/* Comments Section */
+/* TODO: merge with other rules where applicable */
+
+.snarkCommentInfo, .snarkComments {
+     margin: 10px 0 0 !important;
+     background: #270027 none repeat scroll 0 0;
+     border: 1px solid #101;
+     filter: drop-shadow(0px 0 1px rgba(16, 8, 16, 0.7));
+}
+
+.snarkCommentInfo th, .snarkComments th {
+     background: linear-gradient(to bottom, #202, #101) repeat scroll 0 0;
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo th:last-child {
+     text-align: right;
+}
+
+.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
+     background: #351933;
+     border-bottom: 1px solid #101;
+}
+
+.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
+     background: #270027;
+     border-bottom: 1px solid #101;
+}
+
+.snarkCommentInfo th {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo td, .snarkComments td {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo td:first-child {
+     white-space: nowrap;
+}
+
+.snarkCommentInfo td:first-child {
+     font-weight: bold;
+}
+
+.snarkCommentInfo td:first-child::after, .snarkComments td:first-child::after {
+     content: "";
+     display: inline-block;
+     min-height: 32px;
+     vertical-align: middle;
+}
+
+.snarkCommentInfo input.accept {
+     float: right;
+     margin-right: 5px !important;
+}
+
+.snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
+     width: 100%;
+     min-height: 64px;
+     height: 64px;
+     resize: vertical;
+}
+
+.snarkComments th {
+     text-align: left;
+}
+
+.commentRating, .commentAuthor {
+     width: 1%;
+}
+
+#nameRequired {
+     float: right;
+}
+
+.commentRating {
+     padding-right: 10px !important;
+}
+
+.commentRating img {
+     margin: 0;
+     padding: 0;
+}
+
+.commentDate {
+     width: 100px;
+     background: url(images/clock.png) left center no-repeat;
+     padding-left: 20px !important;
+}
+
+.snarkCommentInfo td:first-child, .snarkComments td:first-child {
+     width: 160px !important;
+     padding-right: 2px;
+}
+
+.snarkCommentInfo td:last-child, .snarkComments td:last-child {
+     width: 1% !important;
+}
+
+.snarkComments td {
+     white-space: nowrap;
+}
+
+.commentAuthorName {
+     background: url(images/author.png) left center no-repeat;
+     padding-left: 20px;
+}
+
+td.commentText {
+     white-space: normal;
+     text-align: justify;
+}
+
+.commentWrapper {
+     border: 1px solid #101;
+     margin: 2px 0;
+     padding: 8px 10px 8px 26px;
+     border-radius: 3px;
+     background: #303;
+     box-shadow: inset 0 0 0 1px #515, 0 0 1px 0 rgba(0,0,0,0.3);
+     background: url(images/comment.png) 6px center no-repeat #303;
+     background-blend-mode: luminosity;
+}
+
+.commentText .optbox {
+     position: fixed;
+     right: 20px;
+     top: 10px;
+}
+
+.snarkComments select {
+     margin-right: 0 !important;
+}
+
+#commentDeleteAction {
+     background: linear-gradient(to bottom, #202, #101);
+     box-shadow: inset 0 0 0 1px #303;
+}
+
+#commentDeleteAction td {
+     padding-right: 6px;
+}
+
+.commentAction, .commentDelete {
+     width: 1%;
+     white-space: nowrap;
+     min-width: 180px !important;
+     padding-left: 0;
+}
+
+.addCommentText, .commentText {
+     padding-right: 0;
+}
+
+.commentAction input[type="submit"] {
+     margin-top: 10px;
+     margin-bottom: 10px;
+}
+
+.commentDelete {
+     text-align: left;
+}
+
+#newRating td {
+     padding-top: 10px !important;
+     padding-bottom: 10px !important;
+}
+
+#myRating td:empty {
+     padding: 0 !important;
+     border-top: none !important;
+     border-bottom: none !important;
+}
+
+#myRating td:empty::after { /* hides My Ratings row when Ratings disabled  */
+     min-height: 1px !important;
+}
+
+.commentRating img {
+     margin: 0 0 4px;
+     padding: 0;
+     font-size: 14pt;
+     color: #FF7200;
+     text-shadow: 0 0 1px #900;
+     filter: none;
+}
+
+/* end Comments section */
+
diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css
index 827aba936..d96a7b26a 100644
--- a/installer/resources/themes/snark/vanilla/snark.css
+++ b/installer/resources/themes/snark/vanilla/snark.css
@@ -88,23 +88,24 @@ a:link, a:visited {
      text-decoration: none;
 }
 
-td a:link {
+th a:link, td a:link {
      color: #cf0f00;
      text-decoration: none;
      font-weight: bold;
      word-wrap: break-word;
 }
 
-td a:visited {
+th a:visited, td a:visited {
      color: #9F0B00 !important;
 }
 
+th a:hover, th a:visited:hover, th a:focus, th a:visited:focus,
 td a:hover, td a:visited:hover, td a:focus, td a:visited:focus {
      color: #df0067 !important;
      filter: none;
 }
 
-td a:active, td a:visited:active {
+th a:active, th a:visited:active, td a:active, td a:visited:active {
      color: #FF2F85 !important;
 }
 
@@ -2529,3 +2530,218 @@ tr#torrentInfoStats td {
 
 /* end responsive layout */
 
+/* Comments Section */
+/* TODO: merge with other rules where applicable */
+
+.snarkCommentInfo, .snarkComments {
+     margin: 10px 0 0 !important;
+     background: #270027 none repeat scroll 0 0;
+     border: 1px solid #6f533e;
+     box-shadow: 0 0 2px 1px rgba(77, 69, 62, 0.3);
+     border-collapse: separate;
+}
+
+.snarkCommentInfo, .snarkComments {
+     border-top: none;
+     border-bottom: none;
+}
+
+.snarkCommentInfo tr:last-child td, .snarkComments tr:last-child td {
+     border-bottom: 1px solid #6f533e;
+}
+
+.snarkCommentInfo tr:first-child th, .snarkComments tr:first-child td {
+     border-top: 1px solid #6f533e;
+}
+
+.snarkCommentInfo th, .snarkComments th {
+     background: linear-gradient(to bottom, #efefef, #cfc7c2);
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo th {
+     background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, #efefef, #cfc7c2);
+     padding-left: 28px !important;
+}
+
+.snarkCommentInfo th:last-child {
+     text-align: right;
+}
+
+.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
+     background: #dfd6d1;
+}
+
+.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
+     background: #efe6e0;
+}
+
+.snarkCommentInfo th {
+     padding: 8px 5px;
+}
+
+.snarkCommentInfo td, .snarkComments td {
+     padding: 8px 5px;
+     border-bottom: 1px outset #efe8e0;
+     border-top: 1px outset #fff5ef;
+}
+
+.snarkCommentInfo td:first-child {
+     white-space: nowrap;
+}
+
+.snarkCommentInfo td:first-child {
+     font-weight: bold;
+}
+
+.snarkCommentInfo td:first-child::after, .snarkComments td:first-child::after {
+     content: "";
+     display: inline-block;
+     min-height: 32px;
+     vertical-align: middle;
+}
+
+.snarkCommentInfo input.accept {
+     float: right;
+     margin-right: 5px !important;
+}
+
+.snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
+     width: 100%;
+     min-height: 64px;
+     height: 64px;
+     resize: vertical;
+}
+
+.snarkComments th {
+     text-align: left;
+}
+
+.commentRating, .commentAuthor {
+     width: 1%;
+}
+
+#nameRequired {
+     float: right;
+}
+
+.commentRating {
+     padding-right: 10px !important;
+}
+
+.commentRating img {
+     margin: 0 0 3px;
+     padding: 0;
+     font-size: 14pt;
+     color: #FF7200;
+     text-shadow: 0 0 1px #900;
+     filter: none;
+}
+
+.commentDate {
+     width: 100px;
+     background: url(images/clock.png) left center no-repeat;
+     padding-left: 20px !important;
+}
+
+.snarkCommentInfo td:first-child, .snarkComments td:first-child {
+     width: 160px !important;
+     padding-right: 2px;
+}
+
+.snarkCommentInfo td:last-child, .snarkComments td:last-child:not(.commentText:empty) {
+     width: 1% !important;
+}
+
+.snarkComments td {
+     white-space: nowrap;
+}
+
+.commentAuthorName {
+     background: url(images/author.png) left center no-repeat;
+     padding-left: 20px;
+}
+
+td.commentText {
+     white-space: normal;
+     text-align: justify;
+     padding-right: 0;
+}
+
+.commentWrapper {
+     border: 1px solid #6f533e;
+     margin: 4px 2px;
+     padding: 8px 10px 8px 26px;
+     border-radius: 2px;
+     box-shadow: 0 0 0 1px #fff inset; /* 0 0 1px 0 rgba(77, 69, 62, 0.7);*/
+     background: url(images/comment.png) 6px center no-repeat #fff6df;
+     background-blend-mode: luminosity;
+}
+
+#commentsConfig .optbox {
+     vertical-align: middle;
+     margin-left: 0;
+}
+
+.snarkComments select {
+     margin-right: 0 !important;
+}
+
+#commentDeleteAction {
+     background: linear-gradient(to bottom, #efefef, #cfc7c2);
+/*     box-shadow: inset 0 0 0 1px #efe8e0;*/
+     border: 1px solid #6f533e;
+}
+
+#commentDeleteAction td {
+     box-shadow: 0 0 0 1px #efe8e0 inset;
+     padding-right: 6px;
+}
+
+.commentdelete, .commentAction {
+     width: 1%;
+     white-space: nowrap;
+     min-width: 180px;
+}
+
+.commentAction input[type="submit"] {
+     margin-top: 10px;
+     margin-bottom: 10px;
+}
+
+.commentDelete {
+     text-align: left;
+}
+
+#newRating td {
+     padding-top: 10px !important;
+     padding-bottom: 10px !important;
+}
+
+/*
+.commentText:empty {
+     width: 90% !important;
+}
+*/
+
+#myRating td:empty {
+     padding: 0 !important;
+     border-top: none !important;
+     border-bottom: none !important;
+}
+
+.snarkComments #myRating td:empty::after { /* hides My Ratings row when Ratings disabled  */
+     min-height: 0 !important;
+}
+
+/*
+select[name="myRating"] option::before, select[name="myRating"] option[selected]::before {
+     content: "★ ";
+}
+
+select[name="myRating"] option[value="0"]::before {
+     content: "☆ ";
+}
+*/
+
+/* end Comments section */