comment styles

Application/GetLinkComments/CommentDto.cs

@@ -7,6 +7,7 @@ namespace HN.Application
     public Guid Id { get; set; }
     public string Content { get; set; }
     public DateTime CreatedAt { get; set; }
+    public string CreatedByName { get; set; }
     public int UpVotes { get; set; }
     public int DownVotes { get; set; }
 

Application/GetLinkComments/GetLinkCommentsQueryHandler.cs

@@ -18,11 +18,13 @@ namespace HN.Application
     public Task<CommentDto[]> Handle(GetLinkCommentsQuery request, CancellationToken cancellationToken)
     {
       var comments = from comment in _context.Comments
+                     join user in _context.Users on comment.CreatedBy equals user.Id
                      where comment.LinkId == request.LinkId
                      select new CommentDto
                      {
                        Id = comment.Id,
                        CreatedAt = comment.CreatedAt,
+                       CreatedByName = user.UserName,
                        Content = comment.Content,
                        UpVotes = comment.Votes.Count(c => c.Type == VoteType.Up),
                        DownVotes = comment.Votes.Count(c => c.Type == VoteType.Down)

Apps/Website/Views/Links/Show.cshtml

@@ -1,14 +1,22 @@
 @model ShowLinkViewModel
+@{
+  ViewData["Title"] = "Viewing";
+}
 
 <partial name="_LinkItem" model="@Model.Link" />
 
-@if(Model.Comments.Length == 0) {
-  <p>No comments yet</p>
-} else {
-  <ul>
-    @foreach (var comment in Model.Comments)
+@if (Model.Comments.Length == 0)
+{
+  <p class="no-comment-yet">No comments yet</p>
+}
+else
+{
+  <ul class="comments">
+  @foreach (var comment in Model.Comments)
     {
-        <li><partial name="_CommentItem" model="@comment" /></li>
+      <li>
+        <partial name="_CommentItem" model="@comment" />
+      </li>
     }
   </ul>
 }

Apps/Website/Views/Shared/_CommentForm.cshtml

@@ -1,16 +1,21 @@
 @model HN.Application.CommentLinkCommand
 
 <div>
-  <h2>Add a comment</h2>
-  @if(User.Identity.IsAuthenticated) {
-    <form asp-action="Create" asp-controller="Comments" method="post">
-      <input type="hidden" asp-for="@Model.LinkId" />
-      <textarea asp-for="@Model.Content"></textarea>
-      <span asp-validation-for="@Model.Content"></span>
-      
+  <h3 class="add-a-comment">Add a comment</h3>
+  @if (User.Identity.IsAuthenticated)
+  {
+    <form class="form" asp-action="Create" asp-controller="Comments" method="post">
+      <div class="field">
+        <input type="hidden" asp-for="@Model.LinkId" />
+        <textarea asp-for="@Model.Content"></textarea>
+        <span asp-validation-for="@Model.Content"></span>
+      </div>
+
       <button type="submit">Post a comment</button>
     </form>
-  } else {
+  }
+  else
+  {
     <p>Only logged in users can comment.</p>
   }
 </div>

Apps/Website/Views/Shared/_CommentItem.cshtml

@@ -1,14 +1,21 @@
 @model HN.Application.CommentDto
 
-<span>@Model.Content</span>
-<div>
-  👍: @Model.UpVotes / 👎: @Model.DownVotes
-</div>
-
-@if (User.Identity.IsAuthenticated) {
-  <form asp-action="Vote" asp-controller="Comments" asp-route-id="@Model.Id" method="post">
-    <input type="hidden" name="redirectTo" value="@Context.Request.Path" />
-    <input type="submit" name="type" value="up" />
-    <input type="submit" name="type" value="down" />
-  </form>
-}
+<article class="comment">
+  <p>@Model.Content</p>
+  <ul class="comment__actions">
+    <li>posted at @Model.CreatedAt.ToLocalTime() by <strong>@Model.CreatedByName</strong></li>
+    <li>
+      <strong>@Model.UpVotes</strong> 👍 / <strong>@Model.DownVotes</strong> 👎
+    </li>
+    @if (User.Identity.IsAuthenticated)
+    {
+      <li>
+        <form class="votable" asp-controller="Comments" asp-action="Vote" asp-route-id="@Model.Id" method="post">
+          <input type="hidden" name="redirectTo" value="@Context.Request.Path" />
+          vote&nbsp;<input type="submit" name="type" value="up" />&nbsp;or&nbsp;<input type="submit" name="type"
+            value="down" />
+        </form>
+      </li>
+    }
+  </ul>
+</article>

Apps/Website/wwwroot/css/site.css

@@ -63,7 +63,8 @@ a {
   color: gray;
 }
 
-.links {
+.links,
+.comments {
   list-style-type: none;
 }
 
@@ -87,23 +88,28 @@ a {
   text-decoration: underline;
 }
 
-.link__actions {
+.link__actions,
+.comment__actions {
   align-items: center;
   color: rgba(0, 0, 0, 0.54);
   display: flex;
   list-style-type: none;
 }
 
-.link__actions li + li {
+.link__actions li + li,
+.comment__actions li + li {
   margin-left: 1rem;
 }
 
-.link__actions a {
+.link__actions a,
+.comment__actions a {
   text-decoration: none;
 }
 
 .link__actions a:hover,
-.link__actions a:focus {
+.link__actions a:focus,
+.comment__actions a:hover,
+.comment__actions a:focus {
   text-decoration: underline;
 }
 
@@ -136,8 +142,31 @@ label {
   display: flex;
 }
 
-.votable input[value="up"]::before {
-  color: red;
-  content: "test";
-  display: block;
+.no-comment-yet {
+  color: rgba(0, 0, 0, 0.72);
+  font-style: italic;
+  margin: 2rem 0;
+}
+
+.add-a-comment {
+  color: gray;
+  font-size: 1.25rem;
+}
+
+textarea {
+  color: inherit;
+  font: inherit;
+  width: 100%;
+  min-height: 100px;
+}
+
+.comments {
+  padding-left: 1rem;
+}
+
+.comment {
+  background-color: #fafafa;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
+  padding: 1rem;
+  margin-bottom: 1rem;
 }