remove extra border

app/assets/javascripts/discourse/app/helpers/cold-age-class.js

@@ -1,35 +0,0 @@
-import { helperContext, registerUnbound } from "discourse-common/lib/helpers";
-
-function daysSinceEpoch(dt) {
-  // 1000 * 60 * 60 * 24 = days since epoch
-  return dt.getTime() / 86400000;
-}
-
-registerUnbound("cold-age-class", function (dt, params) {
-  let className = params["class"] || "age";
-
-  if (!dt) {
-    return className;
-  }
-
-  let startDate = params.startDate || new Date();
-
-  // Show heat on age
-  let nowDays = daysSinceEpoch(startDate),
-    epochDays = daysSinceEpoch(new Date(dt));
-
-  let siteSettings = helperContext().siteSettings;
-  if (nowDays - epochDays > siteSettings.cold_age_days_high) {
-    return className + " coldmap-high";
-  }
-  if (nowDays - epochDays > siteSettings.cold_age_days_medium) {
-    return className + " coldmap-med";
-  }
-  if (nowDays - epochDays > siteSettings.cold_age_days_low) {
-    return className + " coldmap-low";
-  }
-
-  return className;
-});
-
-export { daysSinceEpoch };

app/assets/javascripts/discourse/app/templates/components/category-title-link.hbs

@@ -5,6 +5,16 @@
       {{d-icon this.lockIcon}}
     {{/if}}
     <span class="category-name">{{dir-span this.category.name}}</span>
