From d21c1e23bbb26350d2311dd5620686c82bb4b6c4 Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Tue, 16 Aug 2022 12:16:34 +0200
Subject: [PATCH] Make the table header easier to understand when sorting

---
 changedetectionio/static/styles/styles.css      | 4 ++++
 changedetectionio/static/styles/styles.scss     | 7 +++++++
 changedetectionio/templates/watch-overview.html | 6 +++---
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css
index ea185a64..6fa901ca 100644
--- a/changedetectionio/static/styles/styles.css
+++ b/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; }
diff --git a/changedetectionio/static/styles/styles.scss b/changedetectionio/static/styles/styles.scss
index d9b851ed..4b85f8fd 100644
--- a/changedetectionio/static/styles/styles.scss
+++ b/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 ";
diff --git a/changedetectionio/templates/watch-overview.html b/changedetectionio/templates/watch-overview.html
index e514e0a7..1e7670a8 100644
--- a/changedetectionio/templates/watch-overview.html
+++ b/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>