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

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

  • SYNTAX: Use classes instead of html element targeting
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs
index fd20bde..91429ab 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs
+++ b/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
diff --git a/app/assets/javascripts/discourse/app/templates/list/category-column.hbr b/app/assets/javascripts/discourse/app/templates/list/category-column.hbr
index 10c175a..32cc25b 100644
--- a/app/assets/javascripts/discourse/app/templates/list/category-column.hbr
+++ b/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>
diff --git a/app/assets/javascripts/discourse/app/templates/list/posters-column.hbr b/app/assets/javascripts/discourse/app/templates/list/posters-column.hbr
index 38d50d4..72aee87 100644
--- a/app/assets/javascripts/discourse/app/templates/list/posters-column.hbr
+++ b/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>
diff --git a/app/assets/javascripts/discourse/app/templates/list/posts-count-column.hbr b/app/assets/javascripts/discourse/app/templates/list/posts-count-column.hbr
index 4c847dd..a697ff9 100644
--- a/app/assets/javascripts/discourse/app/templates/list/posts-count-column.hbr
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr b/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
index 6bb2a43..f3db91a 100644
--- a/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
+++ b/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"}}
diff --git a/app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr b/app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr
index 218d2f5..55d4953 100644
--- a/app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr
+++ b/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"}}
diff --git a/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr b/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
index 0d47362..636225a 100644
--- a/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
+++ b/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}}
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index a9297bd..1309291 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/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 {

[... diff too long, it was truncated ...]

GitHub sha: 0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e

This commit appears in #14890 which was approved by awesomerobot and pmusaraj. It was merged by jordanvidrine.