From 9d2d0d697c62efec6859523cf02c8dd92164c97e Mon Sep 17 00:00:00 2001
From: Lynne <lynne@bune.city>
Date: Wed, 16 Sep 2020 12:14:31 +1000
Subject: [PATCH] simple details page

---
 Pages/Documents/Details.cshtml    | 40 +++++++++++++++++++++++++
 Pages/Documents/Details.cshtml.cs | 34 +++++++++++++++++++++
 Pages/Index.cshtml                |  4 ++-
 Pages/Index.cshtml.cs             |  6 ++--
 wwwroot/css/style.css             | 50 +++++++++++++++++++++++--------
 5 files changed, 117 insertions(+), 17 deletions(-)
 create mode 100644 Pages/Documents/Details.cshtml
 create mode 100644 Pages/Documents/Details.cshtml.cs

diff --git a/Pages/Documents/Details.cshtml b/Pages/Documents/Details.cshtml
new file mode 100644
index 0000000..25ec72a
--- /dev/null
+++ b/Pages/Documents/Details.cshtml
@@ -0,0 +1,40 @@
+@page "{id:int}"
+@model Snootalogue.Pages.Documents.DetailsModel
+
+@{
+	ViewData["Title"] = "Details";
+}
+
+<h1>Details</h1>
+
+<dl class="document-details">
+	<dt>@Html.DisplayNameFor(model => model.Document.Title)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Title)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.ID)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.ID)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Filename)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Filename)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Hash)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Hash)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Size)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Size)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Title)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Title)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Authors)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Authors)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Category)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Category)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.DateAdded)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.DateAdded)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Tags)</dt>
+	<dd class="tags">@Html.DisplayFor(model => model.Document.Tags)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Read)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Read)</dd>
+</dl>
+
+<div class="centred">
+	<a class="button block" href='/'>Return to documents</a>
+	<br>
+	<a class="button block" href='#'>View as JSON</a>
+</div>
+
diff --git a/Pages/Documents/Details.cshtml.cs b/Pages/Documents/Details.cshtml.cs
new file mode 100644
index 0000000..e969e90
--- /dev/null
+++ b/Pages/Documents/Details.cshtml.cs
@@ -0,0 +1,34 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.EntityFrameworkCore;
+using Snootalogue.Data;
+using Snootalogue.Models;
+
+namespace Snootalogue.Pages.Documents {
+	public class DetailsModel : PageModel {
+		private readonly SnootalogueContext _context;
+		public Document Document { get; set; }
+
+		public DetailsModel(SnootalogueContext context) {
+			_context = context;
+		}
+
+		public async Task<IActionResult> OnGetAsync(int? id) {
+			if (id == null) {
+				return NotFound();
+			}
+
+			Document = await _context.Document.FirstOrDefaultAsync(d => d.ID == id);
+
+			if (Document == null) {
+				return NotFound();
+			}
+
+			return Page();
+		}
+	}
+}
diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
index 0ef4627..8251697 100644
--- a/Pages/Index.cshtml
+++ b/Pages/Index.cshtml
@@ -1,5 +1,7 @@
 @page
 @model Snootalogue.Pages.IndexModel
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+
 @{
 	ViewData["Title"] = "Home";
 }
@@ -21,7 +23,7 @@
 			@* TODO: replace these with font awesome or something *@
 			<div class="vertical-buttons">
 				<a href="#" class="button simple">View</a>
-				<a href="#" class="button simple">Details</a>
+				<a asp-page="./Documents/Details" asp-route-id="@item.ID" class="button simple">Details</a>
 				<a href="#" class="button simple">Edit</a>
 				<a href="#" class="button simple">Delete</a>
 			</div>
diff --git a/Pages/Index.cshtml.cs b/Pages/Index.cshtml.cs
index df607bf..8a82e2a 100644
--- a/Pages/Index.cshtml.cs
+++ b/Pages/Index.cshtml.cs
@@ -10,16 +10,16 @@ using Snootalogue.Data;
 
 namespace Snootalogue.Pages {
 	public class IndexModel : PageModel {
-		private readonly SnootalogueContext context;
+		private readonly SnootalogueContext _context;
 		public IList<Document> Documents { get; set; }
 		public string Search { get; set; }
 
 		public IndexModel(SnootalogueContext context) {
-			this.context = context;
+			_context = context;
 		}
 
 		public async Task OnGetAsync() {
-			Documents = await context.Document.ToListAsync();
+			Documents = await _context.Document.ToListAsync();
 		}
 
 	}
diff --git a/wwwroot/css/style.css b/wwwroot/css/style.css
index 65d33a2..628963d 100644
--- a/wwwroot/css/style.css
+++ b/wwwroot/css/style.css
@@ -5,29 +5,45 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
 	font-weight: 200;
+	text-align: center;
 }
 
-a.simple {
+.centred {
+	margin: 0 auto;
+	width: max-content;
+	text-align: center;
+}
+
+a {
 	text-decoration: none;
 }
 
+a.button {
+	color: #a66;
+	background: white;
+	border: thin #a66 solid;
+	border-radius: 5px;
+	padding: 5px;
+	text-align: center;
+	transition: 0.2s all;
+}
+a.button:hover {
+	background: #a66;
+	color: white;
+}
+a.button.block {
+	display: inline-block;
+	margin: 5px auto;
+}
+
 .vertical-buttons {
 	display: flex;
 	flex-direction: column;
 }
 .vertical-buttons a.button {
 	flex: 1;
-	color: #a66;
-	background: white;
-	border: thin #a66 solid;
 	border-bottom: none;
-	padding: 5px;
-	text-align: center;
-	transition: 0.2s all;
-}
-.vertical-buttons a.button:hover {
-	background: #a66;
-	color: white;
+	border-radius: 0;
 }
 .vertical-buttons a.button:first-child {
 	border-radius: 5px 5px 0 0;
@@ -85,16 +101,19 @@ main {
 	margin: 3px 0;
 }
 .document-column .title {
-	font-size: 1.2em;
+	font-size: 1.4em;
+	font-weight: 200;
 	text-align: center;
 }
 .document-column .authors {
 	text-align: center;
+	font-style: italic;
 }
 .document-column .tags {
 	font-size: 0.8em;
 }
-.document-column .tags .list-empty::before {
+.document-column .tags .list-empty::before,
+.document-details .tags .list-empty::before {
 	display: inline-block;
 	content: "No tags";
 }
@@ -102,3 +121,8 @@ main {
 	font-size: 0.8em;
 	color: #888;
 }
+
+.document-details {
+	margin: 10px auto;
+	width: min-content;
+}