jleicher/hn-dotnet
1
0
Fork 0
Code Issues 7 Pull Requests Releases Activity

mvc-styles #28

Merged
jleicher merged 2 commits from mvc-styles into master 2020-12-22 10:47:23 +01:00
Conversation 0 Commits 2 Files Changed 16 +305 -166
16 changed files with 305 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Application/GetLinkComments/CommentDto.cs
View File

@ -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; }

2
Application/GetLinkComments/GetLinkCommentsQueryHandler.cs
View File

@ -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)

1
Apps/Website/Models/RegisterViewModel.cs
View File

@ -12,6 +12,7 @@ namespace Website.Models
[Required]
[Compare(nameof(Password))]
[Display(Name = "Password confirmation")]
public string PasswordConfirm { get; set; }
}
}

2
Apps/Website/Startup.cs
View File

@ -107,7 +107,7 @@ namespace Website
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
pattern: "{controller=Links}/{action=Index}/{id?}");
});
}

9
Apps/Website/Views/Accounts/Login.cshtml
View File

@ -1,13 +1,20 @@
@model LoginViewModel
@{
ViewData["Title"] = "Login";
}
<form asp-action="Login" method="post">
<form class="form" asp-action="Login" method="post">
<div class="field">
<label asp-for="@Model.Username"></label>
<input asp-for="@Model.Username" />
<span asp-validation-for="@Model.Username"></span>
</div>
<div class="field">
<label asp-for="@Model.Password"></label>
<input type="password" asp-for="@Model.Password" />
<span asp-validation-for="@Model.Password"></span>
</div>
<button type="submit">Sign in</button>
</form>

12
Apps/Website/Views/Accounts/Register.cshtml
View File

@ -1,17 +1,27 @@
@model RegisterViewModel
@{
ViewData["Title"] = "Register";
}
<form asp-action="Register" method="post">
<form class="form" asp-action="Register" method="post">
<div class="field">
<label asp-for="@Model.Username"></label>
<input asp-for="@Model.Username" />
<span asp-validation-for="@Model.Username"></span>
</div>
<div class="field">
<label asp-for="@Model.Password"></label>
<input type="password" asp-for="@Model.Password" />
<span asp-validation-for="@Model.Password"></span>
</div>
<div class="field">
<label asp-for="@Model.PasswordConfirm"></label>
<input type="password" asp-for="@Model.PasswordConfirm" />
<span asp-validation-for="@Model.PasswordConfirm"></span>
</div>
<button type="submit">Register</button>
</form>

5
Apps/Website/Views/Links/Create.cshtml
View File

@ -3,15 +3,16 @@
ViewData["Title"] = "Post a new link";
}
<form method="post">
<div>
<form class="form" method="post">
@* @Html.LabelFor(m => m.Url)
@Html.EditorFor(m => m.Url)
@Html.ValidationMessageFor(m => m.Url) *@
<div class="field">
<label asp-for="@Model.Url"></label>
<input asp-for="@Model.Url" />
<span asp-validation-for="@Model.Url"></span>
</div>
<button type="submit">Post!</button>
</form>

5
Apps/Website/Views/Links/Index.cshtml
View File

@ -3,10 +3,9 @@
ViewData["Title"] = "Latest Links";
}
<a asp-action="Create" title="New post">Post a new super duber link</a>
<a class="mb" asp-action="Create" title="New post">Share a link with the world!</a>
<p>Here are the links</p>
<ul>
<ul class="links">
@foreach (var link in Model)
{
<li>

18
Apps/Website/Views/Links/Show.cshtml
View File

@ -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>
@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>
}

4
Apps/Website/Views/Shared/Components/Login/Default.cshtml
View File

@ -1,2 +1,2 @@
<a asp-action="Register" asp-controller="Accounts">Register</a>
<a asp-action="Login" asp-controller="Accounts">Sign in</a>
<a asp-action="Register" asp-controller="Accounts">Register</a> or <a asp-action="Login" asp-controller="Accounts">Sign
in</a>

10
Apps/Website/Views/Shared/Components/Login/LoggedIn.cshtml
View File

@ -1,4 +1,6 @@
<p>Connected as @User.Identity.Name</p>
<form asp-action="Logout" asp-controller="Accounts" method="post">
<button type="submit">Sign out</button>
</form>
<div class="loggedin-panel">
<p>Connected as <strong>@User.Identity.Name</strong></p>
<form asp-action="Logout" asp-controller="Accounts" method="post">
<button class="loggedin-panel__out" type="submit">Sign out</button>
</form>
</div>

13
Apps/Website/Views/Shared/_CommentForm.cshtml
View File

@ -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">
<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>

27
Apps/Website/Views/Shared/_CommentItem.cshtml
View File

@ -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">
<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" />
<input type="submit" name="type" value="up" />
<input type="submit" name="type" value="down" />
vote&nbsp;<input type="submit" name="type" value="up" />&nbsp;or&nbsp;<input type="submit" name="type"
value="down" />
</form>
}
</li>
}
</ul>
</article>

42
Apps/Website/Views/Shared/_Layout.cshtml
View File

@ -1,51 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Website</title>
<link rel="stylesheet" asp-append-version="true" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Links" asp-action="Index">Links</a>
</li>
</ul>
</div>
<body>
<header class="topnav">
<div class="logo">
<a class="logo__link" href="/" title="back home">hn-dotnet</a>
</div>
<div class="topnav__account">
<vc:login />
</div>
</nav>
</header>
<div class="container">
<main class="main-content">
<partial name="_FlashMessage" />
<main role="main" class="pb-3">
<h1 class="main-content__title">@ViewData["Title"]</h1>
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
&copy; 2020 - Website - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>

27
Apps/Website/Views/Shared/_LinkItem.cshtml
View File

@ -1,11 +1,26 @@
@model HN.Application.LinkDto
<a asp-action="Show" asp-controller="Links" asp-route-id="@Model.Id">@Model.Url - created at @Model.CreatedAt.ToLocalTime() by @Model.CreatedByName (👍: @Model.UpVotes / 👎: @Model.DownVotes)</a>
<article class="link">
<h2>
<a class="link_title" href="@Model.Url" rel="nofollow">@Model.Url</a>
</h2>
@if(User.Identity.IsAuthenticated) {
<form asp-controller="Links" asp-action="Vote" asp-route-id="@Model.Id" asp-route-url="@Model.Url" method="post">
<ul class="link__actions">
<li><a asp-action="Show" asp-controller="Links" asp-route-id="@Model.Id">🔍 view</a></li>
<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="Links" asp-action="Vote" asp-route-id="@Model.Id" asp-route-url="@Model.Url"
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" />
vote&nbsp;<input type="submit" name="type" value="up" />&nbsp;or&nbsp;<input type="submit" name="type"
value="down" />
</form>
}
</li>
}
</ul>
</article>

231
Apps/Website/wwwroot/css/site.css
View File

@ -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;
}