Density Toggle Component

Customization Theme component

AI-generated summary

The Density Toggle Component allows users to adjust the viewing density of a Discourse forum, offering default, cozy, and compact options. jordan.vidrine introduced the component, which includes a theme component installation guide and a beginner’s guide to Discourse Themes. Arkshine reported issues with the menu not appearing on iPadOS and mobile view, suggesting a z-index problem. They also noted that the current density value isn’t selected by default in preferences and mentioned the absence of a font size interface. Canapin highlighted several UX issues in compact mode, including avatar flair size, overlapping buttons, and alignment problems. jordan.vidrine confirmed that font size changes are planned but not yet implemented. tvavrda reported an installation button issue, which jordan.vidrine fixed. tvavrda also noted compatibility issues with the Enhanced view. Canapin and jordan.vidrine discussed whether compact mode should alter font size. twofoursixeight observed inconsistent gaps in cozy mode. patrickemin inquired about the component’s visibility on mobile, to which jordan.vidrine explained it’s hidden to minimize mobile use but accessible in user preferences.

1
:information_source: Summary Change your viewing density
:hammer_and_wrench: Repository GitHub - discourse/density-toggle: This theme component allows users to set the density of their view of a Discourse forum. It includes default, cozy, and compact. · GitHub
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

This theme component allows users to set the density of their view of a Discourse forum. It includes default, cozy, and compact.

17 Likes
2

Awesome work, as usual, Jordan!

I noticed on iPadOS 18.1.1 that the menu doesn’t appear when clicking on the button in the sidebar. I do see the button focused, but nothing pops up. If I switch to desktop mode, it works.

EDIT: Actually, as long you are in mobile view.

image
image316×200 7.91 KB

It seems to be z-index issue:

The image displays a developer tool's interface with HTML elements, including a CSS block containing a class named "data-placeholder" with an attribute of "top," highlighted within a structure of other elements. (Captioned by AI)
The image displays a developer tool's interface with HTML elements, including a CSS block containing a class named "data-placeholder" with an attribute of "top," highlighted within a structure of other elements. (Captioned by AI)543×348 20.1 KB

The image shows a screenshot of a web developer's interface with a partially collapsed code editor displaying expanded CSS styles, including properties for max width and stacking context changes. (Captioned by AI)
The image shows a screenshot of a web developer's interface with a partially collapsed code editor displaying expanded CSS styles, including properties for max width and stacking context changes. (Captioned by AI)626×451 30.7 KB

Another minor UX issue: The current density value is not selected by default the first time you visit the preferences. (On a side note, the labels don’t seem localized.)
Edit: I think it’s more related to the value that has not yet been saved to the browser storage.

image
image215×119 2.74 KB

I can see in the code that it’s ready to change the font, but I don’t see any interface for it. I assume this will be implemented later?

6 Likes
3

A few remarks when using compact:

Avatar’s flair keeps the regular size, which looks weird, and they overlap posts’ content.

image
image287×135 11.7 KB

Suggested and Related buttons at the end of a topic overlap the topics list below.

The image shows a notification screen indicating there are 112 unread topics and 41 new topics in a forum or messaging platform, along with a "Reply" button and a list of topics including a "Share Link Shortener" message. (Captioned by AI)
The image shows a notification screen indicating there are 112 unread topics and 41 new topics in a forum or messaging platform, along with a "Reply" button and a list of topics including a "Share Link Shortener" message. (Captioned by AI)601×379 34.3 KB

User preferences have a font size setting.
I don’t think the compact view should alter the global font size at all. They should remain separate settings.

The topic map container doesn’t use 100% of the width. It should normally reach the right side.

The image depicts an error message in a forum post about a plugin issue with "div-topic-map--bottom," where clicking on a topic fails to update the profile status. (Captioned by AI)
The image depicts an error message in a forum post about a plugin issue with "div-topic-map--bottom," where clicking on a topic fails to update the profile status. (Captioned by AI)841×465 45.3 KB

Same with the footer buttons.

