Display image name on download buttons and improve the buttons' formatting

[WasabiFan]

This does three things:

• Re-writes the release logic to be much less ugly
• Adds a "refresh" button which re-loads the download data, bypassing the 20-minute cache
• Adds a tooltip which shows the release name

I'd recommend viewing the two commits individually.

Here's a screenshot, because I can't publish at the moment:

Fixes #338

This should be merged as a rebase; do not squash this PR.

[dlech]

Adds a "refresh" button which re-loads the download data, bypassing the 20-minute cache

This seems a very odd feature for an otherwise static website. Let's explore other possibilities. For example, could we get away with removing the cache? GitHub's rate limit is 60 requests per hour, so I have a hard time imagining that someone would hit this limit. Or we could setup a relay server as suggested here.

Adds a tooltip which shows the release name

When you opened issue #340, I was envisioning having the file name on the button itself. Something like this (except with better alignment and a more narrow font for the file name):

[WasabiFan]

For example, could we get away with removing the cache?

I don't think we can remove it entirely, but I think it would be fine to remove it or dramatically lower the timeout for the downloads page specifically. I'd like to avoid setting up our own infrastructure unless absolutely necessary.

Something like this (except with better alignment and a more narrow font for the file name):

I tried that, but I couldn't figure out how to make that happen within an a tag while keeping our HTML valid.

[dlech]

I'd like to avoid setting up our own infrastructure unless absolutely necessary.

I would rather do this than a reload button.

I tried that, but I couldn't figure out how to make that happen within an a tag while keeping our HTML valid.

This says in HTML 5, you can put anything you like inside of an <a> tag and if you still want HTML 4 validity, you can style inline elements to look work like block elements.

[WasabiFan]

I've taken the time to come back to this PR and get it finished up. I removed the "refresh" button in favor of a decreased cache time and reformatted the download buttons to work well with an inlined file name. Here's how it looks (sorry for the huge screenshot 😉):

I can't persuade our publish script to function properly right now so we'll have to settle for the screenshot.

[dlech]

I think the white background of the size badge makes the size look too "important". How about using a different shade of orange so that it is less prominent?

[WasabiFan]

I was able to find a tweak of that design which is a bit less bold:

Personally, I think the darker color is distracting in its own right as it departs from the design we use on the rest of the site.

Playing around in Illustrator, I came up with something I like, however it'd be a bit of work to build it in CSS:

[WasabiFan]

I figured out how to do that multipart button, if we want it: http://www.bootply.com/v2c4s4X2Xe

[dlech]

bootply link is not working for me

[WasabiFan]

Haha, looks like I broke Bootply... they're completely down right now 😁

That mock-up is just a technical demo of the alignment; the styling isn't polished by any means.

[dlech]

Hmm... the bootply demo interacts as if it is two separate buttons. The mouseover affects the top and bottom halves separately. That doesn't make for a very good UX.

[WasabiFan]

That's just some styling work that I didn't bother with for demonstration purposes; my goal was to make sure that I could handle the alignment of the containers, because mouseover effects are known to work. If I actually implement this control I'll need to style the button accordingly..

[dlech]

I like it if you can make it work.

[WasabiFan]

I have the basis of this done. I next need to get my styles working for dynamically-chosen button sizes so that the smaller ones for RasPi and the Beagles are handled correctly. Currently, the ones in the guide are misaligned and the ones on the downloads page are overlapping images in undesirable ways.

[WasabiFan]

I made those final changes. The pages are live here:

• http://wasabifan.github.io/ev3dev.github.io/download/
• http://wasabifan.github.io/ev3dev.github.io/docs/getting-started/#step-1-download-the-latest-ev3dev-image-file

[WasabiFan]

Also, I normalized the text of the buttons so that each is the same across the two pages on which it is used. The only discrepancy is between the EV3's buttons on the two pages, where one is prefixed by "Download for" to make the intent of the buttons clear.

[dlech]

One thing I want to do now that we are starting to have stretch images is make the download buttons say "Download ev3dev-jessie for LEGO MINDSTORMS EV3".

[dlech]

I just had a look at the previews and "ev3dev-jessie" is in the file name, so that might be good enough.

[dlech]

By themselves, the buttons look great, but in the context of the page, I think the gray makes them too busy and makes them look a bit out of place. It is especially bad on the getting started page with the alerts above and below.

What if we just keep everything orange? Then the buttons won't be so tall either.

[WasabiFan]

Wasn't the original issue that the white badge was too distracting on the plain orange buttons?

For comparison, here's a CSS-ed screenshot of roughly what the normal button would look like with the new layout:

[dlech]

I could do without the badge regardless of the background color. Stylizing the file size with italics or something else would be just fine with me.