Améliore présentation ref. comp.

This commit is contained in:
Emmanuel Viennet 2023-04-13 15:16:14 +02:00
parent da2f0ac2f9
commit d4dc7f6226
5 changed files with 44 additions and 21 deletions

View File

@ -1,8 +1,7 @@
:host { :host {
font-family: Verdana; font-family: Verdana;
background: rgb(14, 5, 73);
display: block; display: block;
padding: 12px 32px; padding: 6px 32px;
color: #FFF; color: #FFF;
max-width: 1000px; max-width: 1000px;
margin-left: 12px; margin-left: 12px;
@ -14,6 +13,11 @@ h1 {
font-weight: 100; font-weight: 100;
} }
div.titre {
color: black;
margin-bottom: 8px;
}
/**********************/ /**********************/
/* Zone parcours */ /* Zone parcours */
/**********************/ /**********************/
@ -62,27 +66,29 @@ h1 {
} }
.comp1 { .comp1 {
background: #a44 background: var(--col-c1-3);
} }
.comp2 { .comp2 {
background: #84a background: var(--col-c2-3);
} }
.comp3 { .comp3 {
background: #a84 background: var(--col-c3-3);
} }
.comp4 { .comp4 {
background: #8a4 background: var(--col-c4-3);
} }
.comp5 { .comp5 {
background: #4a8 background: var(--col-c5-3);
color: #eee;
} }
.comp6 { .comp6 {
background: #48a background: var(--col-c6-3);
color: #eee;
} }
.competences>.focus { .competences>.focus {

View File

@ -19,17 +19,31 @@
--col-c6-3: rgb(13, 13, 13); --col-c6-3: rgb(13, 13, 13);
} }
div.table_niveaux_parcours { div.refcomp_show {
margin-left: 12px; width: fit-content;
margin-top: 12px; }
div.refcomp_show>div {
background: rgb(210, 210, 210); background: rgb(210, 210, 210);
border-radius: 8px;
margin-left: 12px;
}
div.table_niveaux_parcours {
margin-top: 12px;
color: #111; color: #111;
border-radius: 8px; border-radius: 8px;
width: fit-content; padding: 8px;
}
div.liens {
margin-top: 3ex;
padding: 8px; padding: 8px;
} }
div.table_niveaux_parcours .titre { div.table_niveaux_parcours .titre {
font-weight: bold;
font-size: 110%; font-size: 110%;
margin-bottom: 12px; margin-bottom: 12px;
} }
@ -149,8 +163,7 @@ table.table_niveaux_parcours tr.annee_but td.empty {
color: #eee; color: #eee;
} }
.comp-c6-1, .comp-c6-1 {
.comp-c6 {
background: var(--col-c6-1); background: var(--col-c6-1);
color: black; color: black;
} }
@ -160,7 +173,8 @@ table.table_niveaux_parcours tr.annee_but td.empty {
color: black; color: black;
} }
.comp-c6-3 { .comp-c6-3,
.comp-c6 {
background: var(--col-c6-3); background: var(--col-c6-3);
color: #eee; color: #eee;
} }

View File

@ -252,9 +252,6 @@ p.footer {
border-top: 1px solid rgb(60, 60, 60); border-top: 1px solid rgb(60, 60, 60);
} }
div.part2 {
margin-top: 3ex;
}
/* ---- (left) SIDEBAR ----- */ /* ---- (left) SIDEBAR ----- */

View File

@ -5,6 +5,7 @@ class ref_competences extends HTMLElement {
/* Template de base */ /* Template de base */
this.shadow.innerHTML = ` this.shadow.innerHTML = `
<div class=titre>Cliquer sur un parcours pour afficher ses niveaux de compétences</div>
<div class=parcours></div> <div class=parcours></div>
<div class=competences></div> <div class=competences></div>
<div class=ACs></div> <div class=ACs></div>
@ -31,7 +32,7 @@ class ref_competences extends HTMLElement {
let parcoursDIV = this.shadow.querySelector(".parcours"); let parcoursDIV = this.shadow.querySelector(".parcours");
Object.entries(this.data.parcours).forEach(([cle, parcours]) => { Object.entries(this.data.parcours).forEach(([cle, parcours]) => {
let div = document.createElement("div"); 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) }) div.addEventListener("click", (event) => { this.competences(event, cle) })
parcoursDIV.appendChild(div); parcoursDIV.appendChild(div);
}) })

View File

@ -13,14 +13,18 @@
partir du fichier <tt>{{ref.scodoc_orig_filename or "(inconnu)"}}</tt>. partir du fichier <tt>{{ref.scodoc_orig_filename or "(inconnu)"}}</tt>.
</div> </div>
<div class="refcomp_show">
<div>
<ref-competences></ref-competences> <ref-competences></ref-competences>
</div>
<script src="{{sco.scu.STATIC_DIR}}/js/ref_competences.js"></script> <script src="{{sco.scu.STATIC_DIR}}/js/ref_competences.js"></script>
{% include "but/refcomp_parcours_niveaux.j2" %} {% include "but/refcomp_parcours_niveaux.j2" %}
<div class="part2"> <div class="liens">
<ul> <ul>
<li>Formations se référant à ce référentiel: <li>Formations se référant à ce référentiel:
<ul> <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><a class="stdlink" href="{{url_for('notes.refcomp_table', scodoc_dept=g.scodoc_dept)}}">Liste des référentiels</a>
</li> </li>
</ul> </ul>
</div>
</div> </div>