Refactor comment section design

Author: carlbennett

src/templates/Comment/Section.inc.phtml

@@ -9,14 +9,13 @@ $active_user_id = ($active_user ? $active_user->getId() : null);
 $c_edit_visible_admin = ($active_user && ($active_user->getOptionsBitmask() & User::OPTION_ACL_COMMENT_MODIFY));
 $c_delete_visible_admin = ($active_user && ($active_user->getOptionsBitmask() & User::OPTION_ACL_COMMENT_DELETE));
 ?>
-<div class="row mt-3">
-  <div class="col">
-    <h2><a name="comments">Comments</a></h2>
+<div class="row mt-3 justify-content-center">
+  <div class="col-md-9">
+    <h2><a href="#comments" name="comments">Comments</a></h2>
 <? if (!$comments) { ?>
     <div class="border border-secondary m-auto rounded-pill p-2" style="max-width:400px;"><p class="text-center mb-0"><em>no one has commented yet.</em></p></div>
-<? } else { ?>
-    <table class="table table-striped text-white-50"><tbody>
-<?    foreach ($comments as $c) {
+<? } else {
+      foreach ($comments as $c) {
         $c_created_dt  = $c->getCreatedDateTime();
         $c_id          = rawurlencode($c->getId());
         $c_parent_url  = $c->getParentUrl();
@@ -27,33 +26,29 @@ $c_delete_visible_admin = ($active_user && ($active_user->getOptionsBitmask() &
         $c_user_name   = ($c_user ? filter_var($c_user->getName(), FILTER_SANITIZE_FULL_SPECIAL_CHARS) : 'Anonymous');
 
         $c_user_string = ($c_user ? sprintf('<a href="%s"><img class="rounded" src="%s"/> %s</a>', $c_user_url, $c_user_avatar, $c_user_name) : $c_user_name);
+        $c_time_string = sprintf('<time class="small text-muted" datetime="%s">%s</time>', $c_created_dt->format('c'), $c_created_dt->format('D M j, Y g:ia T'));
 
         $c_edit_visible = ($c_user_id == $active_user_id || $c_edit_visible_admin);
-        $c_delete_visible = ($c_user_id == $active_user_id || $c_delete_visible_admin); ?>
-      <tr><td>
-        <?=$c_user_string?><br/>
-        <time datetime="<?=$c_created_dt->format('c')?>"><?=$c_created_dt->format('D M j, Y g:ia T')?></time>
-      </td><td>
-<?    if ($c_delete_visible) { ?>
-        <a class="btn btn-sm btn-danger float-right m-1" href="<?=Common::relativeUrlToAbsolute('/comment/delete?id=' . $c_id)?>" title="Delete">❌</a>
-<?    } if ($c_edit_visible) { ?>
-        <a class="btn btn-sm btn-secondary float-right m-1" href="<?=Common::relativeUrlToAbsolute('/comment/edit?id=' . $c_id)?>" title="Edit">📝</a>
-<?    } ?>
-        <?=$c->getContent(true)?>
-      </td></tr>
-<? } ?>
-    </tbody></table>
-<? } ?>
+        $c_delete_visible = ($c_user_id == $active_user_id || $c_delete_visible_admin);
+
+        $c_content = (
+          ($c_delete_visible ? '<a class="btn btn-sm btn-danger float-right m-1" href="' . Common::relativeUrlToAbsolute('/comment/delete?id=' . $c_id) . '" title="Delete">❌</a>' : '') .
+          ($c_edit_visible ? '<a class="btn btn-sm btn-secondary float-right m-1" href="' . Common::relativeUrlToAbsolute('/comment/edit?id=' . $c_id) . '" title="Edit">📝</a>' : '') .
+          $c->getContent(true)
+        );
+
+        printf('<div class="row bg-primary border border-dark mt-2 py-3 rounded"><div class="col-3">%s<br/>%s</div><div class="col-9">%s</div></div>', $c_user_string, $c_time_string, $c_content);
+    }} ?>
   </div>
 </div>
 <? if ($active_user) { ?>
 <div class="row my-3 justify-content-center">
-  <div class="col-8">
+  <div class="col-md-8">
     <form method="POST" action="<?=Common::relativeUrlToAbsolute('/comment/create')?>">
       <input type="hidden" name="parent_type" value="<?=$comment_parent_type?>"/>
       <input type="hidden" name="parent_id" value="<?=$comment_parent_id?>"/>
       <div class="form-group">
-        <span class="float-right text-muted small">(Markdown supported)</span>
+        <span class="float-right small">(Markdown supported)</span>
         <label for="comment-content" class="font-weight-bold">Make a Comment:</label>
         <textarea id="comment-content" class="border border-secondary form-control bg-dark text-light" name="content"></textarea>
       </div>