forked from ScoDoc/ScoDoc
Améliore affichage ref. comp.
This commit is contained in:
parent
54b1ce7bfb
commit
2b1a3ee95e
@ -16,6 +16,7 @@ h1{
|
||||
.parcours{
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.parcours>div{
|
||||
background: #09c;
|
||||
@ -41,13 +42,15 @@ h1{
|
||||
/**********************/
|
||||
.competences{
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
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;
|
||||
|
@ -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");
|
||||
|
Loading…
Reference in New Issue
Block a user