FIX: semantic HTML for category with images

discourse · Dec 15, 2014 · a014507 · a014507
1 parent ed54ea6
commit a014507
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/app/assets/javascripts/discourse/components/category-title-link.js.es6 b/app/assets/javascripts/discourse/components/category-title-link.js.es6
@@ -3,19 +3,17 @@ export default Em.Component.extend({
 
   render: function(buffer) {
     var category = this.get('category'),
-        logoUrl = category.get('logo_url');
+        logoUrl = category.get('logo_url'),
+        categoryUrl = Discourse.getURL('/c/') + Discourse.Category.slugFor(category),
+        categoryName = Handlebars.Utils.escapeExpression(category.get('name'));
 
-    if (category.get('read_restricted')) {
-      buffer.push("<i class='fa fa-group'></i> ");
-    }
+    if (category.get('read_restricted')) { buffer.push("<i class='fa fa-group'></i>"); }
 
-    buffer.push("<a href='" + Discourse.getURL('/c/') + Discourse.Category.slugFor(category) + "'>");
+    buffer.push("<a href='" + categoryUrl + "'>");
+    buffer.push("<span class='category-name'>" + categoryName + "</span>");
+
+    if (!Em.isEmpty(logoUrl)) { buffer.push("<img src='" + logoUrl + "' class='category-logo'>"); }
 
-    var noLogo = Em.isEmpty(logoUrl);
-    buffer.push(Handlebars.Utils.escapeExpression(category.get('name')));
-    if (!noLogo) {
-      buffer.push("<br><img src='" + logoUrl + "' class='category-logo'>");
-    }
     buffer.push("</a>");
   }
 });
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
@@ -312,6 +312,11 @@ button.dismiss-read {
     font-size: 1.5em;
   }
 }
+
+.category-name {
+  display: block;
+}
+
 .category-logo {
   max-height: 150px;
   float: left;