The image shows a forum post explaining a discrepancy in user online status on Who's Online, mentioning a setting of 5 minutes and an error with sidekiq not running, along with comments and interaction options. (Captioned by AI)
The image shows a forum post explaining a discrepancy in user online status on Who's Online, mentioning a setting of 5 minutes and an error with sidekiq not running, along with comments and interaction options. (Captioned by AI)847×353 49 KB

In the regular layout, .topic-meta-data, which contains the date, has a right padding that aligns the date with reply buttons:

image
image183×320 3.54 KB

This is not the case with the compact layout:

image
image154×201 1.77 KB

The absence of the horizontal line that separates posts in the regular layout makes the post list right side look weird. The dates and reply buttons are too close to each other. Each button and the date below look like they’re parts of the same post, but they actually belong to different posts.

A screenshot shows a Discord chat discussion, with users asking for assistance in customizing a plugin to display visitor statistics in the last 5 or 10 minutes using specific code options. (Captioned by AI)
A screenshot shows a Discord chat discussion, with users asking for assistance in customizing a plugin to display visitor statistics in the last 5 or 10 minutes using specific code options. (Captioned by AI)926×335 31.8 KB

3 Likes
4

Yes, it’s all written and works properly, but I didnt want to introduce it just yet.

thanks for your other reports. I will look into them :smile:

4 Likes
5

The Install this theme component button here is not configured properly as it results in this:

The image is a screenshot of an installation confirmation dialog box for the "Discourse Density Toggle" from a GitHub repository, asking the user if they are sure they want to install it. (Captioned by AI)
The image is a screenshot of an installation confirmation dialog box for the "Discourse Density Toggle" from a GitHub repository, asking the user if they are sure they want to install it. (Captioned by AI)1038×544 30.6 KB

… and it fails with this message

An error occurred: Error cloning git repository, access is denied or repository is not found.

It expects only the URL (without the markdown part)

3 Likes
6

Thanks for reporting, this is fixed.

2 Likes
7

Hi again. Just tried the compact view together with Enhanced (AI summaries) view selected. The result is not likable. I guess the combination doesn’t make much sense but it’s possible to select it.

The screenshot shows the Discord website showing example pages related to discussing various technical issues and job openings in the platform's development. (Captioned by AI)
The screenshot shows the Discord website showing example pages related to discussing various technical issues and job openings in the platform's development. (Captioned by AI)2272×1372 339 KB

2 Likes
8

A small observation. In compact mode if there is a flair, it goes over the post’s text.

The image shows a social media post by Tobias Eien, reading "Looks like @Laptechinfo solve" on a dark background. (Captioned by AI)
The image shows a social media post by Tobias Eien, reading "Looks like @Laptechinfo solve" on a dark background. (Captioned by AI)516×252 26.8 KB

3 Likes
9

Thanks for the reports Thomas, I will take a look.

1 Like
10

It’s the first thing I mentioned in my reply :smile:

I’d be interested in hearing opinions about whether a compact view should alter the font size when a dedicated setting is already available.

It’s not a big deal obviousy as I won’t jump from a density setting to another twice a day… Being curious more than anything here.

I had a quick look at a few software that offers various density modes. I compact mode,

  • Discord and Google Gmail/Calendar don’t change the font size.
    I believe Slack doesn’t too (I didn’t try, just looked at screenshots)

  • Microsoft Outlook reduces the font size from 14px to 12px.

3 Likes
11

It’s a good question Canapin.

While creating the component I tried a couple different scenarios and decreasing the font size always felt like the best option.

3 Likes
12

IMG_0835
IMG_08351810×336 40.4 KB

Cozy

I’m not sure this is something to mention here but the gap between topics looks a little inconsistent
with the newline in the cozy density mode compared to the normal
density and the compact density.

Other density settings in the discourse stockpile

IMG_0834
IMG_08341763×334 45.8 KB

default
IMG_0836
IMG_08361808×139 28.1 KB

compact

13

Hi, I activated that TC for my FOUNDATION theme, I can see that TC settings on my PC (lower left side menu) but when using my mobile with that theme, that TC setting is not visible, any idea ? Thanks.

update: just found it in my preferences… (but not visible in the lower left side menu?)

2 Likes
14

Its hidden on mobile as to minimize its use on mobile. The settings will exist in user preferences there however if you really want the access.

3 Likes