Categories: Smartphone View Component

It would be useful to implement a theme component (categories: smartphone view) that allows displaying categories as smartphone icons, as shown in the example image below. What do you think?

2 Likes

Hi Cristian, welcome back :v:

There wouldn’t be much space for titles and categories’ descriptions which are enabled by default for anonymous and trust level 0 users. A mockup using a “real world” example would be great to see how it would work.

That’s not the same but I’ve modified the mobile category page layout on my own forum from:

to:

But I think it could be improved even more with some grid view as you suggest and/or removing the three topics for each category.

OP’s mockup has same issues than smart phones have:

  • how to identify and remember what is what, and
  • when many is too many.

Hi :raising_hand_man:t3: It would be sufficient to allow this style (image below) in the smartphone view, with the possibility to disable the category description, the list of subcategories, and the list of latest posts. Then make the list of categories available just like the list of apps on our smartphone (Grid version - squares with rounded corners.).

Another useful feature could be “Custom category name in the smartphone view”, so as to shorten the name of a category, from Entertainment to ENT, for example.

This is an example I found on a forum but in a list style.

4 Likes

Why would that work? No one knows what ENT means.

I can see contexts in which this would work — fans of some particular game or niche interest often have their own jargon and even iconography. Would it be the most discoverable and clear to new users? Probably not — but that’s not always a key value.

1 Like

Can you share the access link so I can refer them. Or you can check out my site at https://businesslab.vn I’m happy to share what I know and have done.
also you can refer to the theme page category page ☁ Discourse Air Theme, I found it similar to what you are looking for.

1 Like

I’m simply talking about the navigability of the categories page. Instead of scrolling down to discover the categories, it would be useful to see them all on one page, as described in my first post. It’s inevitable that in future versions of Discourse, this feature will be implemented, so why not anticipate it?

Yes, as in the last image I posted in the first post, it definitely partially solves the issue.
The theme component is GitHub - discourse/discourse-minimal-category-boxes.

I’m not sure I understand this argument. Why is it inevitable? (And if it is, why rush?)

1 Like

We kind of have that already with the theme grid layout of thumbnails.

So yes is doable of sorts
 Could even have a description pop up maybe if used an idea of short press/long press or single/double tap.

@Canapin

How useable ppl might find it may delend on application. Tbh I find the theme topic list annoying on mobile as I find it harder to visually find things.

But of the Op has a more Simplified Category names Icons with Text under them might do Alrighht.

How many Categories are you talking? See my post above and checkout the theme link for topic layout with rhumbnails.

Indeed. lol

I can see it being a inevitable that someone will likely create a theme-component or possibly a plugin depending what alm is needed t9 acheive a desired effect.

We’re aware of that and discussing it :+1:

I was curious, so I made these tweaks to make something like @derak would like:

.category-boxes, .category-boxes-with-topics {
    gap: 1em;
}
.mobile-view .category-boxes .category-box, .mobile-view .category-boxes-with-topics .category-box {
    width: 100%;
    flex: 0 0 calc(50% - 0.5em);
}
.category-boxes .description {
    display: none;
}
.category-boxes .category-box .category-box-inner .category-details .category-box-heading h3 {
    text-align: center !important;
}
.category-boxes .category-logo .category-notifications-button, .category-boxes-with-topics .category-logo .category-notifications-button {
    visibility: hidden;
}
.category-boxes .category-box {
     box-shadow: 0px 0px 8px rgba(0,0,0,.2);
}
4 Likes

they look so minimalist, i will consider this version for another project ^^

2 Likes