0E800's BBCode Progress Bar Extension

0E800

flarum-ext-bbcode-bars

Add customize-able Progress Bars to Flarum posts.

Github
Packagist

Install:

composer require oe800/flarum-ext-bbcode-bars

Update:

composer update oe800/flarum-ext-bbcode-bars
php flarum cache:clear

Usage:

[PBAR]Title,ProgressText,BorderColor,ProgressColor,LittleColor,BorderSize,Progress%,BorderRadius,BottomMargin[/PBAR]

Examples:

Todo:
- ~~Add custom border radius~~
- ~~Add Custom Bottom Margin~~
- Make greater than 100% optional.
- Make more responcive (mobile)
- Make dark themed version
- Add more styles
+Animation
+Additional fonts

AngelAvila

I would hit "I love it" a thousand times after have broken the "Like" buttom. I'm really grateful man, thanks for that. Gonna buy you a beer asap!

0E800

Btw please don't hate on my poor math, i now realize those examples represent a 200% total, I hope you understand my intent was purely for demonstration. ?

Edit: Hmm maybe we need a progress bar capable of over 100% logic.

AngelAvila

Hahaha, the most important thing is to show how it works!

Here it goes my first impressions, hope you don't mind.

I definitely loved it, all the placeholders you put are 100% functional and perfect to make the bar as customizable as possible.
I just tested one progress bar here, but there are two things not working as it should (IMO):
1. The font used inside the bar isn't taking the forum font but the Title is.
2. The bar doesn't respect spaces/empty lines above or below, even though I add them on the edit screen. An example here:

Link: http://i.imgur.com/JnCvMqo.png

The space between "Sistema de donaciones..." and "Avance" it's a random space created by the Extension itself. If I remove the space on the edit, the space doesn't disappear.

Above all, it's a really amazing extension which I believe is going to be useful for many production Flarums that wants to have their community stay tuned on their news of their projects.

Thank you so much again!

0E800

AngelAvila
So I'll try to add a margin to the bottom so it has wiggle room. I'll also see about removing any specific font calls.

I notice on mobile the bars don't look as good, I'll also work on that.

As a temporary hack, try using:
[color=white]linebreak.... [/color]
That will give you your space.

Be well.

0E800

AngelAvila

Okay, corrected font and added another option for the bottom margin.
Will have it posted shortly.

0E800

Update to version 0.1.5

composer update oe800/flarum-ext-bbcode-bars

Clear cache:
php flarum cache:clear

Refresh Browser after adding margin:
CTRL-F5

AngelAvila

0E800 Just updated and fell in love with the extension once again. Thank you SO much for this!

You can take a look to your awesome work being used and enjoyed right here:

https://walkingplayers.com/foro/d/354-actualizaci-n-abril-2017-rangos-tntrun-nuevo-lobby-y-m-s

You are really patient and hardworker, glad to be in contact with people like you!

0E800

AngelAvila

I see that its difficult to include the full progress text for 5%, 10%, 15%, etc.)
I will see if I can do anything about it. In the mean time, I would just use "5%" instead of "5% completed" on the small progress bars.

Your site looks excellente. Muy bueno primo. I am happy to have been able to succeed in your request.
Others will benefit too ?

AngelAvila

0E800 Hehehe, muchas gracias! Been working hard to customize it without forgetting about the simplicity that distinguish Flarum over the rest of the forums! It's a true honor for me that you liked it!

I noticed the tiny issue with the smaller numbers like 5%, etc. Just modified the bars with "5%" only.

As I told you I don't know much about coding, but I've seen that normally if the percentage is lower than 30%, the letters are likely to appear on the empty side of the progress bar. Hope this helps somehow as I'm terribly bad at coding for now.

Started to learn already, so hopefully very soon I will join to the car as well. ?