winter-software/Wave
winter-software/Wave
1
0
Fork 0
Code Issues Wiki Activity

Improved ArticleView layout

Browse source
This commit is contained in:
Mia Rose Winter 2024-01-25 11:46:48 +01:00
parent f2a5231c8d
commit 81e95042bd
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
3 changed files with 35 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
Wave/Components/ArticleComponent.razor
View file

@ -3,11 +3,13 @@
@inject IStringLocalizer<Pages.ArticleView> Localizer @inject IStringLocalizer<Pages.ArticleView> Localizer
<h1 class="text-3xl lg:text-5xl font-light text-primary"> <article class="mb-6">
<header class="bg-secondary text-secondary-content border-b-2 border-current mt-[-2rem] mx-[-3rem] py-6 px-12 mb-6">
<h1 class="text-3xl lg:text-5xl font-light">
@Article.Title @Article.Title
</h1> </h1>
<p class="mb-6"> <p>
<small class="text-sm text-secondary"> <small class="text-sm">
<time datetime="@Article.PublishDate.ToString("u")" <time datetime="@Article.PublishDate.ToString("u")"
title="@Article.PublishDate.ToString("g")"> title="@Article.PublishDate.ToString("g")">
@Article.PublishDate.Humanize() @Article.PublishDate.Humanize()
@ -24,25 +26,22 @@
</span> </span>
} }
</small> </small>
</p> </p>
</header>
<hr class="my-3" /> <div class="prose prose-neutral max-w-none hyphens-auto text-justify">
<article class="prose prose-neutral max-w-none mb-6">
@Content @Content
</div>
</article> </article>
<hr class="my-3" />
@if (!string.IsNullOrWhiteSpace(Article.Author.AboutTheAuthor)) { @if (!string.IsNullOrWhiteSpace(Article.Author.AboutTheAuthor)) {
<section class="mb-2"> <section class="mb-2">
<h2 class="text-2xl lg:text-4xl mb-3">About The Author</h2>
<div class="card sm:card-side card-compact bg-secondary text-secondary-content rounded shadow"> <div class="card sm:card-side card-compact bg-secondary text-secondary-content rounded shadow">
<figure class="sm:max-w-32"> <figure class="sm:max-w-40">
<img src="/api/user/pfp/@Article.Author.Id" alt="" width="800"> <img src="/api/user/pfp/@Article.Author.Id" alt="" width="800">
</figure> </figure>
<div class="card-body"> <div class="card-body">
<h3 class="card-title">@Article.Author.Name</h3> <h2 class="card-title">About The Author</h2>
<h3><strong>@Article.Author.Name</strong></h3>
<p> <p>
@Article.Author.AboutTheAuthor @Article.Author.AboutTheAuthor
</p> </p>

3
Wave/wwwroot/css/main.css
View file

@ -24,4 +24,7 @@ @layer base {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@apply font-heading; @apply font-heading;
} }
hyphens-auto {
hyphenate-limit-chars: 5 3;
}
} }

2
Wave/wwwroot/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long