Hide or downsize icons

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?

nukeador · 2023-04-03T06:44:44.482Z

Thanks for that, I’ve just applied the css.

Let’s see if people over different browsers are not seeing a weird aspect ratio, looks good on my Firefox.

Matija_Nalis · 2023-04-03T13:51:11.212Z

Thanks @nukeador ! Reduced size seems to work great on desktop for my Firefox, surf and Chromium for me:

Screenshot 2023-04-03 at 14-19-52 OpenStreetMap Community Forum1185×636 89.4 KB

On the mobile, it didn’t seem to have had an effect, which while good (it didn’t break anything!) is also somewhat disappointing - as the problem with oversized icons continues there. I agree with previous comment that since screen estate is premium at mobile, perhaps category icons can be disabled there completely, e.g. via media query like:

@media only screen and (max-width: 767px) {
    .category-logo.aspect-image img { display: none; }
}

small_Screen Shot 2023-04-03 at 14.39.10 vs.

(I’ve also tried just reducing icon size more on mobile, but it just looks ugly and does not save much space, because it is displayed in new line with margins etc. anyway… It might be possible to reduce it to say 10% (about height of the letters) and modify layout so icon is inline with the category name, but that is likely more complex and possible problematic - and needs testing on multiple devices - for little gain. But if you wish, I can try to investigate that)