[#1265] Donations

[KasperBrandt]

@loicsans or @gabemart; please take a look at the styling of the donation templates and the donate button on project main (that one especially doesn't work well when resizing). Also, I used inline styling for the background of the 'Payment system' on the right of the donation templates and the donate button on project main.

Let me know if you don't have time before next Wednesday or so, otherwise I'll take another look.

@kardan you could check if it (functionally) works well. Two quirks I know of:

• When clicking the "edit" button (in step 3), adjusting something and clicking "next..." again, a new Invoice object will be created.
• When there's a 'cancel' button on one of the external pages (like iDeal -> ING bank) and the user is redirected back to RSR, the thank you page is displayed.

Both issues were already in v2 I guess, and we'd have to investigate how to fix.

[iperdomo]

Checklist

• Test plan
• Copyright header
• Code formatting

[landscape-bot]

Repository health increased by 0.01% when pulling 9449e72 on 1265_donations into 586bf00 on develop.

• 11 new problems were found (including 1 error and 8 code smells).
• 1 problem was fixed (including 0 errors and 1 code smell).

[landscape-bot]

Repository health increased by 0.01% when pulling a478f75 on 1265_donations into 586bf00 on develop.

• 11 new problems were found (including 1 error and 8 code smells).
• 1 problem was fixed (including 0 errors and 1 code smell).

[landscape-bot]

Repository health increased by 0.01% when pulling 3ea68bd on 1265_donations into 586bf00 on develop.

• 11 new problems were found (including 1 error and 8 code smells).
• 1 problem was fixed (including 0 errors and 1 code smell).

[gabemart]

@KasperBrandt @loicsans I have committed some suggested styling changes. Mainly:

i) Make the "Donate" button visible on the project listing page on all viewport sizes, rather than hiding it at small sizes

ii) Getting rid of the "Donate in three steps" dialogue. It seems unnecessary, given that the only slightly confusing thing a user has to do is select which donation method to use. I think the current dialogue adds more friction than it alleviates, and a better approach is trying to make the choice of donation method more intuitive.

iii) Some general responsive design and other CSS tweaks

Some things I haven't done, but think probably should be done:

Set a currency prefix on the "amount" field.

I that would greatly improve the UX by making the donation currency much more obvious. The bootstrappy way to do this (as far as I can tell) is to change the markup from:

<div class="form-group">
    <label class="control-label" for="id_amount">Amount</label>
    <input class="form-control" id="id_amount" min="2" name="amount" placeholder="Amount" required="required" title="" type="number">
</div>

to

<div class="form-group">
    <label class="control-label" for="id_amount">Amount</label>
    <div class="input-group">
        <span class="input-group-addon">{{currency}}</span>
        <input class="form-control" id="id_amount" min="2" name="amount" placeholder="Amount" required="required" title="" type="number">
    </div>
</div>

which creates a prefix like this:

However, currently the markup is being directly generated by bootstrap so I'm not sure how to make this change without just copying the markup into the template.

Give the Paypal donate link Akvo styling

Currently, the final "Donate" link for a user choosing to donate with paypal is a paypal-styled button. I think there's less friction with a default Akvo-styled blue button. I would suggest making this change unless the paypal button is required by paypal TOS or similar

[landscape-bot]

Repository health increased by 0.01% when pulling 5c878b0 on 1265_donations into 586bf00 on develop.

• 11 new problems were found (including 1 error and 8 code smells).
• 1 problem was fixed (including 0 errors and 1 code smell).

[landscape-bot]

Repository health increased by 0.01% when pulling 183a7a0 on 1265_donations into 586bf00 on develop.

• 11 new problems were found (including 1 error and 8 code smells).
• 1 problem was fixed (including 0 errors and 1 code smell).

[loicsans]

@gabemart
It's better overall. Only a couple of small issues:

1. The donate buttons are too big, and should just contain the text and be centred within their containers. (See img attached). A subtle background can improve call to action separation too.
2. The return to project button is unnecessary, the project title takes you back.
   

[landscape-bot]

Repository health increased by 0.01% when pulling 876293b on 1265_donations into 586bf00 on develop.

• 11 new problems were found (including 1 error and 8 code smells).
• 1 problem was fixed (including 0 errors and 1 code smell).

[landscape-bot]

Repository health increased by 0.01% when pulling 44fe87e on 1265_donations into 586bf00 on develop.

• 11 new problems were found (including 1 error and 8 code smells).
• 1 problem was fixed (including 0 errors and 1 code smell).

[landscape-bot]

Repository health increased by 0.01% when pulling 15e9dc4 on 1265_donations into 586bf00 on develop.

• 11 new problems were found (including 1 error and 8 code smells).
• 1 problem was fixed (including 0 errors and 1 code smell).

[landscape-bot]

Repository health increased by 0.01% when pulling 8a9806d on 1265_donations into 586bf00 on develop.

• 11 new problems were found (including 1 error and 8 code smells).
• 1 problem was fixed (including 0 errors and 1 code smell).