FIX: external hyperlinks broken in badge cards

also, we were allowing nesting of A tags which is not really allowed

app/assets/javascripts/discourse/components/badge-card.js.es6

@@ -1,8 +1,27 @@
 import computed from 'ember-addons/ember-computed-decorators';
+import DiscourseURL from 'discourse/lib/url';
 
 export default Ember.Component.extend({
   size: 'medium',
-  classNameBindings: [':badge-card', 'size'],
+  classNameBindings: [':badge-card', 'size', 'navigateOnClick:hyperlink'],
+
+  click(e){
+    if (e.target && e.target.nodeName === "A") {
+      return true;
+    }
+
+    if (!this.get('navigateOnClick')) {
+      return false;
+    }
+
+    var url = this.get('badge.url');
+    const username = this.get('username');
+    if (username) {
+      url = url + "?username=" + encodeURIComponent(username);
+    }
+    DiscourseURL.routeTo(url);
+    return true;
+  },
 
   @computed('count', 'badge.grant_count')
   displayCount(count, grantCount) {

app/assets/javascripts/discourse/templates/badges/index.hbs

@@ -9,9 +9,7 @@
         </div>
 
         {{#each bg.badges as |b|}}
-          {{#link-to 'badges.show' b.id b.slug (query-params username=null)}}
+          {{badge-card badge=b navigateOnClick="true"}}
-            {{badge-card badge=b}}
-          {{/link-to}}
         {{/each}}
       </div>
     {{/each}}

app/assets/javascripts/discourse/templates/user/badges.hbs

@@ -1,7 +1,5 @@
 <section class='user-content user-badges-list'>
   {{#each controller as |ub|}}
-    {{#link-to 'badges.show' ub.badge.id ub.badge.slug (query-params username=user.username_lower)}}
+    {{badge-card badge=ub.badge count=ub.count navigateOnClick="true" username=user.username_lower}}
-      {{badge-card badge=ub.badge count=ub.count}}
-    {{/link-to}}
   {{/each}}
 </section>

app/assets/stylesheets/common/base/user-badges.scss

@@ -246,3 +246,6 @@
   background-color: $danger;
 }
 
+.hyperlink {
+  cursor: pointer;
+}