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

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

app/views/shared/_bar.haml

create this file and add:

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

.content
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”
#progressBar
%div

 

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

app/views/shared/_stream.haml

add:

= render partial: “shared/bar”

Before the

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

 


4.

app/views/streams/main_stream.html.haml

add:

= render “shared/bar”

app/views/streams/main_stream.mobile.haml

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 *