Make the table header easier to understand when sorting

changedetectionio/static/styles/styles.css

@@ -53,6 +53,10 @@ code {
     white-space: normal; }
   .watch-table th {
     white-space: nowrap; }
+    .watch-table th a {
+      font-weight: normal; }
+      .watch-table th a.active {
+        font-weight: bolder; }
   .watch-table .title-col a[target="_blank"]::after, .watch-table .current-diff-url::after {
     content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
     margin: 0 3px 0 5px; }

changedetectionio/static/styles/styles.scss

@@ -68,6 +68,12 @@ code {
 
   th {
     white-space: nowrap;
+    a {
+      font-weight: normal;
+      &.active {
+        font-weight: bolder;
+      }
+    }
   }
 
   .title-col a[target="_blank"]::after, .current-diff-url::after {
@@ -512,6 +518,7 @@ and also iPads specifically.
         vertical-align: middle;
       }
     }
+
     .last-checked::before {
       color: #555;
       content: "Last Checked ";

changedetectionio/templates/watch-overview.html

@@ -44,9 +44,9 @@
                 <th>#</th>
                 <th></th>
                 {% set link_order = "asc" if sort_order else "desc" %}
-                <th><a href="{{url_for('index', sort='label', order=link_order)}}">Website</a></th>
-                <th><a href="{{url_for('index', sort='last_checked', order=link_order)}}">Last Checked</a></th>
-                <th><a href="{{url_for('index', sort='last_changed', order=link_order)}}">Last Changed</a></th>
+                <th><a class="{{ 'active '+link_order if sort_attribute == 'label' }}" href="{{url_for('index', sort='label', order=link_order)}}">Website</a></th>
+                <th><a class="{{ 'active '+link_order if sort_attribute == 'last_checked' }}" href="{{url_for('index', sort='last_checked', order=link_order)}}">Last Checked</a></th>
+                <th><a class="{{ 'active '+link_order if sort_attribute == 'last_changed' }}" href="{{url_for('index', sort='last_changed', order=link_order)}}">Last Changed</a></th>
                 <th></th>
             </tr>
             </thead>