User Title Ladder by Waindigo [Deleted]

zagorskey · Aug 1, 2014

I altered the code a bit to get the HTML5/CSS3 feel with semantic code and some nice animation. I hope @Waindigo likes the result and conciders some of the changes for future update.

waindigo_trophy_progress_trophyprogress:

Code:

<xen:if is="{$xenOptions.waindigo_trophyProgress_showInSidebar} && {$visitor.user_id}">
    <xen:require css="waindigo_trophy_progress_trophyprogress.css" />
 
    <xen:require js="js/waindigo/trophyprogress/progress_bar.js" />
 
    <div class='section'>
        <div class='secondaryContent clearfix'>
            <h3>{$currentTrophyTitle}</h3>
            <div class='footnote'>{xen:phrase waindigo_progress_to_next_level_trophyprogress} {$nextTrophyTitle}:</div>
            <div class='TrophyProgressMeter'>
                <span class='TrophyProgressGraphic' role='progressbar' aria-valuenow='{$levelProgress}' aria-valuemin='0' aria-valuemax='100' style='width:{$levelProgress}%'>
                    <span class='TrophyProgressCounter'>{$levelProgress}%</span>
                </span>
            </div>
            <a id='levelUp' href='help/trophies'>{xen:phrase how_to_levelup}</a>
        </div>
    </div>
</xen:if>

waindigo_trophy_progress_trophyprogress.css:

Code:

.TrophyProgressMeter
{
    height: 26px;
    margin-top: 4px;
    padding: 2px;
    background: @content.background-color;
    border: 1px solid @primaryLighter;
    border-radius: 6px
}

