SYNTAX: Use classes instead of html element targeting (#14890)

* SYNTAX: Use classes instead of html element targeting

app/assets/javascripts/discourse/app/templates/components/topic-list.hbs

@@ -1,5 +1,5 @@
 {{#unless skipHeader}}
-  <thead>
+  <thead class="topic-list-header">
     {{raw "topic-list-header"
       canBulkSelect=canBulkSelect
       toggleInTitle=toggleInTitle
@@ -29,7 +29,7 @@
   tagName=""
   connectorTagName=""}}
 
-<tbody>
+<tbody class="topic-list-body">
   {{#each filteredTopics as |topic|}}
     {{topic-list-item topic=topic
                       bulkSelectEnabled=bulkSelectEnabled

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

@@ -1 +1 @@
-<td class='category'>{{category-link category}}</td>
+<td class='category topic-list-data'>{{category-link category}}</td>

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

@@ -1,4 +1,4 @@
-<td class='posters'>
+<td class='posters topic-list-data'>
 {{#each posters as |poster|}}
   {{#if poster.moreCount}}
     <a class="posters-more-count">{{poster.moreCount}}</a>

app/assets/javascripts/discourse/app/templates/list/posts-count-column.hbr

@@ -1,4 +1,4 @@
-<{{view.tagName}} class='num posts-map posts {{view.likesHeat}}' title='{{view.title}}'>
+<{{view.tagName}} class='num posts-map posts {{view.likesHeat}} topic-list-data' title='{{view.title}}'>
   <button class="btn-link posts-map badge-posts {{view.likesHeat}}">
     {{raw-plugin-outlet name="topic-list-before-reply-count"}}
     {{number topic.replyCount noTitle="true" ariaLabel=view.title}}

app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr

@@ -1,7 +1,7 @@
 {{~raw-plugin-outlet name="topic-list-before-columns"}}
 
 {{#if bulkSelectEnabled}}
-  <td class="bulk-select">
+  <td class="bulk-select topic-list-data">
     <label for="bulk-select-{{topic.id}}">
       <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
     </label>
@@ -15,21 +15,21 @@
   This causes the topic-post-badge to be considered the same word as "text"
   at the end of the link, preventing it from line wrapping onto its own line.
 --}}
-<td class='main-link clearfix' colspan="1">
+<td class='main-link clearfix topic-list-data' colspan="1">
   {{~raw-plugin-outlet name="topic-list-before-link"}}
   <span class='link-top-line'>
     {{~raw-plugin-outlet name="topic-list-before-status"}}
     {{~raw "topic-status" topic=topic}}
     {{~topic-link topic class="raw-link raw-topic-link"}}
     {{~#if topic.featured_link}}
-    {{~topic-featured-link topic}}
+      {{~topic-featured-link topic}}
     {{~/if}}
     {{~raw-plugin-outlet name="topic-list-after-title"}}
     {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator
                                    topicId=topic.id
                                    unreadClass=unreadClass~}}
     {{~#if showTopicPostBadges}}
-    {{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
+      {{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
     {{~/if}}
   </span>
   <div class="link-bottom-line">
@@ -54,7 +54,7 @@
 {{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"}}
@@ -73,6 +73,6 @@
   </td>
 {{/if}}
 
-<td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>
+<td class="num views {{topic.viewsHeat}} topic-list-data">{{number topic.views numberKey="views_long"}}</td>
 
-{{raw "list/activity-column" topic=topic class="num" tagName="td"}}
+{{raw "list/activity-column" topic=topic class="num topic-list-data" tagName="td"}}

app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr

@@ -1,4 +1,4 @@
-<th data-sort-order='{{order}}' class='{{view.className}}' scope="col" {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}} {{#if sortable}}tabindex="0" role="button" aria-pressed='{{view.ariaPressed}}' {{#if view.ariaSort}}aria-sort='{{view.ariaSort}}'{{/if}} {{/if}}>
+<th data-sort-order='{{order}}' class='{{view.className}} topic-list-data' scope="col" {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}} {{#if sortable}}tabindex="0" role="button" aria-pressed='{{view.ariaPressed}}' {{#if view.ariaSort}}aria-sort='{{view.ariaSort}}'{{/if}} {{/if}}>
   {{~#if canBulkSelect}}
     {{~#if showBulkToggle}}
       {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}

app/assets/javascripts/discourse/app/templates/topic-list-header.hbr

@@ -1,6 +1,6 @@
 {{~raw-plugin-outlet name="topic-list-header-before"~}}
 {{#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}}

app/assets/stylesheets/common/base/_topic-list.scss

@@ -127,7 +127,7 @@
 
 // Topic list body
 
-.topic-list-item.visited,
+.topic-list-item.visited .topic-list-data,
 .latest-topic-list-item.visited,
 .category-topic-link.visited {
   a.title:not(.badge-notification) {
@@ -169,7 +169,7 @@
   }
 }
 
-.sticky-header thead {
+.sticky-header .topic-list-header {
   @include sticky;
   top: var(--header-offset, 60px);
   background: var(--secondary);
@@ -180,7 +180,7 @@
   width: 100%;
   border-collapse: collapse;
 
-  > tbody > tr {
+  > .topic-list-body > .topic-list-item {
     &.has-excerpt .star {
       vertical-align: top;
       margin-top: 2px;
@@ -198,14 +198,14 @@
   .topic-list-item-separator {
     border: none;
 
-    td {
+    .topic-list-data {
       border-bottom: 1px solid var(--danger-medium);
       line-height: 0.1em;
       padding: 0;
       text-align: center;
     }
 
-    td span {
+    .topic-list-data span {
       position: relative; // Chrome needs this, otherwise the line is above the text
       background-color: var(--secondary);
       color: var(--danger-medium);
@@ -214,21 +214,21 @@
     }
   }
 
-  th,
-  td {
+  .topic-list-data {
     line-height: $line-height-large;
     text-align: left;
     vertical-align: middle;
   }
-  th .btn-flat .d-icon {
+  .btn-flat .d-icon {
     color: currentColor;
   }
+
   td {
     color: var(--primary-medium);
     font-size: $font-0;
   }
 
-  .main-link {
+  .topic-list-data.main-link {
     @extend .topic-list-main-link;
 
     .raw-topic-link > * {
@@ -334,7 +334,7 @@
 .loading .topic-list {
   border: 0;
   box-shadow: none;
-  tr {
+  .topic-list-item {
     background-color: transparent;
   }
 }

app/assets/stylesheets/common/foundation/base.scss

@@ -133,6 +133,7 @@ tbody {
   border-top: 3px solid var(--primary-low);
 }
 
+.topic-list-item,
 tr {
   border-bottom: 1px solid var(--primary-low);
   &.highlighted {

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

@@ -24,8 +24,7 @@
   @extend .topic-list-icons;
 
   margin: 0 0 10px;
-  th,
-  td {
+  .topic-list-data {
     padding: 12px 5px;
     &:first-of-type {
       padding-left: 10px;
@@ -40,7 +39,7 @@
     line-height: $line-height-large;
   }
 
-  td.bulk-select {
+  .topic-list-data.bulk-select {
     padding: 0;
     width: 30px;
     label {
@@ -84,7 +83,7 @@
       }
     }
   }
-  td.posters {
+  .topic-list-data.posters {
     height: $td-posters-height;
   }
   .posters a:first-child .avatar.latest:not(.single) {
@@ -212,20 +211,16 @@ button.dismiss-read {
 
   .topic-list {
     // tighter table header spacing
-    th:first-of-type {
+    .topic-list-data:first-of-type {
       padding: 12px 5px;
     }
     // smaller table cell spacing
-    th,
-    td {
+    .topic-list-data {
       padding: 10px;
       font-size: $font-0;
     }
     // suppress views column
-    th.views {
-      display: none;
-    }
-    td.views {
+    .views {
       display: none;
     }
     // reduce width for more title space
@@ -237,7 +232,7 @@ button.dismiss-read {
       text-align: center;
     }
     // show only the first poster
-    td.posters {
+    .topic-list-data.posters {
       a:not(.latest) {
         display: none;
       }

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

@@ -113,8 +113,7 @@ ol.category-breadcrumb {
     margin-left: 55px;
   }
 
-  th,
-  td {
+  .topic-list-data {
     padding: 7px 0;
     max-width: 300px;
   }