simple details page

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>
+

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();
+		}
+	}
+}

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>

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();
 		}
 
 	}

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;
+	border-radius: 0;
-	text-align: center;
-	transition: 0.2s all;
-}
-.vertical-buttons a.button:hover {
-	background: #a66;
-	color: white;
 }
 .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;
+}