.TrophyProgressGraphic
{
    display: block;
    height: 26px;
    background: -webkit-linear-gradient(-45deg, #5fbb1f 25%, #56aa1c 25%, #56aa1c 50%, #5fbb1f 50%, #5fbb1f 75%, #56aa1c 75%, #56aa1c);
    background: linear-gradient(-45deg, #5fbb1f 25%, #56aa1c 25%, #56aa1c 50%, #5fbb1f 50%, #5fbb1f 75%, #56aa1c 75%, #56aa1c);
    background-size: 40px 40px;
    -webkit-animation: progress 3s linear infinite;
    animation: progress 3s linear infinite;
    border-radius: 4px;
    text-align: right;
}
 
.TrophyProgressCounter
{
    padding: 0 10px;
    color:#fff;
    font-size:18px;
    line-height:27px
}
 
#levelUp
{
    float:right;
    margin-top:3px;
    cursor:help
}
 
@-webkit-keyframes progress {
    from {background-position: 0 0}
    to {background-position: 40px 0}
}
@keyframes progress {
    from {background-position: 0 0}
    to {background-position: 40px 0}
}

Here's the final result:

One can adjust the colours to their needs.

mauzao9 · Aug 5, 2014

@Waindigo if we want to only display the trophy progress block on the Forum List (homepage) instead of on sidebar top of every page (with one sidebar), what should i edit?

zagorskey · Aug 6, 2014

I'd like to see that add-on updated for XF 1.4, this is what I currently get:

Code:

An exception occurred: No entry is registered for key 'trophyUserTitles' in /var/www/mart/f/library/XenForo/Application.php on line 969

XenForo_Application::get() in Waindigo/TrophyProgress/Listener/FrontControllerPreView.php at line 13
Waindigo_TrophyProgress_Listener_FrontControllerPreView->run() in Waindigo/TrophyProgress/Listener/FrontControllerPreView.php at line 60
Waindigo_TrophyProgress_Listener_FrontControllerPreView::frontControllerPreView()
call_user_func_array() in XenForo/CodeEvent.php at line 90
XenForo_CodeEvent::fire() in XenForo/FrontController.php at line 156
XenForo_FrontController->run() in /var/www/mart/f/index.php at line 13

rdn · Aug 15, 2014

Will this one works fine with XF 1.4 new feature?
I'm using message count for user titles.

Jon W · Aug 15, 2014

Waindigo updated Trophy User Titles Progress by Waindigo with a new update entry:

Version 1.0.1a released

Compatibility update:

Now works with XenForo 1.4, including new user title ladder system with variable user criteria.

Read the rest of this update entry...

it_ · Aug 17, 2014

@Waindigo

Hello, I'm unable to install this addon in version 1.0.1a. If I do so, it just leaves a blank page and gives me this server error message:

Code:

Fatal Error: syntax error, unexpected '['
Vor 13 Minuten - library/Waindigo/TrophyProgress/Listener/FrontControllerPreView.php:90

I can install the Addon in Version 1.0.1 though.
I'm using Xenforo Version 1.3.5

mauzao9 · Aug 29, 2014

@Waindigo this addon is causing server errors on try to update it after install 1.4 RC1:

Code:

Error Info
ErrorException: Fatal Error: syntax error, unexpected '[' - library/Waindigo/TrophyProgress/Listener/FrontControllerPreView.php:90
Generated By: Max Bacon, A moment ago
Stack Trace
#0 [internal function]: XenForo_Application::handleFatalError()
#1 {main}
Request State
array(3) {
  ["url"] => string(56) "http://.com/admin.php?add-ons/install-upgrade"
  ["_GET"] => array(1) {
    ["add-ons/install-upgrade"] => string(0) ""
  }
  ["_POST"] => array(3) {
    ["resource_url"] => string(72) "http://xenforo.com/community/resources/trophy-progress-by-waindigo.2355/"
    ["_xfToken"] => string(8) "********"
    ["_xfConfirm"] => string(1) "1"
  }
}

Jon W · Aug 29, 2014

Waindigo updated Trophy User Titles Progress by Waindigo with a new update entry:

Version 1.0.1b released

Bug fix:

Fixes syntax error

Read the rest of this update entry...

Mouth · Aug 31, 2014

zagorskey said:
I altered the code a bit to get the HTML5/CSS3 feel with semantic code and some nice animation. I hope @Waindigo likes the result and conciders some of the changes for future update.

Yes, please. It resolves my exact issue from user of "what is it? how do i progress?"

$currentlevel didn't work for me, does that have to be added somewhere?

zagorskey said:
One can adjust the colours to their needs.

How so? I'm only a beginner at CSS, and couldn't work out where it was.

Jon W · Aug 31, 2014

Mouth said:
$currentlevel didn't work for me, does that have to be added somewhere?

Try $currentLevel, this should be most pages along with the others previously mentioned.

mauzao9 · Sep 15, 2014

Hey @zagorskey i'm using your code it feels nice.
But one problem, if the bar gets too sort, like user is 7% for next title atmm, it breaks :

Any idea for CSS tweak for min-size of progress bar or just let the text float instead?

Optic · Oct 9, 2014

This looks awesome - is there any way to expand this so the bar will appear below a user's avatar on each post he/she makes?

Lukas W. · Jan 28, 2015

It seems the bar is not fully working on a [bd] Widget Framework Widget Page. It does show up below the visitor panel by default, but does not show any progress. Any hint on how to get that working?

Mattie Num Nums · Feb 17, 2015

Changed the visitor panel to integrate the progress bar.

Visitor Panel

Code:

<xen:if is="{$xenOptions.waindigo_trophyProgress_showInSidebar} && {$visitor.user_id}">
<xen:if is="{$visitor.user_id}">
<xen:require css="waindigo_trophy_progress_trophyprogress.css" />
<xen:require js="js/waindigo/trophyprogress/progress_bar.js" />

   <div class="section">
     <div class="secondaryContent">
       <h3>Welcome {xen:helper username, $visitor, 'NoOverlay'}</h3>
       <p class="trophycenter"><xen:avatar user="$visitor" size="m" img="true" /></p>
       <div class="visitorText">     
       <div class="stats">
       <xen:hook name="sidebar_visitor_panel_stats">
         <dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
         <dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
         <dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
       </div>
       </xen:hook>
     </div>     
       <span class="TrophyProgressMeter"><span class="TrophyProgressGraphic" style="width: {$levelProgress}%">&nbsp;</span><span class="TrophyProgressCounter">{$levelProgress}%</span></span>
       <p class="trophycenter">Progress until next Trophy</p>
     </div>
   </div>
</xen:if>
</xen:if>

<xen:include template="ad_sidebar_below_visitor_panel" />

waindigo_trophy_progress_trophyprogress.css

Code:

p.trophycenter
{
   text-align: center;
}

.TrophyProgressMeter
{
   display: block;
   padding: 1px;
   border: 1px solid @primaryLighter;
   border-radius: 0px;
   background-color: @content.background-color;
   margin-top: 4px;
   font-size: 8pt;
   line-height: 10px;
}

   .TrophyProgressMeter .TrophyProgressGraphic
   {
     display: inline-block;
     width: 0%;
     height: 10px;
     background-color: #000000;
     text-align: right;
   }
   
   .TrophyProgressMeter .TrophyProgressCounter
   {
     display: inline-block;
     height: 10px;
     padding: 0 10px;
   }
   
   .TrophyProgressMeter .TrophyProgressGraphic .TrophyProgressCounter
   {
     color: @primaryLightest;
   }

Jon W · Feb 27, 2015

Jon W updated User Title Ladder by Waindigo with a new update entry:

Version 1.0.0 released

New features:

This is a new release of Trophy User Titles Progress by Waindigo, renamed to User Title Ladder by Waindigo to reflect the changes in XenForo 1.4. This add-on only supports XenForo 1.4. Please install this as a new add-on and Trophy User Titles Progress by Waindigo...

Read the rest of this update entry...

Jon W · Feb 27, 2015

zagorskey said:

I altered the code a bit to get the HTML5/CSS3 feel with semantic code and some nice animation. I hope @Waindigo likes the result and conciders some of the changes for future update.

waindigo_trophy_progress_trophyprogress:

Code:

<xen:if is="{$xenOptions.waindigo_trophyProgress_showInSidebar} && {$visitor.user_id}">
    <xen:require css="waindigo_trophy_progress_trophyprogress.css" />

    <xen:require js="js/waindigo/trophyprogress/progress_bar.js" />

    <div class='section'>
        <div class='secondaryContent clearfix'>
            <h3>{$currentTrophyTitle}</h3>
            <div class='footnote'>{xen:phrase waindigo_progress_to_next_level_trophyprogress} {$nextTrophyTitle}:</div>
            <div class='TrophyProgressMeter'>
                <span class='TrophyProgressGraphic' role='progressbar' aria-valuenow='{$levelProgress}' aria-valuemin='0' aria-valuemax='100' style='width:{$levelProgress}%'>
                    <span class='TrophyProgressCounter'>{$levelProgress}%</span>
                </span>
            </div>
            <a id='levelUp' href='help/trophies'>{xen:phrase how_to_levelup}</a>
        </div>
    </div>
</xen:if>

waindigo_trophy_progress_trophyprogress.css:

Code:

.TrophyProgressMeter
{
    height: 26px;
    margin-top: 4px;
    padding: 2px;
    background: @content.background-color;
    border: 1px solid @primaryLighter;
    border-radius: 6px
}

.TrophyProgressGraphic
{
    display: block;
    height: 26px;
    background: -webkit-linear-gradient(-45deg, #5fbb1f 25%, #56aa1c 25%, #56aa1c 50%, #5fbb1f 50%, #5fbb1f 75%, #56aa1c 75%, #56aa1c);
    background: linear-gradient(-45deg, #5fbb1f 25%, #56aa1c 25%, #56aa1c 50%, #5fbb1f 50%, #5fbb1f 75%, #56aa1c 75%, #56aa1c);
    background-size: 40px 40px;
    -webkit-animation: progress 3s linear infinite;
    animation: progress 3s linear infinite;
    border-radius: 4px;
    text-align: right;
}

.TrophyProgressCounter
{
    padding: 0 10px;
    color:#fff;
    font-size:18px;
    line-height:27px
}

#levelUp
{
    float:right;
    margin-top:3px;
    cursor:help
}

@-webkit-keyframes progress {
    from {background-position: 0 0}
    to {background-position: 40px 0}
}
@keyframes progress {
    from {background-position: 0 0}
    to {background-position: 40px 0}
}

Here's the final result:
View attachment 79292

One can adjust the colours to their needs.

I've included this in the latest update. Thanks.

I will add you as a contributor to the add-on so that you can have access to all the premium features.

rdn · Feb 27, 2015

So without any donation, free version is not compatible with BD Widget Framework?

Jon W · Feb 27, 2015

RoldanLT said:
So without any donation, free version is not compatible with BD Widget Framework?

This add-on will now work fine with BD Widget Framework, unlike previously. However, if you want the widget, you will have to make a contribution or become a premium member.

Jon W · Feb 27, 2015

Jon W updated User Title Ladder by Waindigo with a new update entry:

Version 1.0.1 released

Bug fixes:

Fixes bug that progress bar doesn't appear in message user info for any user except for currently logged in user.

"until next level" message no longer appears if there are no more levels to reach (i.e. progress bar is 100%).

Fixes bug that progress bar doesn't appear in sidebar if user has not chosen a user title.

Read the rest of this update entry...

Optic · Feb 28, 2015

It was a pleasure contributing to this update

I know a lot of people really wanted the Widget Framework functionality.

Widget Framework renderer in use:

Postbit bar in use:

User Title Ladder by Waindigo [Deleted]

Active member

Well-known member

Active member

Well-known member

Well-known member

Member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Active member

Attachments

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Similar threads

We value your privacy