From 2b1a3ee95e47f5ccd50a4ac32453aa6ac1499f36 Mon Sep 17 00:00:00 2001
From: Emmanuel Viennet <emmanuel.viennet@gmail.com>
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 5e037599..96e857d0 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 6fc2d88a..f39ac758 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");