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

some styles

Browse Source
This commit is contained in:
Julien LEICHER 2020-12-21 19:50:29 +01:00
parent 7a9aefbefc
commit 2f98b1c4ac
No known key found for this signature in database
GPG Key ID: BE0761B6A007EB96
11 changed files with 227 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
Apps/Website/Startup.cs
View File

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

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

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

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

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

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

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

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

@ -3,10 +3,9 @@
ViewData["Title"] = "Latest Links"; 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 class="links">
<ul>
@foreach (var link in Model) @foreach (var link in Model)
{ {
<li> <li>

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="Register" asp-controller="Accounts">Register</a> or <a asp-action="Login" asp-controller="Accounts">Sign
<a asp-action="Login" asp-controller="Accounts">Sign in</a> in</a>

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

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

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

@ -1,51 +1,31 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Website</title> <title>@ViewData["Title"] - Website</title>
<link rel="stylesheet" asp-append-version="true" href="~/css/site.css" /> <link rel="stylesheet" asp-append-version="true" href="~/css/site.css" />
</head> </head>
<body> <body>
<header> <header class="topnav">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="logo">
<div class="container"> <a class="logo__link" href="/" title="back home">hn-dotnet</a>
<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>
</div> </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> <script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false) @await RenderSectionAsync("Scripts", required: false)
</body> </body>
</html> </html>

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

@ -1,11 +1,26 @@
@model HN.Application.LinkDto @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) { <ul class="link__actions">
<form asp-controller="Links" asp-action="Vote" asp-route-id="@Model.Id" asp-route-url="@Model.Url" method="post"> <li><a asp-action="Show" asp-controller="Links" asp-route-id="@Model.Id">🔍 view</a></li>
<input type="hidden" name="redirectTo" value="@Context.Request.Path" /> <li>posted at @Model.CreatedAt.ToLocalTime() by <strong>@Model.CreatedByName</strong></li>
<input type="submit" name="type" value="up" /> <li>
<input type="submit" name="type" value="down" /> <strong>@Model.UpVotes</strong> 👍 / <strong>@Model.DownVotes</strong> 👎
</form> </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>

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

@ -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. */ margin: 0;
padding: 0;
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%;
} }
body { body {
/* Margin bottom by footer height */ background-color: #efefef;
margin-bottom: 60px; 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; a {
bottom: 0; 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%; 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;
} }