UX: More consistent table header styles, removing duplicate styles

UX: More consistent table header styles, removing duplicate styles

diff --git a/app/assets/javascripts/discourse/templates/modal/reorder-categories.hbs b/app/assets/javascripts/discourse/templates/modal/reorder-categories.hbs
index 91bd68f..67b4456 100644
--- a/app/assets/javascripts/discourse/templates/modal/reorder-categories.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/reorder-categories.hbs
@@ -5,6 +5,7 @@
     <th class="th-pos">{{i18n "categories.reorder.position"}}</th>
     <th class="th-cat">{{i18n "categories.category"}}</th>
     </thead>
+    <tbody>
     {{#each categoriesOrdered as |cat|}}
       <tr data-category-id="{{cat.id}}">
         <td>
@@ -21,6 +22,7 @@
         <td>{{category-badge cat allowUncategorized="true"}}</td>
       </tr>
     {{/each}}
+    </tbody>
   </table>
   <div id="rc-scroll-bottom"></div>
 {{/d-modal-body}}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index c81f77d..48ead3d 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -99,21 +99,6 @@ $mobile-breakpoint: 700px;
   th {
     padding: 8px;
   }
-  th {
-    text-align: left;
-    &.sortable {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #e9e9e9;
-        background-color: lighten($primary, 80%);
-      }
-      .d-icon-chevron-down,
-      .d-icon-chevron-up {
-        margin-left: 0.5em;
-      }
-    }
-  }
   tr:hover {
     background-color: darken($secondary, 2.5%);
   }
diff --git a/app/assets/stylesheets/common/admin/dashboard_previous.scss b/app/assets/stylesheets/common/admin/dashboard_previous.scss
index a040f1c..4014f06 100644
--- a/app/assets/stylesheets/common/admin/dashboard_previous.scss
+++ b/app/assets/stylesheets/common/admin/dashboard_previous.scss
@@ -42,7 +42,6 @@
     }
     th {
       background: transparent;
-      text-align: left;
       padding: 0;
     }
   }
@@ -139,7 +138,6 @@
       }
     }
     th {
-      font-weight: normal;
       text-align: center;
       background: $primary-low;
     }
diff --git a/app/assets/stylesheets/common/admin/moderation_history.scss b/app/assets/stylesheets/common/admin/moderation_history.scss
index 66c174e..e6cc157 100644
--- a/app/assets/stylesheets/common/admin/moderation_history.scss
+++ b/app/assets/stylesheets/common/admin/moderation_history.scss
@@ -1,8 +1,5 @@
 .moderation-history {
   width: 100%;
-  th {
-    text-align: left;
-  }
   td.date {
     padding-right: 1em;
   }
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 564a736..8f17a9c 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -118,15 +118,12 @@
     vertical-align: middle;
   }
   th {
-    color: dark-light-choose($primary-medium, $secondary-medium);
-    font-weight: normal;
-    font-size: $font-0;
     button .d-icon {
-      color: dark-light-choose($primary-medium, $secondary-medium);
+      color: $primary-medium;
     }
   }
   td {
-    color: dark-light-choose($primary-medium, $secondary-medium);
+    color: $primary-medium;
     font-size: $font-0;
   }
 
