# Categories: Smartphone View Component

**URL:** https://meta.discourse.org/t/categories-smartphone-view-component/258590
**Category:** Feature
**Created:** [March 18, 2023, 11:46am UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590 "2023-03-18T11:46:59Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![derak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/derak/32/214158_2.png) [@derak](https://meta.discourse.org/u/derak)
#### Post date: [March 18, 2023, 11:47am UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/1 "2023-03-18T11:47:00Z")

</div>

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?

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/3/5/135ef1e39b7ff79ca1e3d958630d818c57e19ec8.jpeg)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [March 18, 2023, 12:42pm UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/2 "2023-03-18T12:42:30Z")

</div>

Hi Cristian, welcome back ✌

> [@derak](#):
>
> What do you think?

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:

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/6/4/064e433665de3e23a6d3fb26b0661384a0c86c0a.png) ![image](https://global.discourse-cdn.com/meta/original/4X/d/1/7/d17928d743a62610fd6538bd4ab4eb0df2d23344.png)

to:

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/4/c/e4cae209594ec45d798bd13988965202661c95c5.png) ![image](https://global.discourse-cdn.com/meta/original/4X/1/3/9/13902d5a9d8efd4f28c11763d6aa7d69d4739933.png)

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.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [March 18, 2023, 1:21pm UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/3 "2023-03-18T13:21:09Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![derak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/derak/32/214158_2.png) [@derak](https://meta.discourse.org/u/derak)
#### Post date: [March 18, 2023, 1:46pm UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/4 "2023-03-18T13:46:32Z")

</div>

Hi 🙋🏼‍♂️ 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.

 ![Immagine 2023-03-18 144049](https://global.discourse-cdn.com/meta/original/4X/2/e/1/2e1075458d757e1d1894a4d4012d1a65cb6963c4.jpeg)

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

 ![IMG_4605 (1)](https://global.discourse-cdn.com/meta/original/4X/c/6/b/c6b6d7ebeb1498921ce9f814b57cbb01d56d71eb.jpeg)

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [March 18, 2023, 2:50pm UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/5 "2023-03-18T14:50:24Z")

</div>

> [@derak](#):
>
> from Entertainment to ENT, for exampl

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

---

<div class="post-metadata">

### Author: ![mattdm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mattdm/32/216484_2.png) [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [March 18, 2023, 3:05pm UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/6 "2023-03-18T15:05:21Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![hoangphuctran93](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hoangphuctran93/32/290976_2.png) [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)
#### Post date: [March 18, 2023, 3:34pm UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/7 "2023-03-18T15:34:43Z")

</div>

Can you share the access link so I can refer them. Or you can check out my site at [https://businesslab.vn](https://businesslab.vn) I’m happy to share what I know and have done.  
also you can refer to the theme page category page [Air Theme](https://meta.discourse.org/t/discourse-air-theme/197703), I found it similar to what you are looking for.

---

<div class="post-metadata">

### Author: ![derak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/derak/32/214158_2.png) [@derak](https://meta.discourse.org/u/derak)
#### Post date: [March 18, 2023, 3:55pm UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/8 "2023-03-18T15:55:10Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![derak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/derak/32/214158_2.png) [@derak](https://meta.discourse.org/u/derak)
#### Post date: [March 18, 2023, 4:08pm UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/9 "2023-03-18T16:08:42Z")

</div>

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 · GitHub](https://github.com/jordanvidrine/discourse-category-group-boxes.git).

---

<div class="post-metadata">

### Author: ![mattdm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mattdm/32/216484_2.png) [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [March 19, 2023, 2:26am UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/10 "2023-03-19T02:26:19Z")

</div>

> [@derak](#):
>
> It’s inevitable that in future versions of Discourse, this feature will be implemented, so why not anticipate it?

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

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 20, 2023, 1:51am UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/13 "2023-03-20T01:51:29Z")

</div>

> [@Jagster](#):
>
> OP’s mockup has same issues than smart phones have:
> 
> - how to identify and remember what is what, and
> - when many is too many

We kind of have that already with the #Customization > 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 #Customization > 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.

> [@derak](#):
>
> 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

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

> [@mattdm](#):
>
> > [@derak](#):
> >
> > It’s inevitable that in future versions of Discourse, this feature will be implemented, so why not anticipate it?
> 
> I’m not sure I understand this argument. Why is it inevitable? (And if it is, why rush?)

Indeed. lol

I can see it being a inevitable that someone will likely create a #Customization > Theme component or possibly a #Customization > Plugin depending what alm is needed t9 acheive a desired effect.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [March 20, 2023, 10:01am UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/14 "2023-03-20T10:01:52Z")

</div>

> [@Heliosurge](#):
>
> Tbh I find the #Customization > Theme topic list annoying on mobile as I find it harder to visually find things.

We’re aware of that and discussing it 👍

> [@hoangphuctran93](#):
>
> Or you can check out my site at [https://businesslab.vn](https://businesslab.vn)

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/6/6/26603a208175e903c25050d63f1a9a789b0e66b0.png)

```css
.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);
}

```

---

<div class="post-metadata">

### Author: ![hoangphuctran93](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hoangphuctran93/32/290976_2.png) [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)
#### Post date: [March 20, 2023, 3:33pm UTC](https://meta.discourse.org/t/categories-smartphone-view-component/258590/15 "2023-03-20T15:33:48Z")

</div>

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