1202498 - use specific icons for mobile topics instead of the gear icon whenever possible

Status: RESOLVED FIXED

(support.mozilla.org :: Knowledge Base Software, task, P5)

Description

[Kadir Topal [:atopal]]

On the product landing pages we use the generic gear icon for every topic except "problem" and "community support" for all products except Firefox OS. Unless there is a reason not to use the desktop icons, we should use them instead of the gear icon

Comment 1

[Michael Cooper [:mythmon]]

I'm pretty sure this is because the topic slugs got changed. On the desktop site we pull these images from the database and so they are easy to change. On mobile we have a sprite set of all the images for performance. Because of this we need code changes to update images or slugs for topics.

This is a simple CSS change to update the slug names in the code to match what is the DB.

Comment 3

[Osmose [:osmose, :mkelly]]

Kadir: You're talking about pages like https://support.mozilla.org/en-US/products/firefox, right? The icons look like they're correct now. The only product that seems to have some incorrect icons is Thunderbird, but I'm not sure if we have icons for those topics that should be used instead: https://support.mozilla.org/en-US/products/thunderbird

Is this working now, or am I incorrect?

Comment 4

[Kadir Topal [:atopal]]

Yes, but to be clear: this is about the mobile page, where I can still see the generic icons. Were you looking at the desktop page by any chance?

Comment 5

[Osmose [:osmose, :mkelly]]

Aha, you're totally right! Sorry, missed that bit.

Comment 6

[Osmose [:osmose, :mkelly]]

A few of the icons are missing from the spritesheet (such as the Hello and Sync icons). Is there a place I can go to fetch hi-res or original versions of these so I can add them into the spritesheet?

Comment 7

[Michael Cooper [:mythmon]]

I think that you can probably find the icons you need somewhere on here: https://assets.mozilla.org/portal/assets/#category/16

Comment 8

[Osmose [:osmose, :mkelly]]

bram: You previously worked on design for SUMO, right? Do you know where we'd be able to track down the PSDs used for the topic icons on https://support.mozilla.org/en-US/products/firefox?

Comment 9

[Bram Pitoyo [:bram]]

The topic icons PSD can be found here: https://www.dropbox.com/s/y6etcxqiuoh3bav/sumo_icons.psd?dl=0

Newly added in this PSD is topic icons for Apps, Sync and Hello. I noticed that they have been added on SUMO, but not sized or coloured uniformly.

To apply the style to any icon, copy the layer style that’s used in this PSD, then paste it into your new icon layer.

Hope this helps.

Comment 10

[Osmose [:osmose, :mkelly]]

bram: That's just what we need, thanks!

Removing myself as assignee in case someone wants to take this before I can get to it. It should be ready to work on, now.

Comment 11

[Bram Pitoyo [:bram]]

If you need any new icon drawn, I can possibly help – having done a few for other projects – or refer you to somebody who might be able to. Just needinfo me!

Comment 12

[Rehan Dalal (Inactive)]

Attachment: topics-sprite.png

Comment 13

[Rehan Dalal (Inactive)]

Attachment: topics-sprite-2x.png

Attached the 2x and 1x sprite sheets with correctly sized and positioned icons.

Comment 14

[Roland Tanglao needinfo please :rolandtanglao, :mohnkuchen, :adobo, :sinigang, :roland]

p5 good first bug since rehan and bram and mkelly have done all the hard setup work it looks like

Comment 15

[Joni Chan]

We have brand new icons now since our visual update.