diff --git a/app/static/css/releve-but.css b/app/static/css/releve-but.css index 3f132d6a40..a20c8bfa30 100644 --- a/app/static/css/releve-but.css +++ b/app/static/css/releve-but.css @@ -1,298 +1,322 @@ -/* Bulletin BUT, Seb. L. 2021-12-06 */ -/*******************/ -/* Styles généraux */ -/*******************/ -.wait{ - width: 60px; - height: 6px; - margin: auto; - background: #424242; /* la réponse à tout */ - animation: wait .4s infinite alternate; -} -@keyframes wait{ - 100%{transform: translateY(40px) rotate(1turn);} -} -main{ - --couleurPrincipale: rgb(240,250,255); - --couleurFondTitresUE: rgb(206,255,235); - --couleurFondTitresRes: rgb(125, 170, 255); - --couleurFondTitresSAE: rgb(211, 255, 255); - --couleurSecondaire: #fec; - --couleurIntense: #c09; - --couleurSurlignage: rgba(232, 255, 132, 0.47); - max-width: 1000px; - margin: auto; - display: none; -} -.ready .wait{display: none;} -.ready main{display: block;} -h2{ - margin: 0; - color: black; -} -section{ - background: #FFF; - border-radius: 16px; - border: 1px solid #AAA; - padding: 16px 32px; - margin: 8px 0; -} -section>div:nth-child(1){ - display: flex; - justify-content: space-between; - align-items: center; - gap: 8px; -} -.CTA_Liste{ - display: flex; - gap: 4px; - align-items: center; - background: var(--couleurIntense); - color: #FFF; - padding: 4px 8px; - border-radius: 4px; - box-shadow: 0 2px 2px rgba(0,0,0,0.26); - cursor: pointer; -} -.CTA_Liste>svg{ - transition: 0.2s; -} -.CTA_Liste:hover{ - outline: 2px solid #424242; -} -.listeOff svg{ - transform: rotate(180deg); -} -.listeOff .syntheseModule, -.listeOff .eval{ - display: none; -} - -.moduleOnOff>.syntheseModule, -.moduleOnOff>.eval{ - display: none; -} -.listeOff .moduleOnOff>.syntheseModule, -.listeOff .moduleOnOff>.eval{ - display: flex !important; -} - -.listeOff .ue::before, -.listeOff .module::before, -.moduleOnOff .ue::before, -.moduleOnOff .module::before{ - transform: rotate(0); -} -.listeOff .moduleOnOff .ue::before, -.listeOff .moduleOnOff .module::before{ - transform: rotate(180deg) !important; -} - -/***********************/ -/* Options d'affichage */ -/***********************/ -.hide_abs .absences, -.hide_abs_modules .module>.absences, -.hide_coef .synthese em, -.hide_coef .eval>em, -.hide_date_inscr .dateInscription, -.hide_ects .ects{ - display: none; -} - -.module>.absences, -.module .moyenne, -.module .info{ - display: none; -} - -/************/ -/* Etudiant */ -/************/ -.info_etudiant{ - color: #000; - text-decoration: none; -} -.etudiant{ - display: flex; - align-items: center; - gap: 16px; - border-color: var(--couleurPrincipale); - background: var(--couleurPrincipale); - color: rgb(0, 0, 0); -} -.civilite{ - font-weight: bold; - font-size: 130%; -} - -/************/ -/* Semestre */ -/************/ -.flex{ - display: flex; - gap: 16px; -} -.infoSemestre{ - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 4px; - flex: none; -} -.infoSemestre>div{ - border: 1px solid var(--couleurIntense); - padding: 4px 8px; - border-radius: 4px; - display: grid; - grid-template-columns: auto auto; - column-gap: 4px; -} -.infoSemestre>div:nth-child(1){ - margin-right: auto; -} -.infoSemestre>div>div:nth-child(even){ - text-align: right; -} -.rang{ - text-decoration: underline var(--couleurIntense); -} -.decision{ - margin: 5px 0; - font-weight: bold; - font-size: 20px; - text-decoration: underline var(--couleurIntense); -} -.enteteSemestre{ - color: black; - font-weight: bold; - font-size: 20px; - margin-bottom: 4px; -} - -/***************/ -/* Synthèse */ -/***************/ -.synthese .ue, -.synthese h3{ - background: var(--couleurFondTitresUE); -} -.synthese em, -.eval em{ - opacity: 0.6; - min-width: 80px; - display: inline-block; -} - -/***************/ -/* Evaluations */ -/***************/ -.module, .ue { - background: var(--couleurSecondaire); - color: #000; - padding: 4px 32px; - border-radius: 4px; - display: flex; - gap: 16px; - margin: 4px 0 2px 0; - overflow-x: auto; - overflow-y: hidden; - cursor: pointer; - position: relative; -} -.module::before, .ue::before { - content:url("data:image/svg+xml;utf8,"); - width: 26px; - height: 26px; - position: absolute; - bottom: 0; - left: 50%; - margin-left: -13px; - transform: rotate(180deg); - transition: 0.2s; -} -h3{ - display: flex; - align-items: center; - margin: 0 auto 0 0; - position: sticky; - left: -32px; - z-index: 1; - font-size: 16px; - background: var(--couleurSecondaire); -} -.sae .module, .sae h3{ - background: var(--couleurFondTitresSAE); -} - -.moyenne{ - font-weight: bold; - text-align: right; -} -.info{ - opacity: 0.9; -} -.syntheseModule{ - cursor: pointer; -} -.eval, .syntheseModule{ - position: relative; - display: flex; - justify-content: space-between; - margin: 0 0 0 28px; - padding: 0px 4px; - border-bottom: 1px solid #aaa; -} -.eval>div, .syntheseModule>div{ - display: flex; - gap: 4px; -} - -.eval:hover, .syntheseModule:hover{ - background: var(--couleurSurlignage); - /* color: #FFF; */ -} -.complement{ - pointer-events:none; - position: absolute; - bottom: 100%; - right: 0; - padding: 8px; - border-radius: 4px; - background: #FFF; - color: #000; - border: 1px solid var(--couleurIntense); - opacity: 0; - display: grid !important; - grid-template-columns: auto auto; - gap: 0 !important; - column-gap: 4px !important; -} -.eval:hover .complement{ - opacity: 1; - z-index: 1; -} -.complement>div:nth-child(even){ - text-align: right; -} -.complement>div:nth-child(1), -.complement>div:nth-child(2){ - font-weight: bold; -} -.complement>div:nth-child(1), -.complement>div:nth-child(7){ - margin-bottom: 8px; -} - -.absences{ - display: grid; - grid-template-columns: auto auto; - column-gap: 4px; - text-align: right; - border-left: 1px solid; - padding-left: 16px; -} -.absences>div:nth-child(1), -.absences>div:nth-child(2){ - font-weight: bold; -} \ No newline at end of file +/* Bulletin BUT, Seb. L. 2021-12-06 */ +/*******************/ +/* Styles généraux */ +/*******************/ +.wait{ + width: 60px; + height: 6px; + margin: auto; + background: #424242; /* la réponse à tout */ + animation: wait .4s infinite alternate; +} +@keyframes wait{ + 100%{transform: translateY(40px) rotate(1turn);} +} +main{ + --couleurPrincipale: rgb(240,250,255); + --couleurFondTitresUE: rgb(206,255,235); + --couleurFondTitresRes: rgb(125, 170, 255); + --couleurFondTitresSAE: rgb(211, 255, 255); + --couleurSecondaire: #fec; + --couleurIntense: #c09; + --couleurSurlignage: rgba(232, 255, 132, 0.47); + max-width: 1000px; + margin: auto; + display: none; +} +.ready .wait{display: none;} +.ready main{display: block;} +h2{ + margin: 0; + color: black; +} +section{ + background: #FFF; + border-radius: 16px; + border: 1px solid #AAA; + padding: 16px 32px; + margin: 8px 0; +} +section>div:nth-child(1){ + display: flex; + justify-content: space-between; + align-items: center; + gap: 8px; +} +.CTA_Liste{ + display: flex; + gap: 4px; + align-items: center; + background: var(--couleurIntense); + color: #FFF; + padding: 4px 8px; + border-radius: 4px; + box-shadow: 0 2px 2px rgba(0,0,0,0.26); + cursor: pointer; +} +.CTA_Liste>svg{ + transition: 0.2s; +} +.CTA_Liste:hover{ + outline: 2px solid #424242; +} +.listeOff svg{ + transform: rotate(180deg); +} +.listeOff .syntheseModule, +.listeOff .eval{ + display: none; +} + +.moduleOnOff>.syntheseModule, +.moduleOnOff>.eval{ + display: none; +} +.listeOff .moduleOnOff>.syntheseModule, +.listeOff .moduleOnOff>.eval{ + display: flex !important; +} + +.listeOff .ue::before, +.listeOff .module::before, +.moduleOnOff .ue::before, +.moduleOnOff .module::before{ + transform: rotate(0); +} +.listeOff .moduleOnOff .ue::before, +.listeOff .moduleOnOff .module::before{ + transform: rotate(180deg) !important; +} + +/***********************/ +/* Options d'affichage */ +/***********************/ +.hide_abs .absencesRecap, +/*.hide_abs .absences,*/ +.hide_abs_modules .module>.absences, +.hide_coef .synthese em, +.hide_coef .eval>em, +.hide_date_inscr .dateInscription, +.hide_ects .ects{ + display: none; +} + +/*.module>.absences,*/ +.module .moyenne, +.module .info{ + display: none; +} + +/************/ +/* Etudiant */ +/************/ +.info_etudiant{ + color: #000; + text-decoration: none; +} +.etudiant{ + display: flex; + align-items: center; + gap: 16px; + border-color: var(--couleurPrincipale); + background: var(--couleurPrincipale); + color: rgb(0, 0, 0); +} +.civilite{ + font-weight: bold; + font-size: 130%; +} + +/************/ +/* Semestre */ +/************/ +.flex{ + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 8px; +} +.infoSemestre{ + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 4px; +} +.infoSemestre>div{ + border: 1px solid var(--couleurIntense); + padding: 4px 8px; + border-radius: 4px; + display: grid; + grid-template-columns: auto auto; + column-gap: 4px; + flex: none; +} +.infoSemestre>div:nth-child(1){ + margin-right: auto; +} +.infoSemestre>div>div:nth-child(even){ + text-align: right; +} +.rang{ + text-decoration: underline var(--couleurIntense); +} +.decision{ + margin: 5px 0; + font-weight: bold; + font-size: 20px; + text-decoration: underline var(--couleurIntense); +} +.enteteSemestre{ + color: black; + font-weight: bold; + font-size: 20px; + margin-bottom: 4px; +} +/***************/ +/* Zone custom */ +/***************/ +.custom:empty{ + display: none; +} + +/***************/ +/* Synthèse */ +/***************/ +.synthese .ue, +.synthese h3{ + background: var(--couleurFondTitresUE); +} +.synthese em, +.eval em{ + opacity: 0.6; + min-width: 80px; + display: inline-block; +} +.ueBonus, +.ueBonus h3{ + background: var(--couleurFondTitresSAE) !important; + color: #000 !important; +} + +/***************/ +/* Evaluations */ +/***************/ +.evaluations>div, +.sae>div{ + scroll-margin-top: 60px; +} +.module, .ue { + background: var(--couleurSecondaire); + color: #000; + padding: 4px 32px; + border-radius: 4px; + display: flex; + gap: 16px; + margin: 4px 0 2px 0; + overflow-x: auto; + overflow-y: hidden; + cursor: pointer; + position: relative; +} +.module::before, .ue::before { + content:url("data:image/svg+xml;utf8,"); + width: 26px; + height: 26px; + position: absolute; + bottom: 0; + left: calc(50% - 13px); + transform: rotate(180deg); + transition: 0.2s; +} +@media screen and (max-width: 1000px) { + /* Placer le chevron à gauche au lieu du milieu */ + .module::before, .ue::before { + left: 2px; + bottom: calc(50% - 13px); + } +} +h3{ + display: flex; + align-items: center; + margin: 0 auto 0 0; + position: sticky; + left: -32px; + z-index: 1; + font-size: 16px; + background: var(--couleurSecondaire); +} +.sae .module, .sae h3{ + background: var(--couleurFondTitresSAE); +} + +.moyenne{ + font-weight: bold; + text-align: right; +} +.info{ + opacity: 0.9; +} +.syntheseModule{ + cursor: pointer; +} +.eval, .syntheseModule{ + position: relative; + display: flex; + justify-content: space-between; + margin: 0 0 0 28px; + padding: 0px 4px; + border-bottom: 1px solid #aaa; +} +.eval>div, .syntheseModule>div{ + display: flex; + gap: 4px; +} + +.eval:hover, .syntheseModule:hover{ + background: var(--couleurSurlignage); + /* color: #FFF; */ +} +.complement{ + pointer-events:none; + position: absolute; + bottom: 100%; + right: 0; + padding: 8px; + border-radius: 4px; + background: #FFF; + color: #000; + border: 1px solid var(--couleurIntense); + opacity: 0; + display: grid !important; + grid-template-columns: auto auto; + gap: 0 !important; + column-gap: 4px !important; +} +.eval:hover .complement{ + opacity: 1; + z-index: 1; +} +.complement>div:nth-child(even){ + text-align: right; +} +.complement>div:nth-child(1), +.complement>div:nth-child(2){ + font-weight: bold; +} +.complement>div:nth-child(1), +.complement>div:nth-child(7){ + margin-bottom: 8px; +} + +/*.absences{ + display: grid; + grid-template-columns: auto auto; + column-gap: 4px; + text-align: right; + border-left: 1px solid; + padding-left: 16px; +} +.absences>div:nth-child(1), +.absences>div:nth-child(2){ + font-weight: bold; +}*/ diff --git a/app/static/js/releve-but.js b/app/static/js/releve-but.js index 521e97da76..6e18ad575c 100644 --- a/app/static/js/releve-but.js +++ b/app/static/js/releve-but.js @@ -15,13 +15,10 @@ class releveBUT extends HTMLElement { /* Style du module */ const styles = document.createElement('link'); styles.setAttribute('rel', 'stylesheet'); - styles.setAttribute('href', '/ScoDoc/static/css/releve-but.css'); - /* variante "ScoDoc" ou "Passerelle" (ENT) ? */ - if (location.href.split("/")[3] == "ScoDoc") { /* un peu osé... */ - styles.setAttribute('href', '/ScoDoc/static/css/releve-but.css'); + if (location.href.split("/")[3] == "ScoDoc") { + styles.setAttribute('href', '/ScoDoc/static/css/releve-but.css'); // Scodoc } else { - // Passerelle - styles.setAttribute('href', '/assets/styles/releve-but.css'); + styles.setAttribute('href', '/assets/styles/releve-but.css'); // Passerelle } this.shadow.appendChild(styles); } @@ -49,6 +46,8 @@ class releveBUT extends HTMLElement { this.showSynthese(data); this.showEvaluations(data); + this.showCustom(data); + this.setOptions(data.options); this.shadow.querySelectorAll(".CTA_Liste").forEach(e => { @@ -57,7 +56,7 @@ class releveBUT extends HTMLElement { this.shadow.querySelectorAll(".ue, .module").forEach(e => { e.addEventListener("click", this.moduleOnOff) }) - this.shadow.querySelectorAll(".syntheseModule").forEach(e => { + this.shadow.querySelectorAll(":not(.ueBonus)+.syntheseModule").forEach(e => { e.addEventListener("click", this.goTo) }) @@ -77,6 +76,11 @@ class releveBUT extends HTMLElement {
+ + + + + @@ -169,8 +173,8 @@ class releveBUT extends HTMLElement { output += `