welpo/tabi

Compact tags option

Closed this issue · 5 comments

Feature Request

Summary

If you have a lot of tags, the tags page becomes very long and annoying to navigate.
I note that this project takes accessibility seriously, so I propose an opt-in config option to produce a shorter tags page.

Motivation

Sufficiently populated or larger websites would benefit from the increased usability.

Detailed Description

I think it's a change to templates/tag/list.html, I liked the style of using superscript for the page count.
I tried inlining a <style> tag but it needs to be in the head and if I put it in partials/header.html it'll apply to every page.
You can see it at https://github.com/arichtman/tabi/tree/compact-tags

Additional Context

https://www.richtman.au/tags/

welpo commented

Hi!

Thanks for this feature request and thanks for using tabi.

Lately I've been thinking about this exact issue. My idea was to, based on the number of tags, display them in a single column (current case) or in two.

In this second case, perhaps we could reduce the spacing between tags on mobile, too.

I'll check out your branch and think about it some more.

welpo commented

Here's what it looks like in two columns:

two columns

It even looks good with three columns:

three columns

I checked out your branch, and I like it too; it looks cleaner. In regards to accessibility, we can use the aria-label attribute so that screen readers say "$tag X post[s]" instead of "$tag X".


I think the best design is a combination of superscript + columns:

2 columns superscript

With 3 columns:
3 columns superscript

Thoughts?

That looks way nice! As long as it's still accessible that's amazing!

welpo commented

I've implemented the superscript option (slightly modified) in #232.

Working on the columns now.

welpo commented

Done in #233!

Let me know if you encounter any issues :)