servershell: Make column buttons only visible on hover

innogames · Dec 13, 2024 · 0af9308 · 0af9308
1 parent f1f5c41
commit 0af9308
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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();