From 7abb809d6f7abcac922964df38a8bbb3122bdad3 Mon Sep 17 00:00:00 2001 From: Julien LEICHER Date: Tue, 22 Dec 2020 10:46:11 +0100 Subject: [PATCH] comment styles --- Application/GetLinkComments/CommentDto.cs | 1 + .../GetLinkCommentsQueryHandler.cs | 2 + Apps/Website/Views/Links/Show.cshtml | 20 +++++--- Apps/Website/Views/Shared/_CommentForm.cshtml | 21 +++++---- Apps/Website/Views/Shared/_CommentItem.cshtml | 31 +++++++----- Apps/Website/wwwroot/css/site.css | 47 +++++++++++++++---- 6 files changed, 87 insertions(+), 35 deletions(-) diff --git a/Application/GetLinkComments/CommentDto.cs b/Application/GetLinkComments/CommentDto.cs index 0ff565d..0830c13 100644 --- a/Application/GetLinkComments/CommentDto.cs +++ b/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; } diff --git a/Application/GetLinkComments/GetLinkCommentsQueryHandler.cs b/Application/GetLinkComments/GetLinkCommentsQueryHandler.cs index 08e3a0d..28264b8 100644 --- a/Application/GetLinkComments/GetLinkCommentsQueryHandler.cs +++ b/Application/GetLinkComments/GetLinkCommentsQueryHandler.cs @@ -18,11 +18,13 @@ namespace HN.Application public Task 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) diff --git a/Apps/Website/Views/Links/Show.cshtml b/Apps/Website/Views/Links/Show.cshtml index 8e1bfd6..50e8e04 100644 --- a/Apps/Website/Views/Links/Show.cshtml +++ b/Apps/Website/Views/Links/Show.cshtml @@ -1,14 +1,22 @@ @model ShowLinkViewModel +@{ + ViewData["Title"] = "Viewing"; +} -@if(Model.Comments.Length == 0) { -

No comments yet

-} else { -
    - @foreach (var comment in Model.Comments) +@if (Model.Comments.Length == 0) +{ +

    No comments yet

    +} +else +{ +
      + @foreach (var comment in Model.Comments) { -
      • +
    • + +
      • }
    } diff --git a/Apps/Website/Views/Shared/_CommentForm.cshtml b/Apps/Website/Views/Shared/_CommentForm.cshtml index 5d88d12..7d60ee4 100644 --- a/Apps/Website/Views/Shared/_CommentForm.cshtml +++ b/Apps/Website/Views/Shared/_CommentForm.cshtml @@ -1,16 +1,21 @@ @model HN.Application.CommentLinkCommand
    -

    Add a comment

    - @if(User.Identity.IsAuthenticated) { -
    - - - - +

    Add a comment

    + @if (User.Identity.IsAuthenticated) + { + +
    + + + +
    +
    - } else { + } + else + {

    Only logged in users can comment.

    }
    \ No newline at end of file diff --git a/Apps/Website/Views/Shared/_CommentItem.cshtml b/Apps/Website/Views/Shared/_CommentItem.cshtml index 4667c92..17ed8e8 100644 --- a/Apps/Website/Views/Shared/_CommentItem.cshtml +++ b/Apps/Website/Views/Shared/_CommentItem.cshtml @@ -1,14 +1,21 @@ @model HN.Application.CommentDto -@Model.Content -
    - 👍: @Model.UpVotes / 👎: @Model.DownVotes -
    - -@if (User.Identity.IsAuthenticated) { -
    - - - -
    -} \ No newline at end of file +
    +

    @Model.Content

    +
      +
    • posted at @Model.CreatedAt.ToLocalTime() by @Model.CreatedByName
      • +
    • + @Model.UpVotes 👍 / @Model.DownVotes 👎 +
      • + @if (User.Identity.IsAuthenticated) + { +
    • +
      + + vote  or  +
      +
      • + } +
    +
    \ No newline at end of file diff --git a/Apps/Website/wwwroot/css/site.css b/Apps/Website/wwwroot/css/site.css index 1556d54..b4a2983 100644 --- a/Apps/Website/wwwroot/css/site.css +++ b/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; }