Revert "Revert "Add striped category badges under title""

This reverts commit 85b6b2550e.

app/assets/javascripts/discourse/lib/html.js

@@ -92,6 +92,9 @@ Discourse.HTML = {
         html = "<" + elem + " href=\"" + (opts.link === false ? '' : url) + "\" ",
         categoryStyle;
 
+    // Parent stripe implies onlyStripe
+    if (opts.onlyStripe) { opts.showParent = true; }
+
     html += "data-drop-close=\"true\" class=\"badge-category" + (restricted ? ' restricted' : '' ) +
             (opts.onlyStripe ? ' clear-badge' : '') +
             extraClasses + "\" ";
@@ -113,8 +116,10 @@ Discourse.HTML = {
       html += ">" + name + "</" + elem + ">";
     }
 
-    if (opts.showParent && category.get('parent_category_id')) {
+    if (opts.onlyStripe || (opts.showParent && category.get('parent_category_id'))) {
       var parent = Discourse.Category.findById(category.get('parent_category_id'));
+      if (!parent) { parent = category; }
+
       categoryStyle = Discourse.HTML.categoryStyle(opts.onlyStripe ? category : parent) || '';
       html = "<span class='badge-wrapper'><" + elem + " class='badge-category-parent" + extraClasses + "' style=\"" + categoryStyle + 
              "\" href=\"" + (opts.link === false ? '' : url) + "\"><span class='category-name'>" +

app/assets/javascripts/discourse/templates/header.hbs

@@ -94,7 +94,7 @@
 
     {{#if showExtraInfo}}
       <div class="extra-info-wrapper">
-        <div class="extra-info">
+        <div {{bind-attr class=":extra-info topic.category.isUncategorizedCategory::has-category"}}>
           {{#if showStarButton}}
             <a {{bind-attr class=":star topic.starred:starred"}} {{action "toggleStar"}} href='#' {{bind-attr title="topic.starTooltip"}}></a>
           {{/if}}
@@ -116,9 +116,9 @@
             {{/if}}
           </h1>
           {{#if topic.category.parentCategory}}
-            {{bound-category-link topic.category.parentCategory}}
+            {{bound-category-link topic.category.parentCategory onlyStripe="true"}}
           {{/if}}
-          {{bound-category-link topic.category}}
+          {{bound-category-link topic.category onlyStripe="true"}}
         </div>
         </div>
       </div>

app/assets/stylesheets/desktop/topic-post.scss

@@ -540,12 +540,17 @@ iframe {
   }
 }
 
+.extra-info.has-category {
+  h1 {
+    line-height: 1.0em;
+  }
+}
+
 .extra-info {
   h1 {
     margin: 5px 0 0 0;
     font-size: 1.6em;
     line-height: 1.3em;
-
   }
 
   a.star {
@@ -561,15 +566,20 @@ iframe {
     margin-top: -2px;
   }
 
-  .badge-category {
-    border-left: 5px solid;
-    border-color: #aaa;
-    font-weight: normal;
-    text-transform: lowercase;
-    padding: 0 0 0 5px;
-    margin: 0 5px 0 1px;
-    vertical-align: top;
+  .badge-wrapper {
+    margin: 0;
+    padding: 0;
 
+    .badge-category {
+      color: $primary;
+      padding: 0 0 0 3px;
+      margin-right: 5px;
+    }
+
+    .badge-category-parent {
+      margin: 0;
+      padding: 0px 1px;
+    }
   }
 
   .title-wrapper {