basic UI layout and style

.vscode/tasks.json

@@ -36,7 +36,11 @@
 				"/property:GenerateFullPaths=true",
 				"/consoleloggerparameters:NoSummary"
 			],
-			"problemMatcher": "$msCompile"
+			"problemMatcher": "$msCompile",
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
 		}
 	]
 }

Models/Document.cs

@@ -8,13 +8,16 @@ namespace Snootalogue.Models {
 		public int ID { get; set; }
 		public string Filename { get; set; }
 		public string Hash { get; set; }
+		[UIHint("FileSize")]
 		public long Size { get; set; }
 
 		public string Title { get; set; }
+		[UIHint("CommaSeparatedList")]
 		public List<string> Authors { get; set; }
 		public string Category { get; set; }
 		[Display(Name = "Release Date")]
 		public DateTime DateAdded { get; set; }
+		[UIHint("CommaSeparatedList")]
 		public List<string> Tags { get; set; }
 		public Boolean Read { get; set; }
 	}

Models/SeedData.cs

@@ -20,10 +20,11 @@ namespace Snootalogue.Models {
 					new Document {
 						Title = "The Peebler Chronicles",
 						Filename = "peebler.pdf",
-						Size = 5 * 1024 * 1024,
+						Size = Convert.ToInt64(0.5 * 1024 * 1024),
 						DateAdded = DateTime.UtcNow,
 						Authors = new List<string>() { "Pempos", "Artep" },
-						Category = "News"
+						Category = "News",
+						Hash = "0d96a4ff68ad6d4b6f1f30f713b18d5184912ba8dd389f86aa7710db079abcb0"
 					},
 					new Document {
 						Title = "Smooched by a Wifeoid",
@@ -32,15 +33,17 @@ namespace Snootalogue.Models {
 						DateAdded = DateTime.UtcNow,
 						Authors = new List<string>() { "Lynne", "Petra" },
 						Category = "Romance",
-						Read = true
+						Read = true,
+						Hash = "0d96a4ff68ad6d4b6f1f30f713b18d5184912ba8dd389f86aa7710db079abcb0"
 					},
 					new Document {
 						Title = "What on Boo Earth? My Girlfriend can Walk on the Ceiling?!",
 						Filename = "ceiling_gf.pdf",
-						Size = 22 * 1024 * 1024,
+						Size = Convert.ToInt64(22.5 * 1024 * 1024),
 						DateAdded = DateTime.UtcNow,
 						Authors = new List<string>() { "Lynne" },
-						Category = "Romance"
+						Category = "Romance",
+						Hash = "0d96a4ff68ad6d4b6f1f30f713b18d5184912ba8dd389f86aa7710db079abcb0"
 					}
 				);
 

Pages/Index.cshtml

@@ -1,58 +1,32 @@
 @page
 @model Snootalogue.Pages.IndexModel
+@{
+	ViewData["Title"] = "Home";
+}
 
-<h1>Documents</h1>
-
-<table>
-	<thead>
-		<tr>
-			<th>
-				@Html.DisplayNameFor(model => model.Documents[0].Title)
-			</th>
-			@* <th>
-				@Html.DisplayNameFor(model => model.Documents[0].Authors)
-			</th> *@
-			<th>
-				@Html.DisplayNameFor(model => model.Documents[0].Category)
-			</th>
-			<th>
-				@Html.DisplayNameFor(model => model.Documents[0].Size)
-			</th>
-			<th>
-				@Html.DisplayNameFor(model => model.Documents[0].Read)
-			</th>
-			<th>
-				@Html.DisplayNameFor(model => model.Documents[0].DateAdded)
-			</th>
-		</tr>
-	</thead>
-
-	<tbody>
+@* <h1>Documents</h1> *@
+<div class="documents">
 	@foreach (var item in Model.Documents) {
-			<tr>
-				<td>
-					@Html.DisplayFor(modelItem => item.Title)
-				</td>
-				<td>
-					@Html.DisplayFor(modelItem => item.Category)
-				</td>
-				<td>
-					@Html.DisplayFor(modelItem => item.Size)
-				</td>
-				<td>
-					@Html.DisplayFor(modelItem => item.Read)
-				</td>
-				<td>
-					@Html.DisplayFor(modelItem => item.DateAdded)
-				</td>
-				<td>
-					<a href="#">Details</a>
-					<a href="#">Edit</a>
-					<a href="#">Delete</a>
-				</td>
-			</tr>
-		}
-	</tbody>
+	<div class="document">
+		<div class="document-column left" style="background-image:url('/img/placeholder.png');"></div>
+		<div class="document-column centre">
+			<div class="title">@Html.DisplayFor(modelItem => item.Title)</div>
+			<div class="authors">By @Html.DisplayFor(modelItem => item.Authors)</div>
+			<div class="category">Category: @Html.DisplayFor(modelItem => item.Category)</div>
+			<div class="tags">@Html.DisplayFor(modelItem => item.Tags)</div>
+			@{string hash = item.Hash.Substring(0, 8);}
+			<div class="metadata">@Html.DisplayFor(modelItem => item.Filename) | @Html.DisplayFor(modelItem => item.Size) | <span title="@Html.DisplayFor(modelItem => item.Hash)">@hash...</span></div>
+		</div>
+		<div class="document-column right">
+			@* 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 href="#" class="button simple">Edit</a>
+				<a href="#" class="button simple">Delete</a>
+			</div>
+		</div>
 
-	</thead>
-</table>
+	</div>
+	}
+</div>

