SolarNetwork/Swarm
2
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Optimize hosted post details page

Browse Source
This commit is contained in:
LittleSheep
2025-11-22 13:17:34 +08:00
parent 0b0598712e
commit bd1715c9a3
1 changed files with 82 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
DysonNetwork.Zone/Pages/Posts/Details.cshtml
View File

@@ -2,61 +2,94 @@
@model DysonNetwork.Zone.Pages.Posts.DetailsModel
@{
Layout = "_LayoutContained";
var defaultAvatar = "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp";
const string defaultAvatar = "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp";
}
<div class="container mx-auto px-8 pb-8">
<div class="container max-w-4xl mx-auto px-8 py-8">
@if (Model.Post != null)
{
<div class="card bg-base-100 border">
<div class="card-body">
<div class="flex items-center gap-4 mb-4">
<div class="avatar">
<div class="w-12 h-12 rounded-full">
<img src="@(Model.Post.Publisher?.Picture != null ? $"/files/{Model.Post.Publisher.Picture.Id}" : defaultAvatar)" />
<section class="mb-8 mt-2 px-5">
<h1 class="text-3xl font-bold">
@(Model.Post.Title ?? "Post Details")
</h1>
@if (!string.IsNullOrWhiteSpace(Model.Post.Description))
{
<p>@Model.Post.Description</p>
}
</section>
<div class="w-full flex flex-col gap-5">
<div class="card bg-base-200 shadow-md">
<div class="card-body flex flex-col gap-5">
<div class="prose max-w-none">
@if (!string.IsNullOrWhiteSpace(Model.Post.Description))
{
<p>@Model.Post.Description</p>
}
@Model.Post.Content
</div>
@if (Model.Post.Attachments.Any())
{
<div class="flex flex-col gap-4">
@foreach (var attachment in Model.Post.Attachments)
{
<div>
@if (attachment.MimeType!.StartsWith("image"))
{
<figure>
<img src="/drive/files/@attachment.Id" alt="@attachment.Name"
class="max-w-full h-auto rounded-lg"/>
</figure>
}
else if (attachment.MimeType!.StartsWith("video"))
{
<video controls src="/drive/files/@attachment.Id"
class="max-w-full h-auto rounded-lg"></video>
}
else if (attachment.MimeType!.StartsWith("audio"))
{
<audio controls src="/drive/files/@attachment.Id"
class="max-w-full h-auto rounded-lg"></audio>
}
else
{
<a href="/drive/files/@attachment.Id" target="_blank"
class="text-blue-500 hover:underline">@attachment.Name</a>
}
</div>
}
</div>
}
@if (Model.Post.Categories.Any() || (Model.Post.Tags != null && Model.Post.Tags.Any()))
{
<div>
@foreach (var category in Model.Post.Categories)
{
<span class="badge badge-primary">
<span class="mdi mdi-shape"></span>
@(!string.IsNullOrEmpty(category.Name) ? category.Name : category.Slug)
</span>
}
@if (Model.Post.Tags != null)
{
@foreach (var tag in Model.Post.Tags)
{
<span class="badge badge-info">
<span class="mdi mdi-tag"></span>
@(!string.IsNullOrEmpty(tag.Name) ? tag.Name : tag.Slug)
</span>
}
}
</div>
}
<div class="card-actions justify-end items-center">
<div class="text-sm text-base-content/60">
Posted on @Model.Post.CreatedAt.ToDateTimeOffset().ToString("yyyy-MM-dd")
</div>
</div>
<div>
<div class="font-bold">@Model.Post.Publisher?.Name</div>
<div class="text-sm text-base-content/60">@Model.Post.Publisher?.Nick</div>
</div>
</div>
<h1 class="text-3xl font-bold mb-4">@Model.Post.Title</h1>
@if (Model.Post.Attachments.Any())
{
<div class="mt-4">
@foreach (var attachment in Model.Post.Attachments)
{
if (attachment.MimeType != null && attachment.MimeType.StartsWith("image"))
{
<img src="/files/@attachment.Id" alt="@attachment.Name" class="max-w-full h-auto rounded-lg mb-4"/>
}
else
{
<a href="/files/@attachment.Id" target="_blank" class="text-blue-500 hover:underline">@attachment.Name</a>
}
}
</div>
}
<div class="prose max-w-none">
@Model.Post.Content
</div>
@if (Model.Post.Categories.Any())
{
<div class="mt-4">
@foreach (var category in Model.Post.Categories)
{
<span class="badge badge-outline">@(!string.IsNullOrEmpty(category.Name) ? category.Name : category.Slug)</span>
}
</div>
}
<div class="text-sm text-base-content/60 mt-8">
Posted on @Model.Post.CreatedAt.ToDateTimeOffset().ToString("yyyy-MM-dd")
</div>
</div>
</div>