+    {{#if this.site.mobileView}}
+      <div class="category-stat">
+        {{html-safe this.category.statTotal}}
+      </div>
+      {{#unless this.category.pickAll}}
+        <div class="category-stat">
+          {{html-safe this.category.stat}}
+        </div>
+      {{/unless}}
+    {{/if}}
   </div>
   {{#if this.category.uploaded_logo.url}}
     <CategoryLogo @category={{this.category}} />

app/assets/javascripts/discourse/app/templates/components/mobile-category-topic.hbs

@@ -5,7 +5,7 @@
     {{#if this.topic.unseen}}
       <span class="badge-notification new-topic"></span>
     {{/if}}
-    <span class={{cold-age-class this.topic.last_posted_at}} title={{raw-date this.topic.last_posted_at}}>{{format-age this.topic.last_posted_at}}</span>
+    <span class="age" title={{raw-date this.topic.last_posted_at}}>{{format-age this.topic.last_posted_at}}</span>
   </div>
 </td>
 <td class="num posts">{{raw "list/post-count-or-badges" topic=this.topic postBadgesEnabled="true"}}</td>

app/assets/javascripts/discourse/app/templates/list/activity-column.hbr

@@ -1,4 +1,4 @@
-<{{tagName}} class="{{class}} {{cold-age-class topic.createdAt startDate=topic.bumpedAt class=""}} activity" title="{{html-safe topic.bumpedAtTitle}}">
+<{{tagName}} class="{{class}} age activity" title="{{html-safe topic.bumpedAtTitle}}">
   <a class="post-activity" href="{{topic.lastPostUrl}}">
     {{~raw-plugin-outlet name="topic-list-before-relative-date"~}}
     {{~format-date topic.bumpedAt format="tiny" noTitle="true"~}}

app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row.hbs

@@ -4,8 +4,23 @@
     <table class="topic-list">
       <tbody>
         <tr>
-          <th class="main-link">
+          <th class="main-link" colspan="2">
             <CategoryTitleLink @category={{this.category}} />
+            {{#if this.category.isGrandParent}}
+              {{#each this.category.subcategories as |subcategory|}}
+                <SubCategoryRow @category={{subcategory}} @listType={{this.listType}} />
+              {{/each}}
+            {{else if this.category.subcategories}}
+              <tr class="subcategories-list">
+                <td>
+                  <div class="subcategories">
+                    {{#each this.category.subcategories as |subcategory|}}
+                      <SubCategoryItem @category={{subcategory}} @listType={{this.listType}} />
+                    {{/each}}
+                  </div>
+                </td>
+              </tr>
+            {{/if}}
           </th>
         </tr>
         {{#if this.category.description_excerpt}}
@@ -22,36 +37,7 @@
             {{/each}}
           {{/if}}
         {{/unless}}
-        {{#if this.category.isGrandParent}}
-          {{#each this.category.subcategories as |subcategory|}}
-            <SubCategoryRow @category={{subcategory}} @listType={{this.listType}} />
-          {{/each}}
-        {{else if this.category.subcategories}}
-          <tr class="subcategories-list">
-            <td>
-              <div class="subcategories">
-                {{#each this.category.subcategories as |subcategory|}}
-                  <SubCategoryItem @category={{subcategory}} @listType={{this.listType}} />
-                {{/each}}
-              </div>
-            </td>
-          </tr>
-        {{/if}}
       </tbody>
     </table>
-    <footer class="clearfix category-topics-count">
-      <div class="category-stat">
-        <a href={{this.category.url}}>
-          {{html-safe this.category.statTotal}}
-        </a>
-      </div>
-      {{#unless this.category.pickAll}}
-        <div class="category-stat">
-          <a href={{this.category.url}}>
-            {{html-safe this.category.stat}}
-          </a>
-        </div>
-      {{/unless}}
-    </footer>
   </div>
 {{/unless}}

app/assets/stylesheets/mobile/_index.scss

@@ -6,6 +6,7 @@
 @import "admin_reports";
 @import "alert";
 @import "buttons";
+@import "categories";
 @import "compose";
 @import "dashboard";
 @import "directory";

app/assets/stylesheets/mobile/categories.scss

@@ -0,0 +1,161 @@
+.categories-list .category-list {
+  td {
+    padding: 0.75em 1.5em 0.75em 0;
+    color: var(--primary-medium);
+  }
+  th {
+    padding: 0.75em 0;
+    .category-stat {
+      font-size: var(--font-down-3);
+      font-weight: normal;
+      margin-left: auto;
+      color: var(--primary-medium);
+    }
+  }
+  tr {
+    border-bottom: none;
+  }
+  tbody {
+    border-top: none;
+  }
+}
+
+.category-list-item {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-top-color: var(--primary-low) !important; // overrides inline style
+  border-bottom-color: var(--primary-low) !important; // overrides inline style
+  margin: 1em 0 2em;
+
+  &.category {
+    padding-left: 0.75em;
+
+    .posts {
+      padding-right: 0;
+      text-align: right;
+      vertical-align: top;
+      .topic-post-badges {
+        margin-right: -0.25em; // visual alignment
+      }
+    }
+
+    .topic-inset a {
+      margin-right: 0.25em;
+    }
+  }
+}
+
+.category-topic-link {
+  border-top: 1px solid var(--primary-low);
+  &:last-of-type {
+    border-bottom: none;
+  }
+  &.visited {
+    .age {
+      color: var(--primary-low-mid);
+    }
+  }
+}
+
+.category-list-item,
+.subcategory-list-item {
+  padding: 0;
+  border-left: 5px solid;
+
+  .category-logo.aspect-image {
+    margin-bottom: 0;
+  }
+
+  h3,
+  h4 {
+    max-width: 100%;
+    padding: 0;
+    .d-icon {
+      margin-right: 5px;
+    }
+    a[href] {
+      color: var(--primary);
+    }
+  }
+
+  h3 {
+    font-size: var(--font-up-2);
+  }
+
+  h4 {
+    font-size: var(--font-up-1);
+  }
+
+  .category-name {
+    max-width: 75vw;
+  }
+
+  .age {
+    margin-right: 0.25em;
+  }
+
+  .subcategories-list {
+    .subcategories {
+      padding-left: 0.15em; // visual alignment
+      .category-name {
+        font-size: var(--font-down-1);
+      }
+    }
+  }
+
+  .category-topic-link .main-link .age {
+    font-size: var(--font-down-1);
+  }
+
+  .category-description td {
+    padding-top: 0;
+    padding-bottom: 15px;
+  }
+
+  .subcategories-list {
+    border-bottom: none;
+    td {
+      padding-top: 0.25em;
+      padding-bottom: 0.25em;
+    }
+  }
+
+  .category-topic-link {
+    .num {
+      padding: 1em 0;
+      white-space: nowrap;
+    }
+    .topic-excerpt {
+      width: 110%;
+    }
+  }
+
+  .posters {
+    float: left;
+  }
+}
+
+.subcategory-list-item.category {
+  // sub-sub categories
+  display: block;
+  border-top: 1px solid;
+  border-top-color: var(--primary-low) !important; // overrides inline style
+  border-bottom-color: transparent !important; // overrides inline style
+  td {
+    padding-left: 0.5em;
+  }
+  &:first-of-type {
+    margin-top: 1em;
+  }
+  &:last-of-type {
+    border-bottom-color: var(
+      --primary-low
+    ) !important; // overrides inline style
+  }
+  .category-text-title {
+    font-size: var(--font-down-1);
+  }
+  .category-logo.aspect-image {
+    display: none;
+  }
+}

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

@@ -194,208 +194,18 @@
   }
 }
 
-// Category list
+// Misc. stuff
 // --------------------------------------------------
-.categories-list .category-list {
-  margin-bottom: 2em;
-
-  td {
-    padding: 12px 5px;
-    color: var(--primary-med-or-secondary-high);
-    vertical-align: top;
-  }
-
-  th {
-    padding: 10px 0 0;
-  }
-
-  td:first-of-type {
-    padding-left: 10px;
-  }
-
-  tbody {
-    border-top: none;
-    .category {
-      border-left: 6px solid;
-    }
-  }
-}
-
-.category-list-item.category {
-  tr:first-of-type {
-    border: none;
-  }
-  // Allow percentage widths on table cells to include their padding
-  box-sizing: border-box;
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-  }
-
-  .posts {
-    vertical-align: top;
-  }
-
-  .age {
-    margin-left: 5px;
-  }
-
-  // numbers get dimmer as they get colder
-  .coldmap {
-    &-high {
-      opacity: 0.4;
-    }
-
-    &-med {
-      opacity: 0.6;
-    }
-
-    &-low {
-      opacity: 0.8;
-    }
-  }
-}
-
-.subcategory-list-item.category {
-  display: block;
-  width: calc(100% + 20px);
-  margin: 1.25em 10px 0;
-  border-bottom: none !important;
-  border-top: 1px solid var(--primary-low) !important;
-  &:last-of-type {
-    margin-top: 0;
-    margin-bottom: 1.25em;
-    border-bottom: 1px solid var(--primary-low) !important;
-  }
-  td:first-of-type {
-    padding: 12px 0px;
-  }
-  .category-logo.aspect-image {
-    display: none;
-  }
-  .subcategories {
-    padding-left: 10px;
-  }
-}
-
-tr.category-topic-link {
-  border-bottom: 1px solid var(--primary-low);
-  &:last-of-type {
-    border-bottom: none;
-  }
-}
-
-.category-list-item,
-.subcategory-list-item {
-  padding: 0 0 0 3px;
-  border-left: 6px solid;
-
-  h3,
-  h4 {
-    max-width: 100%;
-    padding: 0 0 0 10px;
-    .d-icon {
-      margin-right: 5px;
-    }
-    a[href] {
-      color: var(--primary);
-    }
-  }
-
-  h3 {
-    font-size: var(--font-up-2);
-  }
-
-  h4 {
-    font-size: var(--font-up-1);
-  }
-
-  .category-name {
-    max-width: 80vw;
-  }
-
-  .category-topic-link .main-link,
-  .subcategories-list td,
-  .category-description td {
-    padding-left: 10px;
-  }
-
-  .category-topic-link .main-link .age {
-    font-size: var(--font-down-1);
-  }
-
-  .category-description td {
-    padding-top: 0;
-    padding-bottom: 15px;
-  }
-
-  .subcategories-list {
-    border-bottom: none;
-    td {
-      padding-top: 15px;
-    }
-  }
-
-  th .badge-category {
-    margin: 0;
-  }
-
-  .category-topic-link {
-    .num {
-      white-space: nowrap;
-    }
-    .topic-excerpt {
-      width: 110%;
-    }
-  }
-
-  .posters {
-    float: left;
-  }
-  > footer {
-    border-top: 1px solid var(--primary-low);
-    padding: 7px 10px;
-    .category-stat {
-      float: left;
-      margin: 3px 1em 0 0;
-      font-weight: normal;
-      font-size: var(--font-down-1);
-      .value {
-        font-weight: bold;
-      }
-    }
-    .btn {
-      float: right;
-      margin-left: 7px;
-    }
-  }
-}
-
-.category-list-item {
-  padding: 0.5em 0 0.25em;
-  border-top: 1px solid var(--primary-low) !important;
-  border-bottom: 1px solid var(--primary-low) !important;
-  margin: 1em 0 2em;
-}
-
 .category-box {
   h3 {
     margin: 0 0 0.5em 0;
   }
 }
 
-.category-topics-count a {
-  color: var(--primary);
-}
-
 .topic-list-bottom {
   margin: 20px 0 0 0;
 }
 
-// Misc. stuff
-// --------------------------------------------------
-
 .dropdown {
   position: relative;
 }

config/locales/client.en.yml

@@ -1011,8 +1011,8 @@ en:
         week: "week"
         month: "month"
       topic_stat_all_time:
-        one: "%{number} total"
-        other: "%{number} total"
+        one: "%{number} topic"
+        other: "%{number} topics"
       topic_stat_sentence_week:
         one: "%{count} new topic in the past week."
         other: "%{count} new topics in the past week."