Pages/Shared/_Layout.cshtml

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>@ViewData["Title"] | Snootalogue</title>
+	<link rel="stylesheet" href="~/css/style.css">
+</head>
+
+<body>
+	<nav>
+		<div id="nav-links">Snootalogue - Link 1 - Link 2</div>
+		<input id="nav-search" type="search" placeholder="Search...">
+	</nav>
+
+	<main>
+		@RenderBody()
+	</main>
+</body>
+
+</html>

Pages/_ViewStart.cshtml

@@ -0,0 +1,3 @@
+@{
+	Layout = "_Layout";
+}

Startup.cs

@@ -4,6 +4,7 @@ using Microsoft.EntityFrameworkCore;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
+using Westwind.AspNetCore.LiveReload;
 using Snootalogue.Data;
 
 namespace Snootalogue {
@@ -17,7 +18,8 @@ namespace Snootalogue {
 		// This method gets called by the runtime. Use this method to add services to the container.
 		// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
 		public void ConfigureServices(IServiceCollection services) {
-			services.AddRazorPages();
+			services.AddLiveReload();
+			services.AddRazorPages().AddRazorRuntimeCompilation();
 			services.AddDbContext<SnootalogueContext>(options =>
 				options.UseSqlite(Configuration.GetConnectionString("SnootalogueContext"))
 			);
@@ -25,10 +27,13 @@ namespace Snootalogue {
 
 		// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
 		public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
+			app.UseLiveReload();
+
 			if (env.IsDevelopment()) {
 				app.UseDeveloperExceptionPage();
 			}
 
+			app.UseStaticFiles();
 			app.UseRouting();
 
 			app.UseEndpoints(endpoints => {

Views/Shared/DisplayTemplates/CommaSeparatedList.cshtml

@@ -0,0 +1,14 @@
+@using System.Text;
+@model List<string>
+
+@{
+	if (@Model == null || @Model.Count == 0) {
+		<span class="list-empty"></span>
+	} else {
+		var sb = new StringBuilder();
+		foreach(var item in @Model) {
+			sb.AppendFormat("{0}, ", item);
+		}
+		<text>@sb.ToString().Substring(0, sb.Length - 2)</text>
+	}
+}

Views/Shared/DisplayTemplates/FileSize.cshtml

@@ -0,0 +1,15 @@
+@model long
+
+@{
+	string[] suffixes = {"", "K", "M", "G", "T", "P"};
+	double x = @Model;
+	int i = 0;
+	while (x > 1024) {
+		x = x / 1024.0;
+		i++;
+	}
+	if (i == 0){
+		<span>@x bytes</span>
+	} else {
+		<span>@x @suffixes[i]iB</span>
+	}}

snootalogue.csproj

@@ -5,6 +5,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="3.1.8" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.1.0" />
     <!-- <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.1.0" /> -->
     <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="3.1.0">
@@ -15,6 +16,7 @@
     <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="3.1.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.1.0" />
+    <PackageReference Include="Westwind.AspnetCore.LiveReload" Version="0.2.8" />
   </ItemGroup>
 
 </Project>

wwwroot/css/style.css

@@ -0,0 +1,104 @@
+body {
+	font-family: sans-serif;
+	margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-weight: 200;
+}
+
+a.simple {
+	text-decoration: none;
+}
+
+.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;
+}
+.vertical-buttons a.button:first-child {
+	border-radius: 5px 5px 0 0;
+}
+.vertical-buttons a.button:last-child {
+	border-bottom: thin #a66 solid;
+	border-radius: 0 0 5px 5px;
+}
+
+nav {
+	padding: 20px 15px;
+	background: #a00;
+	color: white;
+	display: flex;
+	justify-content: space-between;
+}
+#nav-links {
+	font-size: 1.4em;
+}
+#nav-links, #nav-search {
+	margin: auto 0;
+}
+
+main {
+	padding: 20px;
+}
+
+.documents {
+	display: flex;
+	flex-direction: column;
+}
+.document {
+	display: flex;
+	flex: 1;
+	flex-direction: row;
+	margin: 10px;
+}
+
+.document-column {
+	width: 10%;
+}
+.document-column.left {
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+.document-column.centre {
+	width: 80%;
+}
+.document-column.right ul {
+	list-style: none;
+	padding: 0;
+}
+.document-column.centre div {
+	margin: 3px 0;
+}
+.document-column .title {
+	font-size: 1.2em;
+	text-align: center;
+}
+.document-column .authors {
+	text-align: center;
+}
+.document-column .tags {
+	font-size: 0.8em;
+}
+.document-column .tags .list-empty::before {
+	display: inline-block;
+	content: "No tags";
+}
+.document-column .metadata {
+	font-size: 0.8em;
+	color: #888;
+}