2018 progress bar for diaspora podmin donations

By | March 31, 2018

Pod donations trickle in over the year, but doing a fundraiser with a  progress bar seems to really help out to raise donations.

How to:

1. https://github.com/diasporg/diaspora/blob/master/app/assets/stylesheets/stream.scss


You need some css syles so add:

#progressBar {
width: 710px;
height: 15px;
border: 1px solid #111;
#progressBar div {
height: 100%;
color: #fff;
text-align: right;
line-height: 15px;
width: 0;
background-color: #009300;

2. https://github.com/diasporg/diaspora/blob/master/app/views/shared/_bar.haml


create this file and add:

$(document).ready(function() {progress(9, $(‘#progressBar’));});

Diasporg costs over $2000 USD to keep alive and running each year, donations all year help with mosts side costs, but each new year we need to raise the server bill, for 2018 we are at $101 of $1200. Please help out where you can, yes even $1 helps!
= link_to ‘All Donation Options’, “/supportyourpod”


You can see I have a custom page at /supportyourpod that you will not have, either remove that or link somewhere you want for donations. You can update this _bar file with your text and the percent you want to move the bar, in this example it is 9%

3. https://github.com/diasporg/diaspora/blob/master/app/views/shared/_stream.haml



= render partial: “shared/bar”

Before the

= render partial: “shared/stream_element”, collection: posts, as: :post





= render “shared/bar”


if you want on mobile here add:

= render “shared/bar”

5. https://github.com/diasporg/diaspora/blob/master/app/assets/javascripts/main.js

Ok now you have a bar and somewhere for the JavaScript to load up, now you need the JavaScript function code. I happen to have a custom .js file already at app/assets/javascripts/diasporg.js

You should make your own .js for custom scripts. So lets say app/assets/javascripts/custom.js

Edit app/assets/javascripts/custom.js (new file)

function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find(‘div’).animate({ width: progressBarWidth }, 2500).html(percent + “% “);
Ok now you have the function to draw the bar. You just need your custom.js to compile!


Edit app/assets/javascripts/main.js

Add your custom here

//= require custom
does not need the .js on the file name, just your file name. If you look at my code I have //=require diasporg since my custom code is in a file named diasporg.



Make sure you recompile your assets and restart things. When you edit your _bar file you just need to do a “bin/eye restart web” command since you are not changing any assets there.

Leave a Reply

Your email address will not be published. Required fields are marked *