discourse · CvX · Jan 19, 2022 · Jan 16, 2022 · Jan 16, 2022 · Jan 16, 2022
diff --git a/desktop/desktop.scss b/desktop/desktop.scss
@@ -1,9 +1,16 @@
 .topic-list .posters {
-    width: 70px;
-}
-#suggested-topics table td.author {
-    width: 70px !important;
+  width: 70px;
 }
-#suggested-topics .topic-list thead {
+
+#suggested-topics .topic-list {
+  .topic-list-header {
     display: none;
+  }
+  .author.topic-list-data {
+    width: 70px;
+  }
+}
+
+.topic-list-item .author a {
+  color: var(--primary-medium);
 }
diff --git a/desktop/head_tag.html b/desktop/head_tag.html
@@ -3,15 +3,14 @@
 {{#if showParticipants}}
   {{raw "list/posters-column" posters=topic.participants}}
 {{/if}}
-<td class='author' style="width: 70px;"><a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{avatar topic.creator imageSize="45"}}</a></td>
 
 {{#if bulkSelectEnabled}}
-  <td class="bulk-select">
+  <td class="bulk-select topic-list-data">
     <input type="checkbox" class="bulk-select">
   </td>
 {{/if}}
 
-<td class='main-link clearfix' colspan="1">
+<td class='main-link clearfix topic-list-data' colspan="1">
   <span class='link-top-line'>
     {{~raw-plugin-outlet name="topic-list-before-status"}}
     {{~raw "topic-status" topic=topic}}
@@ -38,26 +37,36 @@
   {{/if}}
 </td>
 
-
+<td class='author topic-list-data'>
+  <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
+    {{#if (theme-setting 'show_author_username')}}
+      {{topic.creator.username}}
+      {{else}}
+      {{avatar topic.creator imageSize="45"}}
+    {{/if}} 
+  </a>
+</td>
 
 {{raw "list/posts-count-column" topic=topic}}
 
 {{#if showLikes}}
-  <td class="num likes">
+  <td class="num likes topic-list-data">
     {{#if hasLikes}}
       <a href='{{topic.summaryUrl}}'>
-        {{number topic.like_count}} {{d-icon "heart"}}</td>
-  </a>
-{{/if}}
+        {{number topic.like_count}} {{d-icon "heart"}}
+      </a>
+    {{/if}}
+  </td>
 {{/if}}
 
 {{#if showOpLikes}}
   <td class="num likes">
     {{#if hasOpLikes}}
       <a href='{{topic.summaryUrl}}'>
-        {{number topic.op_like_count}} {{d-icon "heart"}}</td>
-  </a>
-{{/if}}
+        {{number topic.op_like_count}} {{d-icon "heart"}}
+      </a>
+    {{/if}}
+  </td>
 {{/if}}
 
 <td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>
@@ -67,18 +76,20 @@
 
 
 <script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
-{{#if showPosters}}
-  {{raw "topic-list-header-column" order='posters' forceName=(theme-i18n "author") style='width: 70px;' }}
-{{/if}}
+
 {{#if bulkSelectEnabled}}
-  <th class="bulk-select">
+  <th class="bulk-select topic-list-data">
     {{#if canBulkSelect}}
       {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
     {{/if}}
   </th>
 {{/if}}
 {{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
 
+{{#if showPosters}}
+  {{raw "topic-list-header-column" order='posters' forceName=(theme-i18n "author") }}
+{{/if}}
+
 {{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
 {{#if showLikes}}
   {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
@@ -91,29 +102,29 @@
 </script>
 
 <script type="text/x-handlebars" data-template-name="components/latest-topic-list-item">
-<div class='topic-poster'>
- {{#user-link user=topic.creator}}
-  {{avatar topic.creator imageSize="large"}}
- {{/user-link}}
-</div>
-<div class='main-link'>
- <div class='top-row'>
-  {{raw "topic-status" topic=topic}}
-  {{topic-link topic}}
-  {{#if topic.featured_link}}
-   {{topic-featured-link topic}}
-  {{/if}}
-  {{topic-post-badges newPosts=topic.totalUnread unseen=topic.unseen url=topic.lastUnreadUrl}}
- </div>
- <div class='bottom-row'>
-  {{category-link topic.category}}
-  {{discourse-tags topic mode="list"}}
- </div>
-</div>
-<div class='topic-stats'>
- {{raw "list/posts-count-column" topic=topic tagName="div"}}
- <div class="topic-last-activity">
-  <a href="{{topic.lastPostUrl}}" title="{{topic.bumpedAtTitle}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
- </div>
-</div>
+  <div class='topic-poster'>
+    {{#user-link user=topic.creator}}
+    {{avatar topic.creator imageSize="large"}}
+    {{/user-link}}
+  </div>
+  <div class='main-link'>
+    <div class='top-row'>
+      {{raw "topic-status" topic=topic}}
+      {{topic-link topic}}
+      {{#if topic.featured_link}}
+        {{topic-featured-link topic}}
+      {{/if}}
+      {{topic-post-badges newPosts=topic.totalUnread unseen=topic.unseen url=topic.lastUnreadUrl}}
+    </div>
+    <div class='bottom-row'>
+      {{category-link topic.category}}
+      {{discourse-tags topic mode="list"}}
+    </div>
+  </div>
+  <div class='topic-stats'>
+    {{raw "list/posts-count-column" topic=topic tagName="div"}}
+    <div class="topic-last-activity">
+      <a href="{{topic.lastPostUrl}}" title="{{topic.bumpedAtTitle}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
+    </div>
+  </div>
 </script>
diff --git a/mobile/head_tag.html b/mobile/head_tag.html
@@ -1,48 +1,64 @@
 <script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'>
-    <td class="topic-list-data">
-      {{~#unless expandPinned}}
+  <td class="topic-list-data">
+    {{~raw-plugin-outlet name="topic-list-before-columns"}}
+
+    {{#if (theme-setting 'show_author_username')}}
+      <div class='hidden-avatar'></div>
+      {{else}}
       <div class='pull-left'>
         <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{avatar topic.creator imageSize="large"}}</a>
       </div>
-      <div class='right'>
-      {{else}}
-      <div>
-      {{/unless~}}
-        <div class='main-link'>
-          {{raw "topic-status" topic=topic}}
-          {{topic-link topic}}
-          {{#if topic.featured_link}}
-            {{topic-featured-link topic}}
-          {{/if}}
-          {{#if topic.unseen}}
-            <span class="badge-notification new-topic"></span>
-          {{/if}}
-          {{~#if expandPinned}}
-          {{raw "list/topic-excerpt" topic=topic}}
-          {{/if~}}
-        </div>
-
-        <div class='pull-right'>
-          {{raw "list/post-count-or-badges" topic=topic postBadgesEnabled=showTopicPostBadges}}
-        </div>
+    {{/if}}
+
+    <div class='right'>
+      <div class='main-link'>
+        {{~raw-plugin-outlet name="topic-list-before-status"}}
+        {{raw "topic-status" topic=topic}}
+        {{topic-link topic}}
+        {{#if topic.featured_link}}
+        {{topic-featured-link topic}}
+        {{/if}}
+        {{#if topic.unseen}}
+          <span class="badge-notification new-topic"></span>
+        {{/if}}
+        {{~#if expandPinned}}
+        {{raw "list/topic-excerpt" topic=topic}}
+        {{/if~}}
+      </div>
 
-        <div class="topic-item-stats clearfix">
-          {{#unless hideCategory}}
-            <div class='category'>
-              {{category-link topic.category}}
-            </div>
-          {{/unless}}
+      <div class='pull-right'>
+        {{raw "list/post-count-or-badges" topic=topic postBadgesEnabled=showTopicPostBadges}}
+      </div>
 
-          {{discourse-tags topic mode="list"}}
+      <div class="topic-item-stats clearfix">
+
+        {{#unless hideCategory}}
+          <div class='category'>
+            {{category-link topic.category}}
+          </div>
+        {{/unless}}
 
+        {{discourse-tags topic mode="list"}}
+
+        {{#if (theme-setting 'show_author_username')}}
+          <div class="pull-right with-username">
+            <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
+              {{topic.creator.username}}
+            </a>
+            <div class='num activity last'>
+              <span class="age activity" title="{{topic.bumpedAtTitle}}"><a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a></span>
+            </div>
+          </div>
+          {{else}}
           <div class="pull-right">
             <div class='num activity last'>
               <span class="age activity" title="{{topic.bumpedAtTitle}}"><a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a></span>
             </div>
           </div>
-
-          <div class="clearfix"></div>
-        </div>
+        {{/if}}
+
+        <div class="clearfix"></div>
       </div>
-    </td>
+    </div>
+  </td>
 </script>
diff --git a/mobile/mobile.scss b/mobile/mobile.scss
@@ -0,0 +1,26 @@
+.topic-list .topic-list-data {
+  .hidden-avatar {
+    + .right {
+      margin-left: 0;
+    }
+  }
+  .main-link a.title {
+    padding: 0.5em 0;
+    + .pull-right.with-username {
+      margin: 0;
+    }
+  }
+  .pull-right {
+    &.with-username {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
+  .topic-item-stats {
+    .category,
+    .discourse-tags {
+      margin-bottom: 0.5em;
+    }
+  }
+}
diff --git a/settings.yml b/settings.yml
@@ -0,0 +1,5 @@
+show_author_username:
+  type: bool
+  default: false
+  description:
+    en: "Show author username instead profile avatar"