From d4dc7f62261c510f79a43ab9bea8062d87bc9622 Mon Sep 17 00:00:00 2001
From: Emmanuel Viennet <emmanuel.viennet@gmail.com>
Date: Thu, 13 Apr 2023 15:16:14 +0200
Subject: [PATCH] =?UTF-8?q?Am=C3=A9liore=20pr=C3=A9sentation=20ref.=20comp?=
 =?UTF-8?q?.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/static/css/ref-competences.css          | 22 ++++++++++------
 app/static/css/refcomp_parcours_niveaux.css | 28 +++++++++++++++------
 app/static/css/scodoc.css                   |  3 ---
 app/static/js/ref_competences.js            |  3 ++-
 app/templates/but/refcomp_show.j2           |  9 +++++--
 5 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/app/static/css/ref-competences.css b/app/static/css/ref-competences.css
index 282275639..2384368c1 100644
--- a/app/static/css/ref-competences.css
+++ b/app/static/css/ref-competences.css
@@ -1,8 +1,7 @@
 :host {
 	font-family: Verdana;
-	background: rgb(14, 5, 73);
 	display: block;
-	padding: 12px 32px;
+	padding: 6px 32px;
 	color: #FFF;
 	max-width: 1000px;
 	margin-left: 12px;
@@ -14,6 +13,11 @@ h1 {
 	font-weight: 100;
 }
 
+div.titre {
+	color: black;
+	margin-bottom: 8px;
+}
+
 /**********************/
 /* Zone parcours      */
 /**********************/
@@ -62,27 +66,29 @@ h1 {
 }
 
 .comp1 {
-	background: #a44
+	background: var(--col-c1-3);
 }
 
 .comp2 {
-	background: #84a
+	background: var(--col-c2-3);
 }
 
 .comp3 {
-	background: #a84
+	background: var(--col-c3-3);
 }
 
 .comp4 {
-	background: #8a4
+	background: var(--col-c4-3);
 }
 
 .comp5 {
-	background: #4a8
+	background: var(--col-c5-3);
+	color: #eee;
 }
 
 .comp6 {
-	background: #48a
+	background: var(--col-c6-3);
+	color: #eee;
 }
 
 .competences>.focus {
diff --git a/app/static/css/refcomp_parcours_niveaux.css b/app/static/css/refcomp_parcours_niveaux.css
index 550dc85f9..0b6c74968 100644
--- a/app/static/css/refcomp_parcours_niveaux.css
+++ b/app/static/css/refcomp_parcours_niveaux.css
@@ -19,17 +19,31 @@
     --col-c6-3: rgb(13, 13, 13);
 }
 
-div.table_niveaux_parcours {
-    margin-left: 12px;
-    margin-top: 12px;
+div.refcomp_show {
+    width: fit-content;
+}
+
+div.refcomp_show>div {
     background: rgb(210, 210, 210);
+    border-radius: 8px;
+    margin-left: 12px;
+}
+
+div.table_niveaux_parcours {
+    margin-top: 12px;
     color: #111;
     border-radius: 8px;
-    width: fit-content;
+    padding: 8px;
+}
+
+
+div.liens {
+    margin-top: 3ex;
     padding: 8px;
 }
 
 div.table_niveaux_parcours .titre {
+    font-weight: bold;
     font-size: 110%;
     margin-bottom: 12px;
 }
@@ -149,8 +163,7 @@ table.table_niveaux_parcours tr.annee_but td.empty {
     color: #eee;
 }
 
-.comp-c6-1,
-.comp-c6 {
+.comp-c6-1 {
     background: var(--col-c6-1);
     color: black;
 }
@@ -160,7 +173,8 @@ table.table_niveaux_parcours tr.annee_but td.empty {
     color: black;
 }
 
-.comp-c6-3 {
+.comp-c6-3,
+.comp-c6 {
     background: var(--col-c6-3);
     color: #eee;
 }
\ No newline at end of file
diff --git a/app/static/css/scodoc.css b/app/static/css/scodoc.css
index 798b3178b..18b80a8b3 100644
--- a/app/static/css/scodoc.css
+++ b/app/static/css/scodoc.css
@@ -252,9 +252,6 @@ p.footer {
   border-top: 1px solid rgb(60, 60, 60);
 }
 
-div.part2 {
-  margin-top: 3ex;
-}
 
 /* ---- (left) SIDEBAR  ----- */
 
diff --git a/app/static/js/ref_competences.js b/app/static/js/ref_competences.js
index 36a141d56..a4668d684 100644
--- a/app/static/js/ref_competences.js
+++ b/app/static/js/ref_competences.js
@@ -5,6 +5,7 @@ class ref_competences extends HTMLElement {
 
 		/* Template de base */
 		this.shadow.innerHTML = `
+			<div class=titre>Cliquer sur un parcours pour afficher ses niveaux de compétences</div>
 			<div class=parcours></div>
 			<div class=competences></div>
 			<div class=ACs></div>
@@ -31,7 +32,7 @@ class ref_competences extends HTMLElement {
 		let parcoursDIV = this.shadow.querySelector(".parcours");
 		Object.entries(this.data.parcours).forEach(([cle, parcours]) => {
 			let div = document.createElement("div");
-			div.innerText = parcours.libelle;
+			div.innerHTML = `<a title="${parcours.libelle}">${parcours.code}</a>`;
 			div.addEventListener("click", (event) => { this.competences(event, cle) })
 			parcoursDIV.appendChild(div);
 		})
diff --git a/app/templates/but/refcomp_show.j2 b/app/templates/but/refcomp_show.j2
index 5bd66dff0..d06f8cadf 100644
--- a/app/templates/but/refcomp_show.j2
+++ b/app/templates/but/refcomp_show.j2
@@ -13,14 +13,18 @@
     partir du fichier <tt>{{ref.scodoc_orig_filename or "(inconnu)"}}</tt>.
 </div>
 
-<ref-competences></ref-competences>
+<div class="refcomp_show">
+
+<div>
+    <ref-competences></ref-competences>
+</div>
 
 <script src="{{sco.scu.STATIC_DIR}}/js/ref_competences.js"></script>
 
 {% include "but/refcomp_parcours_niveaux.j2" %}
 
 
-<div class="part2">
+<div class="liens">
 <ul>
 <li>Formations se référant à ce référentiel:
     <ul>
@@ -36,6 +40,7 @@
 <li><a class="stdlink" href="{{url_for('notes.refcomp_table', scodoc_dept=g.scodoc_dept)}}">Liste des référentiels</a>
 </li>
 </ul>
+</div>
 
 </div>