COSMETIC: visual tweaks to the categories page

app/assets/javascripts/discourse/helpers/application_helpers.js

@@ -61,6 +61,7 @@ function categoryLinkHTML(category, options) {
   if (options.hash) {
     if (options.hash.allowUncategorized) { categoryOptions.allowUncategorized = true; }
     if (options.hash.showParent) { categoryOptions.showParent = true; }
+    if (options.hash.clearChildColor) { categoryOptions.clearChildColor = true; }
     if (options.hash.link !== undefined) { categoryOptions.link = options.hash.link; }
     if (options.hash.extraClasses) { categoryOptions.extraClasses = options.hash.extraClasses; }
     if (options.hash.categories) {

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

@@ -92,14 +92,17 @@ Discourse.HTML = {
         html = "<" + elem + " href=\"" + (opts.link === false ? '' : url) + "\" ";
 
     html += "data-drop-close=\"true\" class=\"badge-category" + (restricted ? ' restricted' : '' ) +
+            (opts.clearChildColor ? ' clear-badge' : '') +
             extraClasses + "\" ";
     name = Handlebars.Utils.escapeExpression(name);
     // Add description if we have it
     if (description) html += "title=\"" + Handlebars.Utils.escapeExpression(description) + "\" ";
 
-    var categoryStyle = Discourse.HTML.categoryStyle(category);
-    if (categoryStyle) {
-      html += "style=\"" + categoryStyle + "\" ";
+    if (!opts.clearChildColor) {
+      var categoryStyle = Discourse.HTML.categoryStyle(category);
+      if (categoryStyle) {
+        html += "style=\"" + categoryStyle + "\" ";
+      }
     }
 
     if (restricted) {

app/assets/javascripts/discourse/routes/application_routes.js

@@ -48,7 +48,7 @@ Discourse.Route.buildRoutes(function() {
     this.route('categories');
 
     // default filter for a category
-    this.route('category', { path: '/category/:slug' });
+    this.route('parentCategory', { path: '/category/:slug' });
     this.route('categoryNone', { path: '/category/:slug/none' });
     this.route('category', { path: '/category/:parentSlug/:slug' });
 

app/assets/javascripts/discourse/routes/discovery_route_builders.js

@@ -179,6 +179,7 @@ function buildCategoryRoute(filter, params) {
 // Finally, build all the routes with the helpers we created
 Discourse.addInitializer(function() {
   Discourse.DiscoveryCategoryRoute = buildCategoryRoute('latest');
+  Discourse.DiscoveryParentCategoryRoute = buildCategoryRoute('latest');
   Discourse.DiscoveryCategoryNoneRoute = buildCategoryRoute('latest', {no_subcategories: true});
 
   Discourse.Site.currentProp('filters').forEach(function(filter) {

app/assets/javascripts/discourse/templates/discovery/categories.js.handlebars

@@ -14,11 +14,12 @@
       <tbody>
         {{#each model.categories}}
         <tr data-category_id='{{unbound id}}' {{bind-attr class="description_excerpt:has-description:no-description"}}>
-          <td class='category'>
+          <td class='category' style="border-left: 6px solid #{{unbound color}}">
             <div>
               <div class="pull-left">
                 {{#if controller.ordering}}<i class="fa fa-bars"></i>{{/if}}
-                {{category-link this allowUncategorized=true extraClasses="bigger"}}
+
+                <h3>{{#link-to 'discovery.parentCategory' this}}{{unbound name}}{{/link-to}}</h3>
                 {{#if unreadTopics}}
                   <a href={{unbound unreadUrl}} class='badge new-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unbound unreadTopics}}</a>
                 {{/if}}
@@ -26,11 +27,6 @@
                   <a href={{unbound newUrl}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{i18n filters.new.lower_title_with_count count="newTopics"}}</a>
                 {{/if}}
               </div>
-              <div class='featured-users'>
-                {{#each featured_users}}
-                  <a href="/users/{{unbound username_lower}}">{{avatar this imageSize="small"}}</a>
-                {{/each}}
-              </div>
               <div class="clearfix"></div>
             </div>
             {{#if description_excerpt}}
@@ -41,7 +37,7 @@
             {{#if subcategories}}
               <div class='subcategories'>
                 {{#each subcategories}}
-                  {{category-link this showParent=true}}
+                  {{category-link this showParent=true clearChildColor=true}}
                   {{#if unreadTopics}}
                     <a href={{unbound unreadUrl}} class='badge new-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unbound unreadTopics}}</a>
                   {{/if}}

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

@@ -63,9 +63,6 @@
   .fa-thumb-tack {color: $primary;}
   .fa-thumb-tack.unpinned {color: $primary;}
 
-  a.title {color: $primary;}
-  a.title:visited:not(.badge-notification) {color: scale-color($primary, $lightness: 35%);}
-
   > tbody > tr {
     &:nth-child(even) {
         background-color: darken($secondary, 3%);
@@ -292,6 +289,13 @@
     position: relative;
     width: 45%;
 
+    h3 {
+      display: inline-block;
+      font-size: 18px;
+      a[href] {
+        color: $primary;
+      }
+    }
     .subcategories {
       margin-top: 10px;
     }
@@ -302,6 +306,9 @@
     .category-description {
       margin-top: 10px;
     }
+    .clear-badge {
+      color: $primary;
+    }
     .badge-category.bigger {
       padding: 6px 10px;
       font-size: 14px;