Hide or downsize icons

nukeador · 2022-06-27T10:00:24.891Z

Cartographer10:

Some feedback from fellow Dutch mappers (including me). Several Dutch mappers find the user interface way to large and to busy. The old forum looked more simplistic (of course, it is a new system so you can’t fully compare but still). On discourse, the start page icons are way to large and to much information is provided. On the contrary, the links to the sub forums for all the countries are really small.

This makes the looks of Discourse really unpleasent.

Thanks for the feedback, there are still just a few communities created, but as soon as there are more coming, a proper analysis should be done to see how to accommodate everyone’s experience.

In my opinion this should be done from a user experience lens on what issues there are with the current UI, why and what do users want to accomplish in a better way.

Cartographer10:

Edit: the same applies to the sub communities. That logo is way to large. 2 or 3 post can be placed in the same space.

This can be easily disabled (category logo) if the Dutch community prefers, let’s comment any Dutch-category specific changes on the request topic.

Thanks!

Cartographer10 · 2022-06-27T17:13:04.265Z

nukeador:

Thanks for the feedback, there are still just a few communities created, but as soon as there are more coming, a proper analysis should be done to see how to accommodate everyone’s experience.

In my opinion this should be done from a user experience lens on what issues there are with the current UI, why and what do users want to accomplish in a better way.

Thanks for the reply. I indeed saw that but I just wanted to provide this feedback already on behalf of some Dutch mappers.

SimonPoole · 2022-09-28T10:42:20.551Z

This obviously needs a bump.

The “rather large” icons need to be max. a quarter of their current size. As a rule it shouldn’t be necessary to scroll to see the top level categories.

nukeador · 2022-09-28T10:56:28.123Z

A quick easy fix would be to set the category logo images to a 60% width:

.category-logo.aspect-image img {
  width: 60%;
}

Note that no css changes have been made yet because the technical time has been invested in other fronts. @Firefishy might be able to comment on his though around css improvements to the forum, since he is the one maintaining the whole technical aspects of the site.

Cartographer10 · 2022-09-28T17:58:30.681Z

What about disabling the icons entirely? Take a look at this example: https://foodshift.se

I really like this design. A nice, short description at the top. Also the colors on the front page are much more balanced. The front page is not so busy as ours.

Especially the community part has to much color.

image1167×432 75.8 KB

Map_HeRo · 2022-09-28T18:15:43.637Z

Cartographer10:

What about disabling the icons entirely? Take a look at this example: https://foodshift.se

I really like this design.

… Youah, much better than the oversized Icons here …

mmd · 2022-09-28T18:18:42.134Z

Map_HeRo:

much better than the oversized Icons here …

Agreed, I even added a uBlock Origin filter rule now to disable them:

##.category-logo

Result:

Getting rid of suggested topics was next …

##.suggested-topics

Map_HeRo · 2022-09-28T18:51:03.744Z

well done … so I would just have to install uBlock Origin to make use of this …

SafetyIng · 2022-09-28T19:00:47.368Z

Cartographer10:

What about disabling the icons entirely?

Why not create two themes?
One Theme with the icons (a little bit smaller please) and one without the icons. Every User could change it by him or herself.

Cartographer10 · 2022-09-28T19:04:13.995Z

That is of couse also fine if that is possible. I can imagine though that in terms of maintainability 1 theme is preferred.

nukeador · 2022-10-05T18:12:47.444Z

We plan to discuss icons downsizing this week at the @forums-governance and I’ll come back with a decision.

Thanks everyone!

nukeador · 2022-10-06T15:42:30.160Z

This css change has been applied to reduce the size category logos to 60%.

SomeoneElse · 2023-01-26T13:32:27.829Z

nukeador:

This css change has been applied

This doesn’t fix the problem reported here. The site still looks rubbish compared to the nice clean layout of the old forum - there are massive pictures filling the screen that add no value, it looks like a four-year-old has gone mad with some crayons. Why can’t we just get rid of those altogether?

Map_HeRo · 2023-01-26T20:52:07.527Z

I am afraid I have to agree to that. Looking at the relation between useless icon and valuable information here

Screenshot_Icon_Cat_Com

one must admit that this is quite ridiculous indeed.

RicoElectrico · 2023-03-15T10:05:18.778Z

We only display 3 latest topics anyway, so there’s a lot of white space due to the icon size. Compare these two below:

image1344×481 47.9 KB

Matija_Nalis · 2023-03-16T00:23:01.148Z

nukeador:

This css change has been applied to reduce the size category logos to 60%.

Ummmm, are you sure it has been applied? Or has it been reverted in the meantime? Because I’m not seeing it.

This is what I see currently (even after numerous force-refreshes):

current1920×888 171 KB

And this is what I think I’m supposed to be seeing (if this CSS change was really implemented):

nukeador:

.category-logo.aspect-image img {
  width: 60%;
}

601920×894 165 KB

(Note that I’m changing max-width in Developer Tools, as width seems to be auto-calculated to preserve aspect ratio - at current version of the community.osm.org website?)

nukeador · 2023-03-16T11:39:19.042Z

The change was applied and reverted, because new in new discourse versions it was messing with some browsers.

If someone has the time to come up with a css that works in desktop and mobile, happy to apply.

Map_HeRo · 2023-03-16T18:24:53.564Z

Thanks for your explanation. It would have been great to get this information immediately after the revert so we could have used the time to come up with the necessary CSS …

nukeador · 2023-03-16T18:27:58.988Z

At the time no css seemed needed because mobile view was already re-sizing the icons, please see:

Header images broken in Safari 🐞 This forum issues and requests

I’ve removed the custom css for the images, since it seems now Discourse 3.0 theme decreases the category logos on mobile views, so this change in now redundant. It should fix the issue reported in this topic.

Matija_Nalis · 2023-03-31T13:36:56.982Z

I’m not sure how big it was originally on mobile, but both on desktop (see Hide or downsize icons - #18 by Matija_Nalis above) and on mobile (see below) it still looks excessively big to me eating into much of screen estate for no gain.

small_Screenshot_20230331_152433_org.gnu.icecat270×585 53.8 KB

As noted in post above, it should be at most max-width: 60% (or even better max-width: 50%).

i.e. change that max-width: 100%; to max-width: 50%; in CSS:

.category-logo.aspect-image img {
	width: calc(var(--max-height) * var(--aspect-ratio));
	max-width: 50%;
	height: inherit;
	max-height: var(--max-height);
}

Since it should now correctly calculates aspect ratio (see width: .... in CSS above) which was problem in initial implementation. Could we have that?