Improved Article Cards
This commit is contained in:
parent
a056039654
commit
5e8e521028
|
@ -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" />
|
||||||
}
|
}
|
||||||
|
|
2
Wave/wwwroot/css/main.min.css
vendored
2
Wave/wwwroot/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue