Adding tippy to active users badges. Fixes #150

This commit is contained in:
Dessalines 2021-02-02 12:12:16 -05:00
parent e67ee746a2
commit 6a75db6887
2 changed files with 52 additions and 8 deletions

View file

@ -426,25 +426,47 @@ export class Main extends Component<any, MainState> {
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-secondary">
{i18n.t('number_online', { count: this.state.siteRes.online })} {i18n.t('number_online', { count: this.state.siteRes.online })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li
className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t('number_of_users', {
count: counts.users_active_day,
})} ${i18n.t('active_in_the_last')} ${i18n.t('day')}`}
>
{i18n.t('number_of_users', { {i18n.t('number_of_users', {
count: counts.users_active_day, count: counts.users_active_day,
})}{' '} })}{' '}
/ {i18n.t('day')} / {i18n.t('day')}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li
className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t('number_of_users', {
count: counts.users_active_week,
})} ${i18n.t('active_in_the_last')} ${i18n.t('week')}`}
>
{i18n.t('number_of_users', { {i18n.t('number_of_users', {
count: counts.users_active_week, count: counts.users_active_week,
})}{' '} })}{' '}
/ {i18n.t('week')} / {i18n.t('week')}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li
className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t('number_of_users', {
count: counts.users_active_month,
})} ${i18n.t('active_in_the_last')} ${i18n.t('month')}`}
>
{i18n.t('number_of_users', { {i18n.t('number_of_users', {
count: counts.users_active_month, count: counts.users_active_month,
})}{' '} })}{' '}
/ {i18n.t('month')} / {i18n.t('month')}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li
className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t('number_of_users', {
count: counts.users_active_half_year,
})} ${i18n.t('active_in_the_last')} ${i18n.t('number_of_months', {
count: 6,
})}`}
>
{i18n.t('number_of_users', { {i18n.t('number_of_users', {
count: counts.users_active_half_year, count: counts.users_active_half_year,
})}{' '} })}{' '}

View file

@ -149,25 +149,47 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-secondary">
{i18n.t('number_online', { count: this.props.online })} {i18n.t('number_online', { count: this.props.online })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li
className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t('number_of_users', {
count: counts.users_active_day,
})} ${i18n.t('active_in_the_last')} ${i18n.t('day')}`}
>
{i18n.t('number_of_users', { {i18n.t('number_of_users', {
count: counts.users_active_day, count: counts.users_active_day,
})}{' '} })}{' '}
/ {i18n.t('day')} / {i18n.t('day')}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li
className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t('number_of_users', {
count: counts.users_active_week,
})} ${i18n.t('active_in_the_last')} ${i18n.t('week')}`}
>
{i18n.t('number_of_users', { {i18n.t('number_of_users', {
count: counts.users_active_week, count: counts.users_active_week,
})}{' '} })}{' '}
/ {i18n.t('week')} / {i18n.t('week')}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li
className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t('number_of_users', {
count: counts.users_active_month,
})} ${i18n.t('active_in_the_last')} ${i18n.t('month')}`}
>
{i18n.t('number_of_users', { {i18n.t('number_of_users', {
count: counts.users_active_month, count: counts.users_active_month,
})}{' '} })}{' '}
/ {i18n.t('month')} / {i18n.t('month')}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li
className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t('number_of_users', {
count: counts.users_active_half_year,
})} ${i18n.t('active_in_the_last')} ${i18n.t('number_of_months', {
count: 6,
})}`}
>
{i18n.t('number_of_users', { {i18n.t('number_of_users', {
count: counts.users_active_half_year, count: counts.users_active_half_year,
})}{' '} })}{' '}