Improved ArticleView layout

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

View file

@ -3,46 +3,45 @@
@inject IStringLocalizer<Pages.ArticleView> Localizer
<h1 class="text-3xl lg:text-5xl font-light text-primary">
@Article.Title
</h1>
<p class="mb-6">
<small class="text-sm text-secondary">
<time datetime="@Article.PublishDate.ToString("u")"
title="@Article.PublishDate.ToString("g")">
@Article.PublishDate.Humanize()
</time>
@if (Article.LastModified is not null && Article.LastModified > Article.PublishDate) {
<time datetime="@Article.LastModified.Value.ToString("u")"
title="@Article.LastModified.Value.ToString("g")">
&ensp;(@Localizer["ModifiedOn"] @Article.LastModified.Humanize())
</time>
}
@if (Article.Status < ArticleStatus.Published) {
<span class="badge badge-sm badge-outline badge-warning ml-2">
@Article.Status.Humanize()
</span>
}
</small>
</p>
<hr class="my-3" />
<article class="prose prose-neutral max-w-none mb-6">
@Content
<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
</h1>
<p>
<small class="text-sm">
<time datetime="@Article.PublishDate.ToString("u")"
title="@Article.PublishDate.ToString("g")">
@Article.PublishDate.Humanize()
</time>
@if (Article.LastModified is not null && Article.LastModified > Article.PublishDate) {
<time datetime="@Article.LastModified.Value.ToString("u")"
title="@Article.LastModified.Value.ToString("g")">
&ensp;(@Localizer["ModifiedOn"] @Article.LastModified.Humanize())
</time>
}
@if (Article.Status < ArticleStatus.Published) {
<span class="badge badge-sm badge-outline badge-warning ml-2">
@Article.Status.Humanize()
</span>
}
</small>
</p>
</header>
<div class="prose prose-neutral max-w-none hyphens-auto text-justify">
@Content
</div>
</article>
<hr class="my-3" />
@if (!string.IsNullOrWhiteSpace(Article.Author.AboutTheAuthor)) {
<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">
<figure class="sm:max-w-32">
<figure class="sm:max-w-40">
<img src="/api/user/pfp/@Article.Author.Id" alt="" width="800">
</figure>
<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>
@Article.Author.AboutTheAuthor
</p>

View file

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

File diff suppressed because one or more lines are too long