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

there is now a shitty document viewer

Browse source
This commit is contained in:
Lynne Megido 2020-09-18 00:14:50 +10:00
parent 6d44b579d2
commit 4f0ac6ef5b
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
5 changed files with 70 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
Pages/Documents/View.cshtml Normal file
View file

@ -0,0 +1,10 @@
@page "{id:int}"
@model Snootalogue.Pages.Documents.ViewModel
@{
ViewData["Title"] = $"Viewing \"{Model.Document.Title}\"";
ViewData["SlimNavbar"] = true;
ViewData["NoMainPadding"] = true;
}
<iframe id="document-viewer" src="/Content/@Model.Document.Filename"></iframe>

31
Pages/Documents/View.cshtml.cs Normal file
View file

@ -0,0 +1,31 @@
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 ViewModel : PageModel {
private readonly SnootalogueContext _context;
public Document Document { get; set; }
public ViewModel(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();
}
}
}

2
Pages/Index.cshtml
View file

@ -12,7 +12,7 @@
<div class="document"> <div class="document">
<div class="document-column left" style="background-image:url('/img/placeholder.png');"></div> <div class="document-column left" style="background-image:url('/img/placeholder.png');"></div>
<div class="document-column centre"> <div class="document-column centre">
<div class="title"><a href="/Content/@item.Filename">@Html.DisplayFor(modelItem => item.Title)</a></div> <div class="title"><a asp-page="./Documents/View" asp-route-id="@item.ID">@Html.DisplayFor(modelItem => item.Title)</a></div>
<div class="authors">By @Html.DisplayFor(modelItem => item.Authors)</div> <div class="authors">By @Html.DisplayFor(modelItem => item.Authors)</div>
<div class="category">Category: @Html.DisplayFor(modelItem => item.Category)</div> <div class="category">Category: @Html.DisplayFor(modelItem => item.Category)</div>
<div class="tags">@Html.DisplayFor(modelItem => item.Tags)</div> <div class="tags">@Html.DisplayFor(modelItem => item.Tags)</div>

4
Pages/Shared/_Layout.cshtml
View file

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<nav> <nav @{if (ViewData.ContainsKey("SlimNavbar")) {<text>class = "slim"</text>}}>
<div id="nav-links"><a href="/">Snootalogue</a></div> <div id="nav-links"><a href="/">Snootalogue</a></div>
<div id="nav-controls"> <div id="nav-controls">
<input id="nav-search" type="search" placeholder="Search..."> <input id="nav-search" type="search" placeholder="Search...">
@ -18,7 +18,7 @@
</div> </div>
</nav> </nav>
<main> <main @{if (ViewData.ContainsKey("NoMainPadding")) {<text>class = "no-padding"</text>}}>
@RenderBody() @RenderBody()
</main> </main>
</body> </body>

26
wwwroot/css/style.css
View file

@ -1,6 +1,10 @@
body { body {
font-family: sans-serif; font-family: sans-serif;
min-height: 100vh;
margin: 0; margin: 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -78,6 +82,11 @@ nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
nav.slim {
padding: 5px 15px;
font-size: 0.75em;
}
#nav-links { #nav-links {
font-size: 1.4em; font-size: 1.4em;
} }
@ -87,8 +96,19 @@ nav {
#nav-links, #nav-search { #nav-links, #nav-search {
margin: auto 0; margin: auto 0;
} }
#nav-search {
padding: 8px;
border: thin #a66 solid;
}
nav.slim #nav-search {
padding: 3px;
}
main { main {
flex-grow: 1;
margin: 0;
}
main:not(.no-padding) {
padding: 20px; padding: 20px;
} }
@ -156,6 +176,12 @@ main {
width: min-content; width: min-content;
} }
#document-viewer {
height: 100%;
width: 100%;
border: 0;
}
@media only screen and (min-width: 1000px) { @media only screen and (min-width: 1000px) {
.documents { .documents {
max-width: 80%; max-width: 80%;