First of all thank you to http://4tabern.com for making the code available.
The actual effect like on this site. : FlarumBR
Complete Code : On here
Edit the file : vendor/flarum/core/js/forum/dist/app.js
Locate:
var card = '';
if (!post.isHidden() && this.cardVisible) {
card = UserCard.component({
user: user,
className: 'UserCard--popover',
controlsButtonClassName: 'Button Button--icon Button--flat'
});
}
return m(
'div',
{ className: 'PostUser' },
m(
'h3',
null,
m(
'a',
{ href: app.route.user(user), config: m.route },
avatar(user, { className: 'PostUser-avatar' }),
userOnline(user),
username(user)
)
),
m(
'ul',
{ className: 'PostUser-badges badges' },
listItems(user.badges().toArray())
),
card
);
}
}, {
key: 'config',
value: function config(isInitialized) {
var _this2 = this;
if (isInitialized) return;
var timeout = void 0;
var card = '';
var exp_c = (user.data.attributes.commentsCount - user.data.attributes.discussionsCount) * 21;
var exp_d = user.data.attributes.discussionsCount * 33;
var exp_total = exp_c + exp_d;
var level = Math.floor(exp_total / 135);
var exp_percent = (100 / 135) * ((exp_total) - (level * 135));
if (!post.isHidden() && this.cardVisible) {
card = UserCard.component({
user: user,
className: 'UserCard--popover',
controlsButtonClassName: 'Button Button--icon Button--flat'
});
}
return m(
'div',
{ className: 'PostUser' },
userOnline(user),
m(
'h3',
null,
m(
'a',
{ href: app.route.user(user), config: m.route },
avatar(user, { className: 'PostUser-avatar' }),
' ',
username(user)
)
),
m(
'ul',
{ className: 'PostUser-badges badges' },
listItems(user.badges().toArray())
),
card,
m(
'div',
{ className: 'PostUser-level' },
'Nível' + ' ' + level,
m(
'div',
{ className: 'levelbar-empty', style: 'width:100%' },
m(
'div',
{ className: 'levelbar', style: 'width:'+exp_percent+'%' }
)
)
)
);
}
}, {
key: 'config',
value: function config(isInitialized) {
var _this2 = this;
if (isInitialized) return;
var timeout = void 0;
var user = this.props.post.user();
if (user) {
var exp_c = (user.data.attributes.commentsCount - user.data.attributes.discussionsCount) * 21;
var exp_d = user.data.attributes.discussionsCount * 33;
var exp_total = exp_c + exp_d;
this.$('.levelbar-empty').tooltip({ container: 'body', title: exp_total+' '+'Exp' });
}
CSS:
Add the following code in : \vendor\flarum\core\less\forum\Post.less or in Custom CSS in Administration
.PostUser-level{display:none}
.PostUser-level
.levelbar-empty{display:none}
.PostUser-level .levelbar{display:none}
}
@media (min-width: 992px), (min-width: 768px) and (max-width: 991px){
.PostUser-level{display:none}
.DiscussionPage .PostUser-level{
display:block;
margin-left:-85px;
margin-top:70px;
text-align:center;
float:left;
width:64px
}
.DiscussionPage .PostUser-level .levelbar-empty{
background:@control-bg;
border-radius:10px;height:10px
}
.DiscussionPage .PostUser-level .levelbar{
margin-top:0;
z-index:11;
background:@primary-color;
border-radius:10px;
height:10px
}
}
.Post--hidden {
.PostUser-level{display:none}
.PostUser-level .levelbar-empty{display:none}
.PostUser-level .levelbar{display:none}
}
The above changes apply only to 0.1.0 beta7-flarum 0.1.0 beta7.1
