Rewrite contributions

[nottrobin]

Completely rewrite contributions HTML, CSS and JavaScript to:

• Remove dependency on YUI
• Use native HTML5 sliders (<input type=range>)
• Use tidier BEM-based styling

Rather than implementing sliders entirely myself with JavaScript, I'm using the HTML5 "range" input type, a faster and more robust solution. For browsers that don't support the "range" type, I'm simply hiding sliders.

Note, sliders no longer have orange on one side and white on the other, as they used to. I'm not sure if this is possible with the styling options for the "range" type, but anyway it would introduce significant complexity which I'd rather not do.

QA

make run

Visit http://127.0.0.1:8001/download/desktop/contribute?version=16.04.1&architecture=amd64 and check:

• The sliders look acceptable
• As you slide the sliders, the numbers change, the total updates, and the "The same price as" changes
• The same as you change the numbers, either by typing new numbers or using the arrows in the number field
• The total is accurate
• The boundaries for the items in "The same price as" section are the same as they were
• If you reduce the contribution to zero, both "Pay with paypal" and "Not now, take me to the download ›" disappear, and instead you see "Download Ubuntu Desktop"
• If you increase the contribution above zero, everything returns to normal
• Clicking "Pay with Paypal" takes you to paypal for the correct amount
• Clicking "Not now..." takes you to thank you page and starts download

Then turn off JavaScript, reload the page, and check:

• Sliders are not visible - this will also be the experience of people with browsers that don't support <input type=range>.
• "The same price as" row is not visible (as this requires JavaScript to work)
• The form is still usable
• You can still submit a contribution through paypal

Turn JavaScript back on, visit http://127.0.0.1:8001/download/desktop/contribute. Check:

• "Not now..." link isn't there (as we aren't downloading anything specific)
• When you reduce amount to zero, "Pay with Paypal" button is disabled

[pmahnke]

Errors

• if you put in 0, you can't see the text of the button, on live, it just says 'Download'
  
• if you put in a really high number, you don't have an item
  
• firefox 47.01 and 48.02 doesn't have sliders?
  
• safari 9.1.3
  
• on ff and safari - '"The same price as" row is not visible (as this requires JavaScript to work)' I am seeing these areas
  
• 'You can still submit a contribution through paypal' however you can't use PayPal without JS
  
• when I turned js on ff again, and reloaded, the bottom sections don't update (total or comparator)
  

[nottrobin]

@pmahnke I can't check Safari from here, but hopefully those issues were for the same reasons as the firefox issues - JavaScript errors because NodeList.forEach didn't exist.

I've now fixed everything else. If you don't have JavaScript this is now what you see:

And if you go to http://127.0.0.1:8001/download/desktop without JavaScript and click "Download" you should go straight to the download and bypass the contribute page.

Could you please verify it all looks good?

[pmahnke]

Great work 👍