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

Improved Article Card and Article Card List

Browse source
This commit is contained in:
Mia Rose Winter 2024-03-25 13:12:52 +01:00
parent 8ff3ff922c
commit adf87ddc16
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
3 changed files with 67 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
Wave/Components/ArticleCard.razor
View file

@ -1,14 +1,43 @@
@using Wave.Data @using Wave.Data
@using Humanizer @using Humanizer
<article class="card card-side card-compact bg-base-200 text-base-content"> @if (HasArticleLink) {
<figure class="shrink-0 max-md:!hidden sm:max-w-40"> <ArticleLink Article="Article">
<ArticleLink Article="Article"> <article class="card card-side card-compact bg-base-200 text-base-content">
<img src="/api/user/pfp/@Article.Author.Id" alt="" width="800"> <figure class="shrink-0 max-md:!hidden sm:max-w-40">
</ArticleLink> <img src="/api/user/pfp/@Article.Author.Id?size=600" alt="" width="600">
</figure> </figure>
<div class="card-body"> <div class="card-body">
<ArticleLink Article="Article"> <h2 class="card-title line-clamp-1">@Article.Title</h2>
<small>
@Article.PublishDate.ToString("d")
@if (Article.Status is not ArticleStatus.Published) {
<span class="badge badge-sm badge-warning ml-2">@Article.Status.Humanize()</span>
}
</small>
<p class="@(Article.Categories.Count > 0 ? "line-clamp-2" : "line-clamp-4")">
@Article.BodyPlain[..Math.Min(1000, Article.BodyPlain.Length)]
</p>
@if (Action is not null) {
<div class="card-actions w-full">
@Action(Article)
</div>
} else if (Article.Categories.Count > 0) {
<div class="card-actions flex flex-wrap gap-2">
@foreach (var category in Article.Categories.OrderBy(c => c.Color)) {
<CategoryBadgeComponent HasCategoryLink="false" Category="category" />
}
</div>
}
</div>
</article>
</ArticleLink>
} else {
<article class="card card-side card-compact bg-base-200 text-base-content">
<figure class="shrink-0 max-md:!hidden sm:max-w-40">
<img src="/api/user/pfp/@Article.Author.Id?size=600" alt="" width="600">
</figure>
<div class="card-body">
<h2 class="card-title line-clamp-1">@Article.Title</h2> <h2 class="card-title line-clamp-1">@Article.Title</h2>
<small> <small>
@Article.PublishDate.ToString("d") @Article.PublishDate.ToString("d")
@ -19,24 +48,26 @@
<p class="@(Article.Categories.Count > 0 ? "line-clamp-2" : "line-clamp-4")"> <p class="@(Article.Categories.Count > 0 ? "line-clamp-2" : "line-clamp-4")">
@Article.BodyPlain[..Math.Min(1000, Article.BodyPlain.Length)] @Article.BodyPlain[..Math.Min(1000, Article.BodyPlain.Length)]
</p> </p>
</ArticleLink> @if (Action is not null) {
@if (Action is not null) { <div class="card-actions w-full">
<div class="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="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 Category="category" /> }
} </div>
</div> }
} </div>
</div> </article>
</article> }
@code { @code {
[Parameter] [Parameter]
public required Article Article { get; set; } public required Article Article { get; set; }
[Parameter] [Parameter]
public RenderFragment<Article>? Action { get; set; } public RenderFragment<Article>? Action { get; set; }
[Parameter]
public bool HasArticleLink { get; set; } = true;
} }

4
Wave/Components/ArticleCardList.razor
View file

@ -5,7 +5,7 @@
} else { } else {
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
@foreach (var article in Articles.OrderByDescending(a => a.PublishDate)) { @foreach (var article in Articles.OrderByDescending(a => a.PublishDate)) {
<ArticleCard Article="article" Action="Action" /> <ArticleCard Article="article" Action="Action" HasArticleLink="HasArticleLink" />
} }
</div> </div>
} }
@ -15,4 +15,6 @@
public required IList<Article> Articles { get; set; } = []; public required IList<Article> Articles { get; set; } = [];
[Parameter] [Parameter]
public RenderFragment<Article>? Action { get; set; } public RenderFragment<Article>? Action { get; set; }
[Parameter]
public bool HasArticleLink { get; set; } = true;
} }

15
Wave/Components/CategoryBadgeComponent.razor
View file

@ -3,14 +3,21 @@
@using System.Net @using System.Net
<!-- badge badge-info badge-warning badge-error badge-primary badge-secondary badge-neutral badge-accent --> <!-- badge badge-info badge-warning badge-error badge-primary badge-secondary badge-neutral badge-accent -->
<a href="/category/@WebUtility.UrlEncode(Category.Name)" class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(Category.Color)" @attributes="AdditionalAttributes"> @if (HasCategoryLink) {
@Category.Name <a href="/category/@WebUtility.UrlEncode(Category.Name)" class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(Category.Color)" @attributes="AdditionalAttributes">
</a> @Category.Name
</a>
} else {
<span class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(Category.Color)" @attributes="AdditionalAttributes">
@Category.Name
</span>
}
@code { @code {
[Parameter] [Parameter]
public required Category Category { get; set; } public required Category Category { get; set; }
[Parameter]
public bool HasCategoryLink { get; set; } = true;
[Parameter(CaptureUnmatchedValues = true)] [Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object>? AdditionalAttributes { get; set; } public Dictionary<string, object>? AdditionalAttributes { get; set; }
} }