From 93e231928f015654d5803d2f3720377b220e003f Mon Sep 17 00:00:00 2001 From: Julien Leicher Date: Tue, 22 Dec 2020 10:47:22 +0100 Subject: [PATCH] mvc-styles (#28) --- Application/GetLinkComments/CommentDto.cs | 1 + .../GetLinkCommentsQueryHandler.cs | 2 + Apps/Website/Models/RegisterViewModel.cs | 1 + Apps/Website/Startup.cs | 2 +- Apps/Website/Views/Accounts/Login.cshtml | 21 +- Apps/Website/Views/Accounts/Register.cshtml | 30 ++- Apps/Website/Views/Links/Create.cshtml | 7 +- Apps/Website/Views/Links/Index.cshtml | 5 +- Apps/Website/Views/Links/Show.cshtml | 20 +- .../Shared/Components/Login/Default.cshtml | 4 +- .../Shared/Components/Login/LoggedIn.cshtml | 10 +- Apps/Website/Views/Shared/_CommentForm.cshtml | 21 +- Apps/Website/Views/Shared/_CommentItem.cshtml | 31 ++- Apps/Website/Views/Shared/_Layout.cshtml | 54 ++-- Apps/Website/Views/Shared/_LinkItem.cshtml | 31 ++- Apps/Website/wwwroot/css/site.css | 231 +++++++++++++----- 16 files changed, 305 insertions(+), 166 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/Models/RegisterViewModel.cs b/Apps/Website/Models/RegisterViewModel.cs index ae41de5..a3fae33 100644 --- a/Apps/Website/Models/RegisterViewModel.cs +++ b/Apps/Website/Models/RegisterViewModel.cs @@ -12,6 +12,7 @@ namespace Website.Models [Required] [Compare(nameof(Password))] + [Display(Name = "Password confirmation")] public string PasswordConfirm { get; set; } } } \ No newline at end of file diff --git a/Apps/Website/Startup.cs b/Apps/Website/Startup.cs index 5aa2e61..b2ca043 100644 --- a/Apps/Website/Startup.cs +++ b/Apps/Website/Startup.cs @@ -107,7 +107,7 @@ namespace Website { endpoints.MapControllerRoute( name: "default", - pattern: "{controller=Home}/{action=Index}/{id?}"); + pattern: "{controller=Links}/{action=Index}/{id?}"); }); } diff --git a/Apps/Website/Views/Accounts/Login.cshtml b/Apps/Website/Views/Accounts/Login.cshtml index 3644db5..f4ede90 100644 --- a/Apps/Website/Views/Accounts/Login.cshtml +++ b/Apps/Website/Views/Accounts/Login.cshtml @@ -1,13 +1,20 @@ @model LoginViewModel +@{ + ViewData["Title"] = "Login"; +} -
- - - + +
+ + + +
- - - +
+ + + +
diff --git a/Apps/Website/Views/Accounts/Register.cshtml b/Apps/Website/Views/Accounts/Register.cshtml index efc99ba..1f0a344 100644 --- a/Apps/Website/Views/Accounts/Register.cshtml +++ b/Apps/Website/Views/Accounts/Register.cshtml @@ -1,17 +1,27 @@ @model RegisterViewModel +@{ + ViewData["Title"] = "Register"; +} -
- - - + - - - +
+ + + +
- - - +
+ + + +
+ +
+ + + +
\ No newline at end of file diff --git a/Apps/Website/Views/Links/Create.cshtml b/Apps/Website/Views/Links/Create.cshtml index 2161b0d..2512895 100644 --- a/Apps/Website/Views/Links/Create.cshtml +++ b/Apps/Website/Views/Links/Create.cshtml @@ -3,15 +3,16 @@ ViewData["Title"] = "Post a new link"; } -
-
- @* @Html.LabelFor(m => m.Url) + + @* @Html.LabelFor(m => m.Url) @Html.EditorFor(m => m.Url) @Html.ValidationMessageFor(m => m.Url) *@ +
+ diff --git a/Apps/Website/Views/Links/Index.cshtml b/Apps/Website/Views/Links/Index.cshtml index ffd5c2c..c569ab4 100644 --- a/Apps/Website/Views/Links/Index.cshtml +++ b/Apps/Website/Views/Links/Index.cshtml @@ -3,10 +3,9 @@ ViewData["Title"] = "Latest Links"; } -Post a new super duber link +Share a link with the world! -

Here are the links

-
    +
      @foreach (var link in Model) {
    • 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/Components/Login/Default.cshtml b/Apps/Website/Views/Shared/Components/Login/Default.cshtml index b871a71..b79afb1 100644 --- a/Apps/Website/Views/Shared/Components/Login/Default.cshtml +++ b/Apps/Website/Views/Shared/Components/Login/Default.cshtml @@ -1,2 +1,2 @@ -Register -Sign in \ No newline at end of file +Register or Sign + in \ No newline at end of file diff --git a/Apps/Website/Views/Shared/Components/Login/LoggedIn.cshtml b/Apps/Website/Views/Shared/Components/Login/LoggedIn.cshtml index 3a3e0d5..3e33130 100644 --- a/Apps/Website/Views/Shared/Components/Login/LoggedIn.cshtml +++ b/Apps/Website/Views/Shared/Components/Login/LoggedIn.cshtml @@ -1,4 +1,6 @@ -

        Connected as @User.Identity.Name

        -
        - -
        \ No newline at end of file +
        +

        Connected as @User.Identity.Name

        +
        + +
        +
        \ No newline at end of file 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/Views/Shared/_Layout.cshtml b/Apps/Website/Views/Shared/_Layout.cshtml index 1c6cae2..853121d 100644 --- a/Apps/Website/Views/Shared/_Layout.cshtml +++ b/Apps/Website/Views/Shared/_Layout.cshtml @@ -1,51 +1,31 @@  + @ViewData["Title"] - Website + -
        - -
        -
        - -
        - @RenderBody() -
        -
        - - + + + +
        + +

        @ViewData["Title"]

        + @RenderBody() +
        + @await RenderSectionAsync("Scripts", required: false) + diff --git a/Apps/Website/Views/Shared/_LinkItem.cshtml b/Apps/Website/Views/Shared/_LinkItem.cshtml index 6e480ea..c1bb2e9 100644 --- a/Apps/Website/Views/Shared/_LinkItem.cshtml +++ b/Apps/Website/Views/Shared/_LinkItem.cshtml @@ -1,11 +1,26 @@ @model HN.Application.LinkDto -@Model.Url - created at @Model.CreatedAt.ToLocalTime() by @Model.CreatedByName (👍: @Model.UpVotes / 👎: @Model.DownVotes) +
        +

        + @Model.Url +

        -@if(User.Identity.IsAuthenticated) { -
        - - - -
        -} \ No newline at end of file +
          +
        • 🔍 view
          • +
        • 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 e679a8e..b4a2983 100644 --- a/Apps/Website/wwwroot/css/site.css +++ b/Apps/Website/wwwroot/css/site.css @@ -1,71 +1,172 @@ -/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification -for details on configuring this project to bundle and minify static web assets. */ - -a.navbar-brand { - white-space: normal; - text-align: center; - word-break: break-all; -} - -/* Provide sufficient contrast against white background */ -a { - color: #0366d6; -} - -.btn-primary { - color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; -} - -.nav-pills .nav-link.active, .nav-pills .show > .nav-link { - color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; -} - -/* Sticky footer styles --------------------------------------------------- */ -html { - font-size: 14px; -} -@media (min-width: 768px) { - html { - font-size: 16px; - } -} - -.border-top { - border-top: 1px solid #e5e5e5; -} -.border-bottom { - border-bottom: 1px solid #e5e5e5; -} - -.box-shadow { - box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); -} - -button.accept-policy { - font-size: 1rem; - line-height: inherit; -} - -/* Sticky footer styles --------------------------------------------------- */ -html { - position: relative; - min-height: 100%; +* { + margin: 0; + padding: 0; } body { - /* Margin bottom by footer height */ - margin-bottom: 60px; + background-color: #efefef; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 1em; + line-height: 1.4; } -.footer { - position: absolute; - bottom: 0; + +a { + color: darkblue; +} + +.mb { + display: block; + margin-bottom: 1rem; +} + +.topnav { + background-color: orangered; + color: rgba(255, 255, 255, 0.87); + display: flex; + justify-content: space-between; + padding: 1rem; +} + +.topnav a { + color: white; + font-weight: bold; + text-decoration: none; +} + +.loggedin-panel { + display: flex; + align-items: center; +} + +.loggedin-panel__out { + background-color: transparent; + border: none; + color: white; + cursor: pointer; + font: inherit; + font-weight: bold; + margin-left: 1rem; + appearance: none; +} + +.main-content { + margin: 2rem auto; + max-width: 900px; width: 100%; - white-space: nowrap; - line-height: 60px; /* Vertically center the text there */ +} + +.main-content__title { + font-size: 2rem; + font-weight: bolder; + color: gray; +} + +.links, +.comments { + list-style-type: none; +} + +.link, +.form { + background-color: white; + padding: 1rem; + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12); + margin-bottom: 1rem; +} + +.link_title { + color: rgba(0, 0, 0, 0.87); + font-size: 1.25rem; + font-weight: bold; + text-decoration: none; +} + +.link_title:hover, +.link_title:focus { + text-decoration: underline; +} + +.link__actions, +.comment__actions { + align-items: center; + color: rgba(0, 0, 0, 0.54); + display: flex; + list-style-type: none; +} + +.link__actions li + li, +.comment__actions li + li { + margin-left: 1rem; +} + +.link__actions a, +.comment__actions a { + text-decoration: none; +} + +.link__actions a:hover, +.link__actions a:focus, +.comment__actions a:hover, +.comment__actions a:focus { + text-decoration: underline; +} + +label, +input, +.field-validation-error { + display: block; +} + +label { + font-weight: bold; +} + +.field-validation-error { + color: orangered; +} + +.field { + margin-bottom: 1rem; +} + +.message { + background-color: bisque; + padding: 1rem; + margin-bottom: 1rem; +} + +.votable { + align-items: center; + display: flex; +} + +.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; }