Improved Article Cards

This commit is contained in:
Mia Rose Winter 2024-03-27 10:40:53 +01:00
parent a056039654
commit 5e8e521028
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
2 changed files with 9 additions and 9 deletions

View file

@ -4,7 +4,7 @@
@if (HasArticleLink) { @if (HasArticleLink) {
<ArticleLink Article="Article"> <ArticleLink Article="Article">
<article class="card card-side card-compact bg-base-200 text-base-content"> <article class="card card-side card-compact bg-base-200 text-base-content">
<figure class="shrink-0 max-md:!hidden sm:max-w-40"> <figure class="shrink-0 max-md:!hidden sm:max-w-44">
<img src="/api/user/pfp/@Article.Author.Id?size=600" alt="" width="600"> <img src="/api/user/pfp/@Article.Author.Id?size=600" alt="" width="600">
</figure> </figure>
<div class="card-body"> <div class="card-body">
@ -15,15 +15,15 @@
<span class="badge badge-sm badge-warning ml-2">@Article.Status.Humanize()</span> <span class="badge badge-sm badge-warning ml-2">@Article.Status.Humanize()</span>
} }
</small> </small>
<p class="@(Article.Categories.Count > 0 ? "line-clamp-2" : "line-clamp-4")"> <p class="grow-0 @((Action is not null || Article.Categories.Count > 0) ? "line-clamp-2" : "line-clamp-3")">
@Article.BodyPlain[..Math.Min(1000, Article.BodyPlain.Length)] @Article.BodyPlain[..Math.Min(1000, Article.BodyPlain.Length)]
</p> </p>
@if (Action is not null) { @if (Action is not null) {
<div class="card-actions w-full"> <div class="flex-1 items-end card-actions w-full">
@Action(Article) @Action(Article)
</div> </div>
} else if (Article.Categories.Count > 0) { } else if (Article.Categories.Count > 0) {
<div class="card-actions flex flex-wrap gap-2"> <div class="flex-1 items-end card-actions flex flex-wrap gap-2">
@foreach (var category in Article.Categories.OrderBy(c => c.Color)) { @foreach (var category in Article.Categories.OrderBy(c => c.Color)) {
<CategoryBadgeComponent HasCategoryLink="false" Category="category" /> <CategoryBadgeComponent HasCategoryLink="false" Category="category" />
} }
@ -34,7 +34,7 @@
</ArticleLink> </ArticleLink>
} else { } else {
<article class="card card-side card-compact bg-base-200 text-base-content"> <article class="card card-side card-compact bg-base-200 text-base-content">
<figure class="shrink-0 max-md:!hidden sm:max-w-40"> <figure class="shrink-0 max-md:!hidden sm:max-w-44">
<img src="/api/user/pfp/@Article.Author.Id?size=600" alt="" width="600"> <img src="/api/user/pfp/@Article.Author.Id?size=600" alt="" width="600">
</figure> </figure>
<div class="card-body"> <div class="card-body">
@ -45,15 +45,15 @@
<span class="badge badge-sm badge-warning ml-2">@Article.Status.Humanize()</span> <span class="badge badge-sm badge-warning ml-2">@Article.Status.Humanize()</span>
} }
</small> </small>
<p class="@(Article.Categories.Count > 0 ? "line-clamp-2" : "line-clamp-4")"> <p class="grow-0 @((Action is not null || Article.Categories.Count > 0) ? "line-clamp-2" : "line-clamp-3")">
@Article.BodyPlain[..Math.Min(1000, Article.BodyPlain.Length)] @Article.BodyPlain[..Math.Min(1000, Article.BodyPlain.Length)]
</p> </p>
@if (Action is not null) { @if (Action is not null) {
<div class="card-actions w-full"> <div class="flex-1 items-end card-actions w-full">
@Action(Article) @Action(Article)
</div> </div>
} else if (Article.Categories.Count > 0) { } else if (Article.Categories.Count > 0) {
<div class="card-actions flex flex-wrap gap-2"> <div class="flex-1 items-end card-actions flex flex-wrap gap-2">
@foreach (var category in Article.Categories.OrderBy(c => c.Color)) { @foreach (var category in Article.Categories.OrderBy(c => c.Color)) {
<CategoryBadgeComponent HasCategoryLink="false" Category="category" /> <CategoryBadgeComponent HasCategoryLink="false" Category="category" />
} }

File diff suppressed because one or more lines are too long