From: Dessalines <tyhou13@gmx.com>
Date: Tue, 2 Feb 2021 17:12:16 +0000 (-0500)
Subject: Adding tippy to active users badges. Fixes #150
X-Git-Url: http://these/git/%7B%24%7B%60data:application/%22%7Burl%7D/readmes/static/%7BallRss%7D?a=commitdiff_plain;h=6a75db688759cfda574bf7e9b6335ff3f3f2230e;p=lemmy-ui.git

Adding tippy to active users badges. Fixes #150
---

diff --git a/src/shared/components/main.tsx b/src/shared/components/main.tsx
index b83d671..a99aa5e 100644
--- a/src/shared/components/main.tsx
+++ b/src/shared/components/main.tsx
@@ -426,25 +426,47 @@ export class Main extends Component<any, MainState> {
         <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_online', { count: this.state.siteRes.online })}
         </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', {
             count: counts.users_active_day,
           })}{' '}
           / {i18n.t('day')}
         </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', {
             count: counts.users_active_week,
           })}{' '}
           / {i18n.t('week')}
         </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', {
             count: counts.users_active_month,
           })}{' '}
           / {i18n.t('month')}
         </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', {
             count: counts.users_active_half_year,
           })}{' '}
diff --git a/src/shared/components/sidebar.tsx b/src/shared/components/sidebar.tsx
index 324f3ea..03675dd 100644
--- a/src/shared/components/sidebar.tsx
+++ b/src/shared/components/sidebar.tsx
@@ -149,25 +149,47 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_online', { count: this.props.online })}
         </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', {
             count: counts.users_active_day,
           })}{' '}
           / {i18n.t('day')}
         </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', {
             count: counts.users_active_week,
           })}{' '}
           / {i18n.t('week')}
         </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', {
             count: counts.users_active_month,
           })}{' '}
           / {i18n.t('month')}
         </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', {
             count: counts.users_active_half_year,
           })}{' '}