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. /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. /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. /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”
before = render "aspects/aspect_stream", stream: @stream
app/views/streams/main_stream.mobile.haml
if you want on mobile here add:
= render “shared/bar”
before = render ‘shared/stream’, posts: @stream.stream_posts
5. /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.