From 2f98b1c4ace8bddef3e1746a12318d7a787f50e0 Mon Sep 17 00:00:00 2001
From: Julien LEICHER <julien+github@leicher.me>
Date: Mon, 21 Dec 2020 19:50:29 +0100
Subject: [PATCH] some styles

---
 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 +-
 .../Shared/Components/Login/Default.cshtml    |   4 +-
 .../Shared/Components/Login/LoggedIn.cshtml   |  10 +-
 Apps/Website/Views/Shared/_Layout.cshtml      |  54 ++---
 Apps/Website/Views/Shared/_LinkItem.cshtml    |  31 ++-
 Apps/Website/wwwroot/css/site.css             | 202 ++++++++++++------
 11 files changed, 227 insertions(+), 140 deletions(-)

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";
+}
 
-<form asp-action="Login" method="post">
-  <label asp-for="@Model.Username"></label>
-  <input asp-for="@Model.Username" />
-  <span asp-validation-for="@Model.Username"></span>
+<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>
 
-  <label asp-for="@Model.Password"></label>
-  <input type="password" asp-for="@Model.Password" />
-  <span asp-validation-for="@Model.Password"></span>
+  <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>
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";
+}
 
-<form asp-action="Register" method="post">
-  <label asp-for="@Model.Username"></label>
-  <input asp-for="@Model.Username" />
-  <span asp-validation-for="@Model.Username"></span>
+<form class="form" asp-action="Register" method="post">
 
-  <label asp-for="@Model.Password"></label>
-  <input type="password" asp-for="@Model.Password" />
-  <span asp-validation-for="@Model.Password"></span>
+  <div class="field">
+    <label asp-for="@Model.Username"></label>
+    <input asp-for="@Model.Username" />
+    <span asp-validation-for="@Model.Username"></span>
+  </div>
 
-  <label asp-for="@Model.PasswordConfirm"></label>
-  <input type="password" asp-for="@Model.PasswordConfirm" />
-  <span asp-validation-for="@Model.PasswordConfirm"></span>
+  <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>
\ 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";
 }
 
-<form method="post">
-  <div>
-    @* @Html.LabelFor(m => m.Url)
+<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>
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";
 }
 
-<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>
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 @@
-<a asp-action="Register" asp-controller="Accounts">Register</a>
-<a asp-action="Login" asp-controller="Accounts">Sign in</a>
\ No newline at end of file
+<a asp-action="Register" asp-controller="Accounts">Register</a> or <a asp-action="Login" asp-controller="Accounts">Sign
+  in</a>
\ 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 @@
-<p>Connected as @User.Identity.Name</p>
-<form asp-action="Logout" asp-controller="Accounts" method="post">
-  <button type="submit">Sign out</button>
-</form>
\ No newline at end of file
+<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>
\ 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 @@
 <!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>
-
-                <vc:login />
-            </div>
-        </nav>
-    </header>
-    <div class="container">
-        <partial name="_FlashMessage" />
-        <main role="main" class="pb-3">
-            @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>
+    <header class="topnav">
+        <div class="logo">
+            <a class="logo__link" href="/" title="back home">hn-dotnet</a>
         </div>
-    </footer>
+        <div class="topnav__account">
+            <vc:login />
+        </div>
+    </header>
+
+    <main class="main-content">
+        <partial name="_FlashMessage" />
+        <h1 class="main-content__title">@ViewData["Title"]</h1>
+        @RenderBody()
+    </main>
+
     <script src="~/js/site.js" asp-append-version="true"></script>
     @await RenderSectionAsync("Scripts", required: false)
 </body>
+
 </html>
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
 
-<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">
-    <input type="hidden" name="redirectTo" value="@Context.Request.Path" />
-    <input type="submit" name="type" value="up" />
-    <input type="submit" name="type" value="down" />
-  </form>
-}
\ No newline at end of file
+  <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" />
+          vote&nbsp;<input type="submit" name="type" value="up" />&nbsp;or&nbsp;<input type="submit" name="type"
+            value="down" />
+        </form>
+      </li>
+    }
+  </ul>
+</article>
\ No newline at end of file
diff --git a/Apps/Website/wwwroot/css/site.css b/Apps/Website/wwwroot/css/site.css
index e679a8e..1556d54 100644
--- a/Apps/Website/wwwroot/css/site.css
+++ b/Apps/Website/wwwroot/css/site.css
@@ -1,71 +1,143 @@
-/* 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 {
+  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 {
+  align-items: center;
+  color: rgba(0, 0, 0, 0.54);
+  display: flex;
+  list-style-type: none;
+}
+
+.link__actions li + li {
+  margin-left: 1rem;
+}
+
+.link__actions a {
+  text-decoration: none;
+}
+
+.link__actions a:hover,
+.link__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;
+}
+
+.votable input[value="up"]::before {
+  color: red;
+  content: "test";
+  display: block;
 }