PR#152: sprited the badges - fedora-hubs

fedora-hubs

#152 sprited the badges

Merged 7 years ago by pingou. Opened 7 years ago by ryanlerch.

ryanlerch/fedora-hubs sprite-the-badges into develop

sprited the badges

Ryan Lerch • 7 years ago

cb02e14

hubs/static/badges/b.css

file added

+2581

The added file is too large to be shown here, see it at: hubs/static/badges/b.css

hubs/static/badges/b.png

file added

empty or binary file added

hubs/templates/master.html

file modified

		`@@ -8,6 +8,8 @@`
		`<script type="text/javascript" src="{{ url_for('static', filename='js/pace.min.js') }}"></script>`
		`<link href="{{ url_for('static', filename='open_iconic_1.1.0/css/open-iconic.min.css') }}"`
		`type="text/css" rel="stylesheet" />`
		`+ <link href="{{ url_for('static', filename='badges/b.css') }}"`
		`+ type="text/css" rel="stylesheet" />`
		`</head>`
		`<body>`
		`<div class="masthead">`

hubs/widgets/templates/badges.html

file modified

+3 -2

		`@@ -1,6 +1,7 @@`
		`<div class="flex-container">`
		`- {% for badge in assertions[:10] %}`
		`+ {% for badge in assertions %}`
		`<a width="60px" href="https://badges.fedoraproject.org/badge/{{badge['id']}}">`
		`- <img width="60px" src="{{badge['image']}}"/></a>`
		`+ <span class="f-b-{{badge['id']}}"></span>`
		`+ </a>`
		`{%endfor%}`
		`</div>`

ryanlerch commented 7 years ago

ultimately we want to host the sprites on badges, but keeping
here for now.

pingou commented 7 years ago

Cool, two questions:

How did you generate the image? Did you write a script? If so, would it be worth including in the sources?
Is the script ensuring the badges are always at the same location in the image?

ryanlerch commented 7 years ago

Cool, two questions:

How did you generate the image? Did you write a script? If so, would it be worth including in the sources?

I used python-glue, it is a command line python app for doing this. AFAICT, there is no json call to get all the badges from fedora-badges, so creating this was pretty manual. Ultimately, this would be better in badges, so it can be regenerated whenever a new badge is added.

Is the script ensuring the badges are always at the same location in the image?

This shouldnt really be an issue, as python-glue creates the CSS file and the sprite image, so if the files were to move around in the spritefile, then the updated css would always point to the right ones.

pingou commented 7 years ago

Ok I'm going to merge this but we should definitely document the process to generate the image somewhere so that it can be reused to update the image and css.

One idea: make it a script that's run as a git hook upon update to the badge repo and that generates the image and css and upload them somewhere accessible for other apps to consume

/cc @sayanchowdhury since he is on the badge stack :)