gjankowiak/kf-trombi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve UI a bit

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

9
directory.css
View file

@ -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_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_3 { grid-template-columns: repeat(3, 1fr); }
.kf-trombi_trombi_4 { grid-template-columns: repeat(4, 1fr); } .kf-trombi_trombi_4 { grid-template-columns: repeat(4, 1fr); }
.kf-trombi_trombi_5 { grid-template-columns: repeat(5, 1fr); } .kf-trombi_trombi_5 { grid-template-columns: repeat(5, 1fr); }

26
directory.js
View file

@ -9,15 +9,25 @@ function appendLink(nonEmptyGroup) {
var row_header = document.createElement("th"); var row_header = document.createElement("th");
row_header.textContent = "Trombi"; row_header.textContent = "Trombi";
row_header.classList.add("kf-trombi_row_header");
var row_links = document.createElement("td"); var row_links = document.createElement("td");
if (nonEmptyGroup) { if (nonEmptyGroup) {
var link = document.createElement("a"); var link = document.createElement("a");
link.textContent = "Toggle"; link.id = "kf-trombi_link";
link.textContent = "Show";
link.href="#"; link.href="#";
link.addEventListener("click", toggleTrombi); 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"); var slider = document.createElement("input");
slider.id = "kf-trombi_columns_slider"; slider.id = "kf-trombi_columns_slider";
slider.type = "range"; slider.type = "range";
@ -38,20 +48,23 @@ function appendLink(nonEmptyGroup) {
trombi.classList.add(`kf-trombi_trombi_${slider.value}`); trombi.classList.add(`kf-trombi_trombi_${slider.value}`);
}) })
sliderContainer.append(slider, column_nr, column_label);
enhanced_checkbox = document.createElement("input"); enhanced_checkbox = document.createElement("input");
enhanced_checkbox.id = "kf-trombi_enhanced_checkbox"; enhanced_checkbox.id = "kf-trombi_enhanced_checkbox";
enhanced_checkbox.type = "checkbox"; enhanced_checkbox.type = "checkbox";
enhanced_checkbox.checked = true; enhanced_checkbox.checked = true;
var enhance_label = document.createElement("label"); var enhance_label = document.createElement("label");
enhance_label.textContent = " enhance"; enhance_label.textContent = " Enhance for printing";
enhance_label.htmlFor = "kf-trombi_enhanced_checkbox"; enhance_label.htmlFor = "kf-trombi_enhanced_checkbox";
enhanced_checkbox.addEventListener("input", (event) => { enhanced_checkbox.addEventListener("input", (event) => {
const trombi = document.getElementById("kf-trombi_trombi"); const trombi = document.getElementById("kf-trombi_trombi");
trombi.classList.toggle('kf-trombi_enhanced'); 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 { } else {
row_links.textContent = "empty group!" row_links.textContent = "empty group!"
} }
@ -92,8 +105,15 @@ function generateCard(student, col) {
function toggleTrombi() { function toggleTrombi() {
const trombi = document.getElementById("kf-trombi_trombi"); const trombi = document.getElementById("kf-trombi_trombi");
const form = document.getElementById("idTNListe"); const form = document.getElementById("idTNListe");
const link = document.getElementById("kf-trombi_link");
const inputContainer = document.getElementById("kf-trombi_input_container");
trombi.classList.toggle("hidden"); trombi.classList.toggle("hidden");
form.classList.toggle("hidden"); form.classList.toggle("hidden");
if(inputContainer.classList.toggle("hidden")) {
link.textContent = "Show";
} else {
link.textContent = "Hide";
}
} }
function generateTrombi() { function generateTrombi() {