From 0af93087977d073b50b2b4e962a0525692f2874a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=BCrkan=20G=C3=BCr?= <gurkan.gur@innogames.com>
Date: Fri, 13 Dec 2024 11:28:01 +0100
Subject: [PATCH] servershell: Make column buttons only visible on hover

---
 serveradmin/servershell/static/css/servershell.css      | 9 +++++++++
 serveradmin/servershell/static/js/servershell/result.js | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/serveradmin/servershell/static/css/servershell.css b/serveradmin/servershell/static/css/servershell.css
index 2fdcf3a1..e3b2d984 100644
--- a/serveradmin/servershell/static/css/servershell.css
+++ b/serveradmin/servershell/static/css/servershell.css
@@ -19,6 +19,15 @@ table tr:nth-child(odd) .disabled {
     white-space: nowrap;
 }
 
+.attr-headericons {
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+th:hover .attr-headericons {
+    opacity: 1;
+}
+
 .results-info:last-of-type {
     margin-bottom: 1rem;
 }
diff --git a/serveradmin/servershell/static/js/servershell/result.js b/serveradmin/servershell/static/js/servershell/result.js
index 1eee1f23..a403e0be 100644
--- a/serveradmin/servershell/static/js/servershell/result.js
+++ b/serveradmin/servershell/static/js/servershell/result.js
@@ -18,13 +18,13 @@ servershell.update_result = function() {
     servershell.shown_attributes.forEach((attribute, index) => header.append(
         $('<th scope="col">').append(
             $('<span>').text(attribute),
-            $(`<a href="#" class="attr-tooltip" title="Order by ${attribute} attribute">`).append(
+            $(`<a href="#" class="attr-headericons" title="Order by ${attribute} attribute">`).append(
                 $('<i class="fa-solid fa-arrow-down-a-z">')
             ).click(function(e) {
                 e.preventDefault();
                 servershell.commands.orderby(attribute);
             }),
-            $(`<a href="#" class="attr-tooltip" title="Remove ${attribute} column">`).append(
+            $(`<a href="#" class="attr-headericons" title="Remove ${attribute} column">`).append(
                 $('<i class="fa-solid fa-xmark">')
             ).click(function(e) {
                 e.preventDefault();