From 53f7c97942a91b41f2b05b92c03c5b59d375d72f Mon Sep 17 00:00:00 2001
From: Elijah <elijahshellsanchez@outlook.com>
Date: Thu, 22 Feb 2024 19:20:16 +0100
Subject: [PATCH] Highlight current page in custom tables

---
 idhub/static/css/dashboard.css          | 4 ++++
 idhub/templates/idhub/custom_table.html | 8 +++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/idhub/static/css/dashboard.css b/idhub/static/css/dashboard.css
index 773d90a..9648c08 100644
--- a/idhub/static/css/dashboard.css
+++ b/idhub/static/css/dashboard.css
@@ -159,6 +159,10 @@ h3 {
   background-color: #f3f3f3;
 }
 
+.btn-grey-selected {
+  background-color: #b0b0b0;
+}
+
 .btn-green-user {
   background-color: #c7e3a3;
 }
diff --git a/idhub/templates/idhub/custom_table.html b/idhub/templates/idhub/custom_table.html
index 808de83..496ddec 100644
--- a/idhub/templates/idhub/custom_table.html
+++ b/idhub/templates/idhub/custom_table.html
@@ -71,13 +71,15 @@
             {% block pagination.range %}
                 {% for p in table.page|table_page_range:table.paginator %}
                     <li {% if p == table.page.number %}class="active"{% endif %}>
+                        <a type="button" class="btn btn-grey{% if p == table.page.number %}-selected{% endif %}
+                            border border-dark"
                         {% if p == '...' %}
-                            <a type="button" class="btn btn-grey border border-dark" href="#">{{ p }}</a>
+                             href="#">
                         {% else %}
-                            <a type="button" class="btn btn-grey border border-dark" href="{% querystring table.prefixed_page_field=p %}">
+                            href="{% querystring table.prefixed_page_field=p %}">
+                        {% endif %}
                                 {{ p }}
                             </a>
-                        {% endif %}
                     </li>
                 {% endfor %}
             {% endblock pagination.range %}