improve UI a bit

This commit is contained in:
Gaspard Jankowiak 2025-09-24 09:26:43 +02:00
commit 38b89c9a29
2 changed files with 31 additions and 4 deletions

View file

@ -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() {