From 38b89c9a292623c94bac4ed79a5bac294628d100 Mon Sep 17 00:00:00 2001
From: Gaspard Jankowiak <gaspard.jankowiak@uni-graz.at>
Date: Wed, 24 Sep 2025 09:26:43 +0200
Subject: [PATCH] improve UI a bit

---
 directory.css |  9 ++++++++-
 directory.js  | 26 +++++++++++++++++++++++---
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/directory.css b/directory.css
index f22644b..a2f29b8 100644
--- a/directory.css
+++ b/directory.css
@@ -1,7 +1,14 @@
-#kf-trombi_columns_slider{display: inline-block; vertical-align: middle;}
+#kf-trombi_slider_container { display: flex; align-items: center; }
+
+#kf-trombi_columns_slider{ display: inline-block; vertical-align: middle; flex-grow: 2; }
+#kf-trombi_column_nr{ margin-left: 0.5em; margin-right: 0.5em; }
 
 #kf-trombi_trombi { display: grid; grid-row-gap: 2em; font-size: 1.2em; text-align: center; }
 
+#kf-trombi_link { line-height: 1.5em; }
+
+.kf-trombi_row_header { vertical-align: top; }
+
 .kf-trombi_trombi_3 { grid-template-columns: repeat(3, 1fr); }
 .kf-trombi_trombi_4 { grid-template-columns: repeat(4, 1fr); }
 .kf-trombi_trombi_5 { grid-template-columns: repeat(5, 1fr); }
diff --git a/directory.js b/directory.js
index 999584d..bda4837 100644
--- a/directory.js
+++ b/directory.js
@@ -9,15 +9,25 @@ function appendLink(nonEmptyGroup) {
 
   var row_header = document.createElement("th");
   row_header.textContent = "Trombi";
+  row_header.classList.add("kf-trombi_row_header");
 
   var row_links = document.createElement("td");
 
   if (nonEmptyGroup) {
+
     var link = document.createElement("a");
-    link.textContent = "Toggle";
+    link.id = "kf-trombi_link";
+    link.textContent = "Show";
     link.href="#";
     link.addEventListener("click", toggleTrombi);
 
+    const inputContainer = document.createElement("span");
+    inputContainer.id = "kf-trombi_input_container";
+    inputContainer.classList.add("hidden");
+
+    const sliderContainer = document.createElement("span");
+    sliderContainer.id = "kf-trombi_slider_container";
+
     var slider = document.createElement("input");
     slider.id = "kf-trombi_columns_slider";
     slider.type = "range";
@@ -38,20 +48,23 @@ function appendLink(nonEmptyGroup) {
       trombi.classList.add(`kf-trombi_trombi_${slider.value}`);
     })
 
+    sliderContainer.append(slider, column_nr, column_label);
+
     enhanced_checkbox = document.createElement("input");
     enhanced_checkbox.id = "kf-trombi_enhanced_checkbox";
     enhanced_checkbox.type = "checkbox";
     enhanced_checkbox.checked = true;
 
     var enhance_label = document.createElement("label");
-    enhance_label.textContent = " enhance";
+    enhance_label.textContent = " Enhance for printing";
     enhance_label.htmlFor = "kf-trombi_enhanced_checkbox";
 
     enhanced_checkbox.addEventListener("input", (event) => {
       const trombi = document.getElementById("kf-trombi_trombi");
       trombi.classList.toggle('kf-trombi_enhanced');
     })
-    row_links.append(link, slider, column_nr, column_label, enhanced_checkbox, enhance_label);
+    inputContainer.append(sliderContainer, enhanced_checkbox, enhance_label);
+    row_links.append(link, inputContainer);
   } else {
     row_links.textContent = "empty group!"
   }
@@ -92,8 +105,15 @@ function generateCard(student, col) {
 function toggleTrombi() {
   const trombi = document.getElementById("kf-trombi_trombi");
   const form = document.getElementById("idTNListe");
+  const link = document.getElementById("kf-trombi_link");
+  const inputContainer = document.getElementById("kf-trombi_input_container");
   trombi.classList.toggle("hidden");
   form.classList.toggle("hidden");
+  if(inputContainer.classList.toggle("hidden")) {
+    link.textContent = "Show";
+  } else {
+    link.textContent = "Hide";
+  }
 }
 
 function generateTrombi() {