From 2b1a3ee95e47f5ccd50a4ac32453aa6ac1499f36 Mon Sep 17 00:00:00 2001 From: Emmanuel Viennet Date: Mon, 17 Jan 2022 00:41:57 +0100 Subject: [PATCH] =?UTF-8?q?Am=C3=A9liore=20affichage=20ref.=20comp.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/static/css/ref-competences.css | 10 ++++++++-- app/static/js/ref_competences.js | 19 ++++++++++++++++--- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/app/static/css/ref-competences.css b/app/static/css/ref-competences.css index 5e0375990..96e857d07 100644 --- a/app/static/css/ref-competences.css +++ b/app/static/css/ref-competences.css @@ -16,6 +16,7 @@ h1{ .parcours{ display: flex; gap: 4px; + padding-right: 4px; } .parcours>div{ background: #09c; @@ -40,14 +41,16 @@ h1{ /* Zone compétences */ /**********************/ .competences{ - display: grid; - gap: 4px; + display: grid; margin-top: 8px; + row-gap: 4px; } .competences>div{ padding: 4px 8px; border-radius: 4px; cursor: pointer; + width: var(--competence-size); + margin-right: 4px; } .comp1{background:#a44} @@ -70,6 +73,9 @@ h2{ font-size: 20px; border-radius: 16px 0; } +.ACs{ + padding-right: 4px; +} .AC li{ display: grid; grid-template-columns: auto 1fr; diff --git a/app/static/js/ref_competences.js b/app/static/js/ref_competences.js index 6fc2d88a4..f39ac7589 100644 --- a/app/static/js/ref_competences.js +++ b/app/static/js/ref_competences.js @@ -40,13 +40,10 @@ class ref_competences extends HTMLElement { initCompetences() { this.competencesNumber = {}; - let gridTemplate = ""; let i = 0; Object.keys(this.data.competences).forEach(competence => { - gridTemplate += `[${competence}] auto`; this.competencesNumber[competence] = 1 + i++ % 6; }) - this.shadow.querySelector(".competences").style.gridTemplateColumns = gridTemplate; } competences(event, cle) { @@ -56,6 +53,8 @@ class ref_competences extends HTMLElement { this.shadow.querySelector(".competences").innerHTML = ""; + /* Création des compétences */ + let competencesBucket = []; Object.entries(this.data.parcours[cle].annees).forEach(([annee, dataAnnee]) => { Object.entries(dataAnnee.competences).forEach(([competence, niveauCle]) => { let numComp = this.competencesNumber[competence]; @@ -67,9 +66,23 @@ class ref_competences extends HTMLElement { divCompetence.dataset.competence = `${competence} ${niveauCle.niveau}`; divCompetence.addEventListener("click", (event) => { this.AC(event, competence, niveauCle.niveau, annee, numComp) }) divCompetences.appendChild(divCompetence); + + competencesBucket.push(competence); }) }) + /* Affectation de la taille des éléments */ + //divCompetences.style.setProperty("--competence-size", `calc(${100 / competencesBucket.length}% )`); + let gridTemplate = ""; + Object.keys(this.data.competences).forEach(competence => { + if (competencesBucket.indexOf(competence) == -1) { + gridTemplate += `[${competence}] 0`; + } else { + gridTemplate += `[${competence}] 1fr`; + } + }) + this.shadow.querySelector(".competences").style.gridTemplateColumns = gridTemplate; + /* Réaffectation des focus */ this.shadow.querySelectorAll(".AC").forEach(ac => { this.shadow.querySelector(`[data-competence="${ac.dataset.competence}"]`).classList.add("focus");