Category Card (beta version)

[brazzerstop]

Hey guys,

I'm working on a new widget "Category Card", before release this I want to show you preview of this widget and get you're feedback about UX/usability.

You can test it without any modification, all what you need a copy this code and paste in settings /admin/extend/widgets select categories.tpl and choice a HTML widget.

<div class="row p-1">
{{{ each categories}}}
 
<div class="col-lg-4 pb-2 align-items-stretch p-2">
<div class="card shadow-sm border-light">

<div class="card-header col-12 border-light text-sm text-truncate" style="background-color: {./bgColor}; color: {./color};">
{{{ if !./link }}}
<i class="fa fa-fw {./icon}"></i> <a href="{relative_path}/category/{categories.slug}" style="color: {./color};" class="fw-semibold text-decoration-none">{./name}</a>
{{{ else }}}
<a href="{./link}" class="fw-semibold text-decoration-none">{./name}</a>
{{{ end }}}
<span class="float-end text-sm ms-1 human-readable-number">
<i class="fa-solid fa-reply fa-sm"></i> {./totalPostCount}</span>
<span class="float-end text-sm me-1 human-readable-number"><i class="fa-solid fa-comment fa-sm"></i> {./totalTopicCount}</span>
</div>

<div class="card-body text-sm">
{{{ each ./posts }}}
{{{ if @first }}}
<div class="card-text col-12 text-truncate">
<button class="float-end border-0 p-0 bg-transparent position-relative" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{./cid}" aria-expanded="false" aria-controls="collapse"><i class="fa-solid fa-plus-circle fa-sm"></i></button>
<a class="permalink fw-semibold text-dark text-decoration-none" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}">{./topic.title}</a>
<div class="collapse text-muted text-xs text-wrap mt-2 bg-light border rounded overflow-auto" id="collapse-{./cid}" style="max-height: 100px;"><div class="p-2">{./content}</div></div>
</div>
</div>

<div class="card-footer border-light text-xs bg-transparent">
<a class="text-muted text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true, "avatar-tooltip rounded-circle")} {./user.username} </a>
<span class="timeago text-muted float-end" title="{../timestampISO}"></span>
{{{ end }}}
{{{ end }}}

{{{ if !./posts.length }}}
<div class="text-muted text-xs">[[category:no_new_posts]]</div>
{{{ end }}}
</div>

</div>
</div>

{{{ end }}}
</div>

[brazzerstop]

The concept for a categories page based on category card, what do you think?

https://imgur.com/z1e18sq

[julian]

The cards concept is definitely neat!

We ended up choosing a more traditional layout for Persona (and now for Harmony) because that is the user expectation, but many years ago we did do a cards-based approach in our Lavender theme

Nice to see it making a comeback!

[brazzerstop]

@julian said in Category Card (beta version):

Nice to see it making a comeback!

Everything new is well-forgotten old