From cc7ecb8a06f0dcb67b9eca8e6818cfef11d8dc59 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Thu, 17 May 2018 12:02:24 +1000
Subject: [PATCH] FIX: hyperlinks did not work in category boxes

---
 .../components/categories-boxes.js.es6        | 10 ++++++
 .../templates/components/categories-boxes.hbs | 32 +++++++++----------
 .../common/base/category-list.scss            |  1 +
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/categories-boxes.js.es6 b/app/assets/javascripts/discourse/components/categories-boxes.js.es6
index fc63667da2c..7f364b9d9e2 100644
--- a/app/assets/javascripts/discourse/components/categories-boxes.js.es6
+++ b/app/assets/javascripts/discourse/components/categories-boxes.js.es6
@@ -1,4 +1,5 @@
 import computed from 'ember-addons/ember-computed-decorators';
+import DiscourseURL from 'discourse/lib/url';
 
 export default Ember.Component.extend({
   tagName: "section",
@@ -8,5 +9,14 @@ export default Ember.Component.extend({
   anyLogos() {
     return this.get("categories").any((c) => { return !Ember.isEmpty(c.get('uploaded_logo.url')); });
     return this.get("categories").any(c => !Ember.isEmpty(c.get('uploaded_logo.url')));
+  },
+
+  click(e) {
+    if (!$(e.target).is('a')) {
+      const url = $(e.target).closest('.category-box').data("url");
+      if (url) {
+        DiscourseURL.routeTo(url);
+      }
+    }
   }
 });
diff --git a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
index c473668648f..0c90a54a03f 100644
--- a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
+++ b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
@@ -1,24 +1,22 @@
 {{#each categories as |c|}}
-  <div class='category-box category-box-{{unbound c.slug}}' style={{border-color c.color}}>
+  <div class='category-box category-box-{{unbound c.slug}}' style={{border-color c.color}} data-url={{c.url}}>
     <div class='category-box-inner'>
-      <a href={{c.url}}>
-        <div class='category-box-heading'>
-          {{#if c.uploaded_logo.url}}
-            {{cdn-img src=c.uploaded_logo.url class="logo"}}
+      <div class='category-box-heading'>
+        {{#if c.uploaded_logo.url}}
+          {{cdn-img src=c.uploaded_logo.url class="logo"}}
+        {{/if}}
+
+        <h3>
+          {{#if c.read_restricted}}
+            {{d-icon 'lock'}}
           {{/if}}
+          {{c.name}}
+        </h3>
+      </div>
 
-          <h3>
-            {{#if c.read_restricted}}
-              {{d-icon 'lock'}}
-            {{/if}}
-            {{c.name}}
-          </h3>
-        </div>
-
-        <div class='description'>
-          {{{text-overflow class="overflow" text=c.description_excerpt}}}
-        </div>
-      </a>
+      <div class='description'>
+        {{{text-overflow class="overflow" text=c.description_excerpt}}}
+      </div>
     </div>
   </div>
 {{/each}}
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index ff00a121167..ebd131dadbb 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -26,6 +26,7 @@
     display: flex;
     flex-direction: row;
     align-content: flex-start;
+    cursor: pointer;
 
     box-sizing: border-box;