change data and avoid overlap popovers

gitcoinco · Sep 6, 2019 · 3ea9b33 · 3ea9b33
1 parent 6ddff59
commit 3ea9b33
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/app/assets/v2/js/user_popover.js b/app/assets/v2/js/user_popover.js
@@ -1,39 +1,40 @@
 let popoverData = [];
 
-const renderPopOverData = profile => {
-  let contributed_to = Object.keys(profile.contributed_to).map((_organization, index) => {
+const renderPopOverData = data => {
+  console.log(data)
+  let contributed_to = data.contributed_to.map((_organization, index) => {
     if (index < 3) {
       return `<img src="/dynamic/avatar/${_organization}" alt="${_organization}"
         class="rounded-circle" width="24" height="24">`;
     }
-    return `<span class="m-1">+${Object.keys(profile.contributed_to).length - 3}</span>`;
+    return `<span class="m-1">+${data.contributed_to.length - 3}</span>`;
   }).join(' ');
 
   return `
     <div class="popover-bounty__content">
       <div class="mb-2">
-        <img src="${profile.avatar_url}" width="35" class="rounded-circle">
-        <p class="ml-3 d-inline font-body my-auto font-weight-semibold">${profile.handle}</p>
+        <img src="${data.avatar}" width="35" class="rounded-circle">
+        <p class="ml-3 d-inline font-body my-auto font-weight-semibold">${data.handle}</p>
         ${contributed_to.length ? '<span class="my-auto">Contributes to: </span>' + contributed_to : ''}
       </div>
 
       <div class="stats">
         <div class="stat-card d-inline">
-          <h2>${profile.stats.position}</h2>
+          <h2>${data.stats.position}</h2>
           <p>contributor</p>
         </div>
         <div class="stat-card d-inline">
-          <h2>${profile.stats.success_rate}</h2>
+          <h2>${data.stats.success_rate}</h2>
           <p>success rate</p>
         </div>
         <div class="stat-card d-inline">
-          <h2>${profile.stats.earnings ? Number(profile.stats.earnings).toFixed(4) : 0} ETH</h2>
-          <p>collected from ${profile.stats.completed_bounties} bounties</p>
+          <h2>${data.stats.earnings ? Number(data.stats.earnings).toFixed(4) : 0} ETH</h2>
+          <p>collected from ${data.stats.completed_bounties} bounties</p>
         </div>
       </div>
 
-      <p>Bounties completed related to ${profile.keywords.slice(0, 3).toString()}</p>
-      ${profile.related_bounties ?
+      <p>Bounties completed related to ${data.keywords.slice(0, 3).toString()}</p>
+      ${data.related_bounties ?
     '<ul><li>// TODO: LOOP THROUGH TITLE</li></ul>'
     :
     '<p>None</p>'
@@ -44,7 +45,8 @@ const renderPopOverData = profile => {
 };
 
 function openContributorPopOver(contributor, element) {
-  const contributorURL = `/api/v0.1/profile/${contributor}`;
+  const keywords = document.result.keywords;
+  const contributorURL = `/api/v0.1/profile/${contributor}?keywords=${keywords}`;
 
   if (popoverData.filter(index => index[contributor]).length === 0) {
     fetch(contributorURL, { method: 'GET' })
@@ -85,4 +87,4 @@ function openContributorPopOver(contributor, element) {
     });
     $(element).popover('show');
   }
-}
+}
diff --git a/app/dashboard/templates/bounty/details.html b/app/dashboard/templates/bounty/details.html
@@ -488,6 +488,9 @@ <h3>{{ noscript.keywords }}</h3>
     $("body").on("mouseover", "[data-username]", function(e) {
       openContributorPopOver($(this).data("username"), $(this));
     });
+    $("body").on("mouseout", "[data-username]", function(e) {
+      $(this).popover('dispose');
+    });
   </script>
   <script src="{% static "v2/js/lib/daterangepicker.min.js" %}"></script>
   <script src="{% static "v2/js/pages/bounty_funder_payout_reminder.js" %}"></script>