lynnesbian/Snootalogue
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

basic UI layout and style

Browse source
This commit is contained in:
Lynne Megido 2020-09-16 11:43:55 +10:00
parent 88026c07f8
commit 2a14bf1f41
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
13 changed files with 210 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.vscode/tasks.json vendored
View file

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

3
Models/Document.cs
View file

@ -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; }
}

13
Models/SeedData.cs
View file

@ -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"
}
);

82
Pages/Index.cshtml
View file

@ -1,58 +1,32 @@
@page
@model Snootalogue.Pages.IndexModel
<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>
@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>
@{
ViewData["Title"] = "Home";
}
</tbody>
</thead>
</table>
@* <h1>Documents</h1> *@
<div class="documents">
@foreach (var item in Model.Documents) {
<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>
</div>
}
</div>

22
Pages/Shared/_Layout.cshtml Normal file
View file

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

3
Pages/_ViewStart.cshtml Normal file
View file

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

7
Startup.cs
View file

@ -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 => {

14
Views/Shared/DisplayTemplates/CommaSeparatedList.cshtml Normal file
View file

@ -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>
}
}

15
Views/Shared/DisplayTemplates/FileSize.cshtml Normal file
View file

@ -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>
}}

2
snootalogue.csproj
View file

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

104
wwwroot/css/style.css Normal file
View file

@ -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;
}

BIN
wwwroot/img/placeholder.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
wwwroot/img/placeholder.xcf Normal file
View file

Binary file not shown.