937753 - Add Popcorn / Thimble / Goggles logo icons to "Make" submenu

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Jacob [:Jacob]]

I think it would be a good idea to add small icons of each tool's logo next to the "Multimedia with Popcorn" "Webpages with Thimble "Remixes with X-Ray Goggles"
links in the Submenu under "Make"

This would make the links a little more noticeable (they are quite hidden) and better communicate that there are 3 different tools that we offer

What do you think Kate?

Comment 1

[Zakeria Hassan]

Hi,

If no one is working on this assign this to me. 

Thanks,
Zak

Comment 2

[David Humphrey (:humph)]

Done!  Go for it Zak.  Kate can review.

Comment 3

[Jon Buckley [:jbuck]]

:k88hudson - do we have any smaller webmaker logos laying around that we could use for this purpose?

Comment 4

[Mark Aronin [:maronin]]

(In reply to Jon Buckley [:jbuck] from comment #3)
> :k88hudson - do we have any smaller webmaker logos laying around that we
> could use for this purpose?

I can make them from scratch, and we can use them. I can make a few variations of them and post here if anyone is interested.

Comment 5

[Mark Aronin [:maronin]]

If no one is doing this, I can try and do this issue. I think icons would be greate. Visual feedback is always good.

Comment 6

[Jon Buckley [:jbuck]]

It might be possible to just resize the existing logos located on https://webmaker.org/tools/ . But yes, go for it!

Comment 7

[Mark Aronin [:maronin]]

I'm not sure where to start for putting the icons (which file should I be working on). I found out that it's not just simple HTML code for that navigation bar and that it's using some sort of templating. Anyone care to give a hint?

Comment 8

[Mark Aronin [:maronin]]

Attachment: Pull request for icons issue

Comment 9

[Ali Al Dallal [:alicoding]]

What I think would be great to do and also will make the speed of loading the page much better is to make these three icons as CSS image sprites.

Comment 10

[Mark Aronin [:maronin]]

(In reply to Ali Al Dallal [:aali] from comment #9)
> What I think would be great to do and also will make the speed of loading
> the page much better is to make these three icons as CSS image sprites.

Updated as per request ;)

Details in the Pull Request.

Comment 11

[inactivate account for kate]

Comment on attachment 8350968 [details] [review]
Pull request for icons issue

This is R+, I will update the image to be compatible with retina though

Comment 12

[[github robot]]

Commit pushed to master at https://github.com/mozilla/webmaker.org

https://github.com/mozilla/webmaker.org/commit/2292c739924851641932d3fe6669e5159596c050
Bug 937753 - Updated icons for retina