diff --git a/app/assets/stylesheets/common/base/about.scss b/app/assets/stylesheets/common/base/about.scss
index c147abe..5e17e1b 100644
--- a/app/assets/stylesheets/common/base/about.scss
+++ b/app/assets/stylesheets/common/base/about.scss
@@ -8,12 +8,7 @@ section.about {
   table {
     width: auto;
 
-    th {
-      text-align: left;
-    }
-
-    td,
-    th {
+    td {
       padding: 10px;
     }
 
diff --git a/app/assets/stylesheets/common/base/cat_reorder.scss b/app/assets/stylesheets/common/base/cat_reorder.scss
index ce01551..004bd62 100644
--- a/app/assets/stylesheets/common/base/cat_reorder.scss
+++ b/app/assets/stylesheets/common/base/cat_reorder.scss
@@ -1,9 +1,7 @@
 .reorder-categories {
   thead {
-    border-bottom: 1px solid $primary-low;
     th {
       padding-bottom: 0.5em;
-      text-align: left;
     }
   }
   input {
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index b12ce4f..6aa071c 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -46,20 +46,10 @@
     }
 
     th.sortable {
-      cursor: pointer;
-      white-space: nowrap;
       width: 13%;
       .d-icon-heart {
         color: $love;
-        margin-right: 0.5em;
-      }
-      .d-icon-chevron-down,
-      .d-icon-chevron-up {
-        margin-left: 0.5em;
-      }
-
-      &:hover {
-        background-color: $primary-low;
+        margin: 0 0.25em 0 0;
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index be05dfd..fd26b7d 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -276,7 +276,31 @@ select {
   border: 1px solid $primary-low;
 }
 
+table {
+  th {
+    font-weight: normal;
+    color: $primary-medium;
+    text-align: left;
+    padding: 0.5em;
+  }
+}
+
 // Common Classes
+
+.sortable {
+  white-space: nowrap;
+  cursor: pointer;
+  .discourse-no-touch & {
+    &:hover {
+      background-color: $primary-low;
+    }
+  }
+  .d-icon {
+    margin-left: 0.25em;
+  }
+  @include unselectable;
+}
+
 .radio,
 .checkbox {
   min-height: 18px;
@@ -532,21 +556,6 @@ select {
 
   .control-group {
     @include clearfix;
-
-    .table {
-      width: 100%;
-
-      th,
-      td {
-        padding: 10px;
-        text-align: center;
-      }
-    }
-
-    &.highlighted {
-      animation: background-fade-highlight 2.5s ease-out;
-      background-color: dark-light-choose($highlight-low, $highlight);
-    }
   }
 
   .control-label {
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index 0c585c7..6018692 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -82,20 +82,15 @@
 table.group-manage-logs {
   width: 100%;
 
-  th {
-    text-align: left;
-    padding: 5px 0;
-  }
-
   td {
-    padding: 10px 0;
+    padding: 0.5em;
   }
 
   .group-manage-logs-expand-details {
     cursor: pointer;
 
     .d-icon {
-      color: blend-primary-secondary(50%);
+      color: $primary-medium;
     }
   }
 }
@@ -119,20 +114,6 @@ table.group-members {
 
   th {
     text-align: center;
-    padding: 5px 0 5px 5px;
-    color: dark-light-choose($primary-medium, $secondary-medium);
-    font-weight: normal;
-  }
-
-  th.sortable {
-    .d-icon {
-      margin-left: 5px;
-    }
-
-    &:hover {
-      cursor: pointer;
-      background-color: $primary-low;
-    }
   }
 
   tr {
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index e2d9111..ff638b9 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -26,19 +26,6 @@
 .groups-table {
   width: 100%;
 
-  th {
-    border-bottom: 1px solid $primary-low;
-    padding: 0.5em;
-    text-align: left;
-  }
-
-  .sortable {
-    &:hover {
-      background-color: $primary-low;
-      cursor: pointer;
-    }
-  }
-
   tr {
     td {
       padding: 0.8em;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 23dcb1e..e17493e 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -607,16 +607,16 @@ blockquote > *:last-child {
 .cooked table,
 .d-editor-preview table {
   thead {
-    border-bottom: 2px solid lighten($primary, 80%);
     th {
       text-align: left;
       padding-bottom: 2px;
+      font-weight: bold;
+      color: $primary;
     }
   }
 
-  td,
-  th {
-    padding: 3px 3px 3px 10px;
+  td {
+    padding: 3px 3px 3px 0.5em;
   }
 }
 

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

GitHub sha: ef9b249c

1 Like

We were redefining th styles and things like .sortable over and over again. This meant themes also had to redefine these styles over and over again (guess who just experienced this), and the core styles were inconsistent for no reason (things like .sortable .d-icon had a bunch of different margins defined).

Now most of these styles are centralized in discourse.scss, and one-off styles are legitimate cases that aren’t just duplicates.

2 Likes