bounty: css changed

- vertical aligned activity section - Changed Kill Bounty -> Cancelled Bounty - Changed Order of Cancel Bounty & Add contribution - updated tooltip text - refactored code - gave breathing space to bounty_info - changed contribute button to white
gitcoinco · Mar 27, 2018 · 2b92a02 · 2b92a02
1 parent d395926
commit 2b92a02
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 51 deletions.
diff --git a/app/assets/v2/css/bounty.css b/app/assets/v2/css/bounty.css
@@ -33,7 +33,7 @@ body {
 }
 
 .box {
-  padding: 1em;
+  padding: 14px;
   border: 1px solid #DBDBDB;
   border-radius: 3px;
   margin: 0;
@@ -93,7 +93,7 @@ body {
 
 .bounty-info div {
   display: inline;
-  margin-right: .6em;
+  margin-right: 15px;
   font-family: "Muli-Light";
 }
 
@@ -180,7 +180,7 @@ body {
 
 .contributor-box svg {
   font-size: 24px;
-  margin-top: .8em;
+  margin-top: 15px;
   margin-bottom: 10px;
   color: #333333;
 }
@@ -189,6 +189,11 @@ a.btn{
   border-radius: 0.2rem;
 }
 
+.funder-avatar,
+.activity-avatar {
+  text-align: center;
+}
+
 #right_actions,
 #github-link {
   display: inline;
@@ -201,19 +206,19 @@ a.btn{
 }
 
 #right_actions .button--primary,
-#github-btn {
+#btn-white {
   padding: 6px 15px;
   box-shadow: none;
   font-size: 12px;
 }
 
-#github-btn {
+#btn-white {
   border: 1px solid #979797;
   color: #0D0764;
   border-radius: 3px;
 }
 
-#github-btn .github-comment {
+#btn-white .github-comment {
   border-left: 1px solid #979797;
   padding-left: 12px;
   margin-left: 5px;
@@ -223,6 +228,11 @@ a.btn{
   margin-bottom: 10px;
 }
 
+.funder-avatar,
+.activity div {
+  margin: auto;
+}
+
 .fulfilled .activity-status {
   margin-bottom: 10px;
 }
@@ -232,10 +242,6 @@ a.btn{
   color: #717171;
 }
 
-.activity-avatar {
-  text-align: center;
-}
-
 .activity .activity-status svg {
   margin-left: 10px;
   color: #0ECF7C;

diff --git a/app/assets/v2/js/pages/bounty_details.js b/app/assets/v2/js/pages/bounty_details.js
@@ -129,6 +129,9 @@ var callbacks = {
     var keywords = result.metadata.issueKeywords.split(',');
     var tags = [];
 
+    if (result.metadata.issueKeywords.length == 0)
+      return [ 'issue_keywords', null ];
+
     keywords.forEach(function(keyword) {
       tags.push('<a href="/explorer/?q=' + keyword.trim() + '"><div class="tag keyword">' + keyword + '</div></a>');
     });
@@ -431,28 +434,6 @@ var do_actions = function(result) {
     // actions
     var actions = [];
 
-    if (show_github_link) {
-
-      var github_url = result['github_url'];
-
-      // hack to get around the renamed repo for piper's work.  can't change the data layer since blockchain is immutable
-      github_url = github_url.replace('pipermerriam/web3.py', 'ethereum/web3.py');
-      github_url = github_url.replace('ethereum/browser-solidity', 'ethereum/remix-ide');
-      var github_tooltip = 'Github is where the issue scope lives.  Its also a great place to collaborate with, and get to know, other developers (and sometimes even the repo maintainer themselves!).';
-
-      if (result['github_comments']) {
-        $('#github-link').html(
-          ('<span title="').concat("<div class='tooltip-info tooltip-sm'>") + github_tooltip + '</div>"><a class="btn btn-small font-caption" role="button" target="_blank" id="github-btn" href="' +
-            github_url + ('">View On Github').concat('<span class="github-comment">') + result['github_comments'] + '</span></a></span>'
-        );
-      } else {
-        $('#github-link').html(
-          ('<span title="').concat("<div class='tooltip-info tooltip-sm'>") + github_tooltip + '</div>"><a class="btn btn-small font-caption" role="button" target="_blank" id="github-btn" href="' +
-            github_url + ('">View On Github').concat('</a></span>')
-        );
-      }
-    }
-
     if (show_start_stop_work) {
 
       // is enabled
@@ -462,7 +443,7 @@ var do_actions = function(result) {
         href: is_interested ? '/uninterested' : '/interested',
         text: is_interested ? 'Stop Work' : 'Start Work',
         parent: 'right_actions',
-        title: 'Start Work in an issue to let the issue funder know that youre starting work on this issue.'
+        title: is_interested ? 'Notify the funder that you will not be working on this project' : 'Notify the funder that you would like to take on this project'
       };
 
       actions.push(interest_entry);
@@ -477,20 +458,7 @@ var do_actions = function(result) {
         href: '/funding/fulfill?source=' + result['github_url'],
         text: 'Submit Work',
         parent: 'right_actions',
-        title: 'Use Submit Work when you FINISH work on a bounty. '
-      };
-
-      actions.push(_entry);
-    }
-
-    if (show_increase_bounty) {
-      var enabled = increase_bounty_enabled;
-      var _entry = {
-        enabled: enabled,
-        href: '/funding/increase?source=' + result['github_url'],
-        text: 'Add Contribution',
-        parent: 'right_actions',
-        title: 'Increase the funding of this bounty'
+        title: 'Submit work for the funder to review'
       };
 
       actions.push(_entry);
@@ -501,9 +469,9 @@ var do_actions = function(result) {
       var _entry = {
         enabled: enabled,
         href: '/funding/kill?source=' + result['github_url'],
-        text: 'Kill Bounty',
+        text: 'Cancel Bounty',
         parent: 'right_actions',
-        title: 'Use Kill Bounty if you want to CANCEL your bounty'
+        title: 'Cancel bounty and reclaim funds for this issue'
       };
 
       actions.push(_entry);
@@ -525,8 +493,42 @@ var do_actions = function(result) {
       actions.push(_entry);
     }
 
-    render_actions(actions);
+    if (show_increase_bounty) {
+      var enabled = increase_bounty_enabled;
+      var _entry = {
+        enabled: enabled,
+        href: '/funding/increase?source=' + result['github_url'],
+        text: 'Add Contribution',
+        parent: 'right_actions',
+        title: 'Increase the funding for this issue',
+        color: 'white'
+      };
+
+      actions.push(_entry);
+    }
+
+    if (show_github_link) {
+      var github_url = result['github_url'];
+      // hack to get around the renamed repo for piper's work.  can't change the data layer since blockchain is immutable
 
+      github_url = github_url.replace('pipermerriam/web3.py', 'ethereum/web3.py');
+      github_url = github_url.replace('ethereum/browser-solidity', 'ethereum/remix-ide');
+      var github_tooltip = 'View issue details and comments on Github';
+
+      var _entry = {
+        enabled: true,
+        href: github_url,
+        text: 'View On Github',
+        parent: 'github-link',
+        title: 'View issue details and comments on Github',
+        comments: result['github_comments'],
+        color: 'white'
+      };
+
+      actions.push(_entry);
+    }
+
+    render_actions(actions);
   });
 };
 

diff --git a/app/dashboard/templates/bounty_details.html b/app/dashboard/templates/bounty_details.html
@@ -142,7 +142,7 @@ <h5 class="bounty-heading">All Activity</h5>
             <div class="col-12">
               <h5 class="bounty-heading">Funder</h5>
               <div class="row box">
-                <div class="col-12 col-md-1">
+                <div class="col-12 col-md-1 funder-avatar">
                   <div id="avatar_url"></div>
                 </div>
                 <div class="col-12 col-md-11">
@@ -174,6 +174,19 @@ <h5 class="bounty-heading">Funder</h5>
             <a class="button button--primary accept" role="button" href="[[:href]]" target="[[:target]]">
               <span class="font-caption">[[:text]] ( [[:pending_acceptance]] )</span>
             </a>
+          [[else color == 'white']]
+            <a class="btn btn-small" id="btn-white" role="button" href="[[:href]]" target="[[:target]]">
+              [[if comments]]
+                <span class="font-caption">
+                  [[:text]]
+                  <span class="github-comment">
+                    [[:comments]]
+                  </span>
+                </span>
+              [[else]]
+                <span class="font-caption">[[:text]]</span>
+              [[/if]]
+            </a>
           [[else]]
             <a class="button button--primary" role="button" href="[[:href]]" target="[[:target]]">
               <span class="font-caption">[[:text]]</span>