Use SVG image for comment deletion icon

This also puts the icon to the right and the timestamp in the byline
and wipes out a repeated instance of the byline.

Signed-off-by: Marcel Korpel <marcel.korpel@gmail.com>
Signed-off-by: Lukas Fleischer <lfleischer@archlinux.org>

6 files changed, 65 insertions, 17 deletions

diff --git a/web/html/css/aurweb.css b/web/html/css/aurweb.css
index d67877a..adc02bb 100644
--- a/web/html/css/aurweb.css
+++ b/web/html/css/aurweb.css
@@ -96,6 +96,22 @@
 	color: #999;
 }
 
+.delete-comment-form {
+	float: right;
+}
+
+.delete-comment {
+	-webkit-filter: grayscale(100%);
+	filter: grayscale(100%);
+	opacity: 0.6;
+}
+
+.delete-comment:hover {
+	-webkit-filter: none;
+	filter: none;
+	opacity: 1;
+}
+
 legend {
 	padding: 1em 0;
 }
diff --git a/web/html/images/x.min.svg b/web/html/images/x.min.svg
new file mode 100644
index 0000000..833d4f2
--- /dev/null
+++ b/web/html/images/x.min.svg
@@ -0,0 +1,3 @@
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" height="8" width="8" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<path fill="#36a" d="m1.41 0l-1.41 1.41 0.72 0.72 1.78 1.81-1.78 1.78-0.72 0.69 1.41 1.44 0.72-0.72 1.81-1.81 1.78 1.81 0.69 0.72 1.44-1.44-0.72-0.69-1.81-1.78 1.81-1.81 0.72-0.72-1.44-1.41-0.69 0.72-1.78 1.78-1.81-1.78-0.72-0.72z"/>
+</svg>
diff --git a/web/html/images/x.png b/web/html/images/x.png
deleted file mode 100644
index a85e169..0000000
--- a/web/html/images/x.png
+++ /dev/null
diff --git a/web/html/images/x.svg b/web/html/images/x.svg
new file mode 100644
index 0000000..e323fe1
--- /dev/null
+++ b/web/html/images/x.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg2"
+   viewBox="0 0 8 8"
+   height="8"
+   width="8">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <path
+     style="fill:#3366aa;fill-opacity:1"
+     id="path4"
+     d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" />
+</svg>
diff --git a/web/html/index.php b/web/html/index.php
index 27d897c..2d5f2a9 100644
--- a/web/html/index.php
+++ b/web/html/index.php
@@ -173,6 +173,10 @@ if (!empty($tokens[1]) && '/' . $tokens[1] == get_pkg_route()) {
 		header("Content-Type: image/png");
 		readfile("./$path");
 		break;
+	case "/images/x.min.svg":
+		header("Content-Type: image/svg+xml");
+		readfile("./$path");
+		break;
 	case "/js/bootstrap-typeahead.min.js":
 		header("Content-Type: application/javascript");
 		readfile("./$path");
diff --git a/web/template/pkg_comments.php b/web/template/pkg_comments.php
index 3e99d9b..03a6581 100644
--- a/web/template/pkg_comments.php
+++ b/web/template/pkg_comments.php
@@ -20,32 +20,26 @@ $count = pkgbase_comments_count($base_id, $include_deleted);
 			$row['UserName'] = "<a href=\"" . get_user_uri($row['UserName']) . "\">{$row['UserName']}</a>";
 		endif; ?>
 		<h4<?php if ($row['DelUsersID']): ?> class="comment-deleted"<?php endif; ?>>
-			<?php if (!$row['DelUsersID'] && can_delete_comment_array($row)): ?>
-				<form method="post" action="<?= htmlspecialchars(get_pkgbase_uri($pkgbase_name), ENT_QUOTES); ?>">
-					<fieldset style="display:inline;">
-						<input type="hidden" name="action" value="do_DeleteComment" />
-						<input type="hidden" name="comment_id" value="<?= $row['ID'] ?>" />
-						<input type="hidden" name="token" value="<?= htmlspecialchars($_COOKIE['AURSID']) ?>" />
-						<input type="image" src="/images/x.png" alt="<?= __('Delete comment') ?>" name="submit" value="1" />
-					</fieldset>
-					<?php if ($row['UserName']): ?>
-					<?= __('Comment by %s', $row['UserName']) ?>
-					<?php else: ?>
-					<?= __('Anonymous comment') ?>
-					<?php endif; ?>
-				</form>
-			<?php else: ?>
 			<?php if ($row['UserName']): ?>
-			<?= __('Comment by %s', $row['UserName']) ?>
+			<?= __('%s commented', $row['UserName']) ?>
 			<?php else: ?>
 			<?= __('Anonymous comment') ?>
 			<?php endif; ?>
+			<?= __('on %s', gmdate('Y-m-d H:i', $row['CommentTS'])) ?>
 			<?php if ($row['DelUsersID']): ?>
 			(<?= __('deleted') ?>)
 			<?php endif; ?>
+			<?php if (!$row['DelUsersID'] && can_delete_comment_array($row)): ?>
+				<form class="delete-comment-form" method="post" action="<?= htmlspecialchars(get_pkgbase_uri($pkgbase_name), ENT_QUOTES); ?>">
+					<fieldset style="display:inline;">
+						<input type="hidden" name="action" value="do_DeleteComment" />
+						<input type="hidden" name="comment_id" value="<?= $row['ID'] ?>" />
+						<input type="hidden" name="token" value="<?= htmlspecialchars($_COOKIE['AURSID']) ?>" />
+						<input type="image" class="delete-comment" src="/images/x.min.svg" width="11" height="11" alt="<?= __('Delete comment') ?>" title="<?= __('Delete comment') ?>" name="submit" value="1" />
+					</fieldset>
+				</form>
 			<?php endif; ?>
 		</h4>
-		<p class="timestamp"><?= gmdate('Y-m-d H:i', $row['CommentTS']) ?></p>
 		<div class="article-content<?php if ($row['DelUsersID']): ?> comment-deleted<?php endif; ?>">
 			<p>
 				<?= parse_comment($row['Comments']) ?>