From 7c61dd8d63fd63fed6468c018b83cb23a71f13b2 Mon Sep 17 00:00:00 2001
From: Emmanuel Viennet <emmanuel.viennet@gmail.com>
Date: Sun, 24 Mar 2024 08:27:09 +0100
Subject: [PATCH] Cosmetic + reorganisation css edit formation

---
 app/but/cursus_but.py             |   6 +-
 app/scodoc/sco_edit_ue.py         |   2 +-
 app/static/css/scodoc.css         | 434 ++++++++++--------------------
 app/static/css/ue_table.css       | 217 +++++++++++++++
 app/static/icons/warning-info.svg |  44 +++
 5 files changed, 406 insertions(+), 297 deletions(-)
 create mode 100644 app/static/css/ue_table.css
 create mode 100644 app/static/icons/warning-info.svg

diff --git a/app/but/cursus_but.py b/app/but/cursus_but.py
index efd375217..4d7f70d48 100644
--- a/app/but/cursus_but.py
+++ b/app/but/cursus_but.py
@@ -542,9 +542,9 @@ def formation_semestre_niveaux_warning(formation: Formation, semestre_idx: int)
     for parcour_code, niveaux in niveaux_sans_ue_by_parcour.items():
         H.append(
             f"""<li>Parcours {parcour_code} : {
-            len(niveaux)} niveaux sans UEs
-            <span>
-            { ', '.join( f'{niveau.competence.titre} {niveau.ordre}'
+            len(niveaux)} niveaux sans UEs&nbsp;:
+            <span class="niveau-nom"><span>
+            { '</span>, <span>'.join( f'{niveau.competence.titre} {niveau.ordre}'
                     for niveau in niveaux
                     )
             }
diff --git a/app/scodoc/sco_edit_ue.py b/app/scodoc/sco_edit_ue.py
index 7e9543ce2..061227114 100644
--- a/app/scodoc/sco_edit_ue.py
+++ b/app/scodoc/sco_edit_ue.py
@@ -756,7 +756,7 @@ def ue_table(formation_id=None, semestre_idx=1, msg=""):  # was ue_list
     H = [
         html_sco_header.sco_header(
             cssstyles=html_sco_header.BOOTSTRAP_MULTISELECT_CSS
-            + ["libjs/jQuery-tagEditor/jquery.tag-editor.css"],
+            + ["libjs/jQuery-tagEditor/jquery.tag-editor.css", "css/ue_table.css"],
             javascripts=html_sco_header.BOOTSTRAP_MULTISELECT_JS
             + [
                 "libjs/jinplace-1.2.1.min.js",
diff --git a/app/static/css/scodoc.css b/app/static/css/scodoc.css
index 6bd88ebc5..5a91809bd 100644
--- a/app/static/css/scodoc.css
+++ b/app/static/css/scodoc.css
@@ -40,8 +40,8 @@ h3 {
   font-weight: bold;
 }
 
-details > summary:first-of-type {
-  display: list-item!important;
+details>summary:first-of-type {
+  display: list-item !important;
 }
 
 div.container {
@@ -52,8 +52,10 @@ div.sco-app-content {
   display: flex;
   flex-direction: column;
 }
+
 div.scobox {
-  flex: 1 0 0; /* Equal width for all boxes */
+  flex: 1 0 0;
+  /* Equal width for all boxes */
   max-width: var(--sco-content-max-width);
   /* margin: 5px; Optional: Add margin between boxes */
 
@@ -65,18 +67,22 @@ div.scobox {
   border: 1px solid #c5b4b2;
   border-radius: 8px;
 }
+
 div.scobox.explanation {
   background-color: var(--sco-color-background);
 }
+
 div.scobox div.scobox-title {
   font-size: 120%;
   font-weight: bold;
   margin-bottom: 8px;
 }
+
 div.scobox-buttons {
   margin-top: 16px;
   margin-bottom: 4px;
 }
+
 div.scobox-buttons input {
   font-size: 110%;
 }
@@ -89,33 +95,32 @@ div.scobox-etud {
 .multiselect-container.dropdown-menu {
   background-color: #e9e9e9;
 }
+
 .multiselect-container label.form-check-label {
   font-weight: normal;
   margin-left: 8px;
 }
+
 button.multiselect-option {
   width: 100%;
   text-align: left;
   border: none;
 }
+
 .multiselect-container button.multiselect-option span.form-check {
   padding-left: 2px;
 }
+
 .multiselect-container span.multiselect-group {
   font-weight: bold;
 }
-.multiselect-container
-  .multiselect-all.active:not(.multiselect-active-item-fallback),
-.multiselect-container
-  .multiselect-all:not(.multiselect-active-item-fallback):active,
-.multiselect-container
-  .multiselect-group.active:not(.multiselect-active-item-fallback),
-.multiselect-container
-  .multiselect-group:not(.multiselect-active-item-fallback):active,
-.multiselect-container
-  .multiselect-option.active:not(.multiselect-active-item-fallback),
-.multiselect-container
-  .multiselect-option:not(.multiselect-active-item-fallback):active {
+
+.multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback),
+.multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active,
+.multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback),
+.multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active,
+.multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback),
+.multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active {
   background-color: #e9e9e9;
 }
 
@@ -263,7 +268,7 @@ tr.bandeaugtr {
   text-decoration: underline;
 }
 
-.navbar-default .navbar-nav > li.logout a {
+.navbar-default .navbar-nav>li.logout a {
   color: rgb(255, 0, 0);
 }
 
@@ -663,11 +668,13 @@ div.scobox.news {
   font-size: 10pt;
   background-color: rgb(255, 235, 170);
 }
+
 div.news a,
 div.news a.stdlink {
   color: black;
   text-decoration: none;
 }
+
 div.news a:hover {
   color: rgb(153, 51, 51);
   text-decoration: underline;
@@ -687,6 +694,7 @@ span.newsdate {
 span.newstext {
   font-style: normal;
 }
+
 /* div.news {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 10pt;
@@ -954,16 +962,19 @@ div.section_but {
   align-items: flex-end;
   justify-content: space-evenly;
 }
+
 div.fiche_but_col2 {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
+
 div.fiche_total_etcs {
   font-weight: bold;
   margin-top: 16px;
 }
-div.section_but > div.link_validation_rcues {
+
+div.section_but>div.link_validation_rcues {
   align-self: center;
   text-align: center;
 }
@@ -1039,6 +1050,7 @@ a.etudlink,
 a.etud:visited {
   color: red;
 }
+
 a.etudlink:hover {
   text-decoration: underline;
 }
@@ -1151,6 +1163,7 @@ a.discretelink:visited {
   text-decoration: underline;
   text-decoration-style: dotted;
 }
+
 table.gt_table a.discretelink,
 table.gt_table a.discretelink:visited {
   text-decoration: none;
@@ -1176,6 +1189,7 @@ a.discretelink:hover {
 .help {
   max-width: var(--sco-content-max-width);
 }
+
 .help {
   font-style: italic;
 }
@@ -1195,18 +1209,22 @@ div.sco_help {
   border: 1px solid grey;
   max-width: var(--sco-content-max-width);
 }
+
 div.sco_help {
   font-style: italic;
   background-color: rgb(209, 255, 214);
 }
+
 div.sco_box_title {
   font-size: 120%;
   font-weight: bold;
   margin-bottom: 8px;
 }
+
 .sco_green_bg {
   background-color: rgb(155, 218, 155);
 }
+
 .sco_lightgreen_bg {
   background-color: rgb(209, 255, 214);
 }
@@ -1219,6 +1237,7 @@ span.wtf-field ul.errors li,
 span.wtf-field-error {
   color: red;
 }
+
 div.wtf-error-messages {
   color: red;
   font-size: 110%;
@@ -1267,7 +1286,7 @@ div.wtf-error-messages {
   display: inline-block;
 }
 
-.configuration_logo details > *:not(summary) {
+.configuration_logo details>*:not(summary) {
   margin-left: 32px;
 }
 
@@ -1380,9 +1399,11 @@ tr.etuddem td {
   color: rgb(100, 100, 100);
   font-style: italic;
 }
+
 table.gt_table tr.etuddem td a {
   color: red;
 }
+
 table.gt_table tr.etuddem td.etudinfo:first-child::after {
   color: red;
   content: " (dém.)";
@@ -1408,7 +1429,7 @@ table.notes_evaluation th.eval_incomplete {
   font-size: 80%;
 }
 
-table.notes_evaluation td.eval_incomplete > a {
+table.notes_evaluation td.eval_incomplete>a {
   font-size: 80%;
   color: rgb(166, 50, 159);
 }
@@ -1457,9 +1478,11 @@ span.eval_title {
   font-size: 14pt;
 }
 
-#evaluation-edit-blocked td, #evaluation-edit-coef td {
+#evaluation-edit-blocked td,
+#evaluation-edit-coef td {
   padding-top: 24px;
 }
+
 /* #saisie_notes span.eval_title {
     border-bottom: 1px solid rgb(100,100,100);
 }
@@ -1479,7 +1502,7 @@ div.jury_footer {
   justify-content: space-evenly;
 }
 
-div.jury_footer > span {
+div.jury_footer>span {
   border: 2px solid rgb(90, 90, 90);
   border-radius: 4px;
   padding: 4px;
@@ -1699,7 +1722,7 @@ formsemestre_page_title .lock img {
   margin-left: -1px;
 }
 
-#sco_menu > li {
+#sco_menu>li {
   float: left;
   width: auto;
   /* 120px !important; */
@@ -1708,20 +1731,20 @@ formsemestre_page_title .lock img {
   text-transform: uppercase;
 }
 
-#sco_menu > li li {
+#sco_menu>li li {
   text-transform: none;
   font-size: 14px;
   font-family: Arial, Helvetica, sans-serif;
 }
 
-#sco_menu > li > a {
+#sco_menu>li>a {
   font-weight: bold !important;
   padding-left: 15px;
   padding-right: 15px;
 }
 
-#sco_menu > li > a.ui-menu-item,
-#sco_menu > li > a.ui-menu-item:visited {
+#sco_menu>li>a.ui-menu-item,
+#sco_menu>li>a.ui-menu-item:visited {
   text-decoration: none;
 }
 
@@ -1729,14 +1752,14 @@ formsemestre_page_title .lock img {
   width: 200px;
 }
 
-.sco_dropdown_menu > li {
+.sco_dropdown_menu>li {
   width: auto;
   /* 120px !important; */
   font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
 }
 
-.menu-etudiant > li {
+.menu-etudiant>li {
   width: 200px !important;
 }
 
@@ -1791,12 +1814,15 @@ table.formsemestre_status {
 tr.formsemestre_status {
   background-color: rgb(90%, 90%, 90%);
 }
+
 table.formsemestre_status tr td:first-child {
   padding-left: 4px;
 }
+
 table.formsemestre_status tr td:last-child {
   padding-right: 8px;
 }
+
 tr.formsemestre_status_green {
   background-color: #eff7f2;
 }
@@ -1804,11 +1830,15 @@ tr.formsemestre_status_green {
 tr.modimpl_non_conforme td {
   background-color: #ffc458;
 }
-tr.modimpl_non_conforme td, tr.modimpl_attente td {
+
+tr.modimpl_non_conforme td,
+tr.modimpl_attente td {
   padding-top: 4px;
   padding-bottom: 4px;
 }
-tr.modimpl_has_blocked span.nb_evals_blocked, tr span.evals_attente {
+
+tr.modimpl_has_blocked span.nb_evals_blocked,
+tr span.evals_attente {
   background-color: yellow;
   border-radius: 4px;
   font-weight: bold;
@@ -1816,13 +1846,16 @@ tr.modimpl_has_blocked span.nb_evals_blocked, tr span.evals_attente {
   padding-left: 4px;
   padding-right: 4px;
 }
+
 tr.modimpl_has_blocked span.nb_evals_blocked {
   color: red;
 }
+
 tr span.evals_attente {
   background-color: orange;
   color: green;
 }
+
 table.formsemestre_status a.redlink {
   text-decoration: none;
 }
@@ -1948,6 +1981,7 @@ ul.ue_inscr_list li.etud {
   padding: 16px;
   width: fit-content;
 }
+
 .sem-groups-abs h4 {
   font-style: italic;
   margin-bottom: 0px;
@@ -1958,6 +1992,7 @@ ul.ue_inscr_list li.etud {
   margin-left: 4px;
   font-size: 110%;
 }
+
 .sem-groups-partition {
   background-color: rgb(213, 203, 183);
   border-radius: 12px;
@@ -1967,13 +2002,16 @@ ul.ue_inscr_list li.etud {
   grid-template-columns: 240px auto;
 }
 
-.sem-groups-partition .stdlink, .sem-groups-partition .stdlink:visited {
+.sem-groups-partition .stdlink,
+.sem-groups-partition .stdlink:visited {
   color: black;
   text-decoration-style: dotted;
   text-underline-offset: 3px;
 }
-.sem-groups-list .stdlink,  .sem-groups-list .stdlink:visited {
-  color:rgb(0, 0, 192);
+
+.sem-groups-list .stdlink,
+.sem-groups-list .stdlink:visited {
+  color: rgb(0, 0, 192);
 }
 
 .sem-groups-list,
@@ -1983,10 +2021,11 @@ ul.ue_inscr_list li.etud {
   margin: 4px;
 }
 
-.sem-groups-list > div {
+.sem-groups-list>div {
   margin: 4px;
 }
-.sem-groups-assi > div {
+
+.sem-groups-assi>div {
   margin: 6px 8px 6px 8px;
 }
 
@@ -2038,7 +2077,7 @@ div#modimpl_coefs {
   font-size: 60%;
 }
 
-.coefs_histo > div {
+.coefs_histo>div {
   --height: calc(32px * var(--coef) / max(var(--max), 1));
   height: var(--height);
   padding: var(--height) 4px 0 4px;
@@ -2046,7 +2085,7 @@ div#modimpl_coefs {
   box-sizing: border-box;
 }
 
-.coefs_histo > div:nth-child(odd) {
+.coefs_histo>div:nth-child(odd) {
   background-color: #9c0;
 }
 
@@ -2065,7 +2104,7 @@ div.evaluation_titre {
   margin-left: 4px;
 }
 
-.evaluation_poids > div {
+.evaluation_poids>div {
   display: inline-flex;
   height: 12px;
   width: 12px;
@@ -2076,7 +2115,7 @@ div.evaluation_titre {
   justify-content: center;
 }
 
-.evaluation_poids > div > div {
+.evaluation_poids>div>div {
   height: var(--size);
   width: var(--size);
   background: #09c;
@@ -2113,7 +2152,8 @@ th.moduleimpl_evaluations a:hover {
   text-decoration: underline;
 }
 
-tr.mievr_in.evaluation_blocked th.moduleimpl_evaluation_moy span, tr.evaluation_blocked th.moduleimpl_evaluation_moy a {
+tr.mievr_in.evaluation_blocked th.moduleimpl_evaluation_moy span,
+tr.evaluation_blocked th.moduleimpl_evaluation_moy a {
   font-weight: bold;
   color: red;
   background-color: yellow;
@@ -2125,11 +2165,15 @@ tr.mievr {
   background-color: #eeeeee;
 }
 
-tr.mievr_rattr, tr.mievr_session2,  tr.mievr_bonus {
+tr.mievr_rattr,
+tr.mievr_session2,
+tr.mievr_bonus {
   background-color: #dddddd;
 }
 
-span.mievr_rattr, span.mievr_session2, span.mievr_bonus {
+span.mievr_rattr,
+span.mievr_session2,
+span.mievr_bonus {
   display: inline-block;
   font-weight: bold;
   font-size: 80%;
@@ -2166,20 +2210,21 @@ tr.mievr td {
 tr.mievr.non_visible_inter td,
 tr.mievr.non_visible_inter th {
   /* background-color: #d2cdc5; */
-  background: repeating-linear-gradient(
-    45deg,
-    #f0f0f0,
-    #f0f0f0 10px,
-    #e0e0e0 10px,
-    #e0e0e0 20px
-  );
+  background: repeating-linear-gradient(45deg,
+      #f0f0f0,
+      #f0f0f0 10px,
+      #e0e0e0 10px,
+      #e0e0e0 20px);
 }
 
-tr.mievr_tit.evaluation_blocked td,tr.mievr_tit.evaluation_blocked th {
+tr.mievr_tit.evaluation_blocked td,
+tr.mievr_tit.evaluation_blocked th {
   background-image: radial-gradient(#bd7777 1px, transparent 1px);
   background-size: 10px 10px;
 }
-tr.mievr_in.evaluation_blocked td, tr.mievr_in.evaluation_blocked th {
+
+tr.mievr_in.evaluation_blocked td,
+tr.mievr_in.evaluation_blocked th {
   background-color: rgb(195, 235, 255);
   padding-top: 4px;
 }
@@ -2266,8 +2311,7 @@ span.eval_coef_ue {
   margin-right: 2em;
 }
 
-span.eval_coef_ue_titre {
-}
+span.eval_coef_ue_titre {}
 
 /* Inscriptions modules/UE */
 div.list_but_ue_inscriptions {
@@ -2413,6 +2457,7 @@ table.formation_list_table td.buttons span.but_placeholder {
 .formation_list_table td.titre {
   width: 45%;
 }
+
 .formation_list_table td.commentaire {
   font-style: italic;
 }
@@ -2421,52 +2466,14 @@ table.formation_list_table td.buttons span.but_placeholder {
   font-size: 90%;
 }
 
-/* Presentation formation (ue_list) */
-div.formation_descr {
-  background-color: rgb(250, 250, 240);
-  border: 1px solid rgb(128, 128, 128);
-  padding-left: 5px;
-  padding-bottom: 5px;
-  margin-right: 12px;
-}
+/* Presentation formation (ue_table) */
 
-div.formation_descr span.fd_t {
-  font-weight: bold;
-  margin-right: 5px;
-}
-
-div.formation_descr span.fd_n {
-  font-weight: bold;
-  font-style: italic;
-  color: green;
-  margin-left: 6em;
-}
 
 span.explication {
   font-style: italic;
   color: var(--sco-color-explication);
 }
 
-div.formation_ue_list {
-  border: 1px solid black;
-  background-color: rgb(232, 249, 255);
-  margin-top: 5px;
-  margin-right: 12px;
-  padding-left: 5px;
-}
-
-div.formation_list_ues_titre {
-  padding-top: 6px;
-  padding-bottom: 6px;
-  padding-left: 24px;
-  padding-right: 24px;
-  font-size: 120%;
-  font-weight: bold;
-  border-top-right-radius: 18px;
-  border-top-left-radius: 18px;
-  background-color: #0051a9;
-  color: #eee;
-}
 
 div.formation_semestre_niveaux_warning {
   font-weight: bold;
@@ -2478,188 +2485,24 @@ div.formation_semestre_niveaux_warning {
   background-color: yellow;
   border-radius: 8px;
 }
+
 div.formation_semestre_niveaux_warning div {
   color: black;
   font-size: 110%;
 }
+
 div.formation_semestre_niveaux_warning ul {
   list-style-type: none;
   padding-left: 0;
 }
+
 div.formation_semestre_niveaux_warning ul li:before {
   content: '⚠️';
-  margin-right: 10px; /* Adjust space between emoji and text */
-}
-
-div.formation_list_modules,
-div.formation_list_ues {
-  border-radius: 18px;
-  margin-left: 10px;
   margin-right: 10px;
-  margin-bottom: 10px;
-  padding-bottom: 1px;
+  /* Adjust space between emoji and text */
 }
 
-div.formation_list_ues {
-  background-color: #b7d2fa;
-  margin-top: 20px;
-}
 
-div.formation_list_ues_content {
-  margin-top: 4px;
-}
-
-div.formation_list_modules {
-  margin-top: 20px;
-}
-
-div.formation_list_modules_RESSOURCE {
-  background-color: var(--sco-color-ressources);
-}
-
-div.formation_list_modules_SAE {
-  background-color: var(--sco-color-saes);
-}
-
-div.formation_list_modules_STANDARD {
-  background-color: var(--sco-color-mod-std);
-}
-
-div.formation_list_modules_titre {
-  padding-left: 24px;
-  padding-right: 24px;
-  font-weight: bold;
-  font-size: 120%;
-}
-
-div.formation_list_ues ul.notes_module_list {
-  margin-top: 0px;
-  margin-bottom: -1px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-div.formation_list_modules ul.notes_module_list {
-  margin-top: 0px;
-  margin-bottom: -1px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-span.missing_ue_ects {
-  color: red;
-  font-weight: bold;
-}
-
-li.module_malus span.formation_module_tit {
-  color: red;
-  font-weight: bold;
-  text-decoration: underline;
-}
-
-span.invalid-module-type {
-  color: red;
-  font-style: italic;
-}
-
-span.formation_module_ue {
-  color: #6e7d92;
-  font-size: 75%;
-}
-
-span.notes_module_list_buts {
-  margin-right: 5px;
-}
-
-.formation_apc_infos ul li:not(:last-child) {
-  margin-bottom: 6px;
-}
-
-div.formation_parcs {
-  display: inline-flex;
-  margin-left: 8px;
-  margin-right: 8px;
-  column-gap: 8px;
-}
-
-div.formation_parcs > div {
-  font-size: 100%;
-  color: white;
-  background-color: #09c;
-  opacity: 0.7;
-  border-radius: 4px;
-  text-align: center;
-  padding: 2px 6px;
-  margin-top: 8px;
-  margin-bottom: 2px;
-}
-div.formation_parcs > div.ue_tc {
-  color: black;
-  font-style: italic;
-}
-
-div.formation_parcs > div.focus {
-  opacity: 1;
-}
-
-div.formation_parcs > div > a:hover {
-  color: #ccc;
-}
-
-div.formation_parcs > div > a,
-div.formation_parcs > div > a:visited {
-  color: white;
-}
-
-div.ue_choix_niveau > div.formation_parcs > div {
-  font-size: 80%;
-}
-
-div.ue_list_tit {
-  font-weight: bold;
-  margin-top: 8px;
-}
-
-div.ue_list_tit form {
-  display: inline-block;
-}
-
-div.ue_list_tit span.lock_info {
-  color: red;
-  margin-left: 8px;
-}
-
-ul.apc_ue_list {
-  background-color: rgba(180, 189, 191, 0.14);
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-ul.notes_ue_list {
-  margin-top: 4px;
-  margin-right: 1em;
-  margin-left: 1em;
-  /* padding-top: 1em; */
-  padding-bottom: 1em;
-  font-weight: bold;
-}
-
-.formation_classic_infos ul.notes_ue_list {
-  padding-top: 0px;
-}
-
-.formation_classic_infos li.notes_ue_list {
-  margin-top: 9px;
-  list-style-type: none;
-  border: 1px solid maroon;
-  border-radius: 10px;
-  padding-bottom: 5px;
-}
-
-span.ue_type_1 {
-  color: green;
-  font-weight: bold;
-}
 
 span.ue_code {
   font-family: Courier, monospace;
@@ -2811,7 +2654,7 @@ div.cont_ue_choix_niveau {
   flex-wrap: wrap;
 }
 
-div.cont_ue_choix_niveau > div {
+div.cont_ue_choix_niveau>div {
   display: inline-flex;
   margin-left: 8px;
   align-items: center;
@@ -2892,11 +2735,11 @@ span.code_parcours.no_parcours {
   background-color: firebrick;
 }
 
-tr#tf_module_parcours > td {
+tr#tf_module_parcours>td {
   background-color: rgb(229, 229, 229);
 }
 
-tr#tf_module_app_critiques > td {
+tr#tf_module_app_critiques>td {
   background-color: rgb(194, 209, 228);
 }
 
@@ -3235,17 +3078,21 @@ a.bull_link:hover {
 div.bulletin_menubar {
   padding-left: 25px;
 }
+
 div.bull_titre_semestre {
   margin-top: 8px;
   margin-bottom: 8px;
   font-size: 120%;
 }
+
 div.bull_titre_semestre .parcours {
   margin-left: 12px;
 }
+
 .bull_liensemestre {
   font-weight: bold;
 }
+
 .bull_liensemestre a {
   color: rgb(255, 0, 0);
   text-decoration: none;
@@ -3414,7 +3261,8 @@ div.formsemestre-warning-box {
   /* padding-bottom: 1px; */
 }
 
-.warning, .warning-bloquant {
+.warning,
+.warning-bloquant {
   color: red;
   margin-left: 16px;
   margin-bottom: 8px;
@@ -3423,9 +3271,9 @@ div.formsemestre-warning-box {
 }
 
 .warning::before {
-  content:"";
+  content: "";
   margin-right: 8px;
-  height:32px;
+  height: 32px;
   width: 32px;
   background-size: 32px 32px;
   background-image: url(/ScoDoc/static/icons/warning_std.svg);
@@ -3435,7 +3283,7 @@ div.formsemestre-warning-box {
 }
 
 .warning.warning-info::before {
-  height:24px;
+  height: 24px;
   width: 24px;
   background-size: 24px 24px;
   background-image: url(/ScoDoc/static/icons/warning-info.svg);
@@ -3453,9 +3301,9 @@ div.formsemestre-warning-box {
 }
 
 .warning-bloquant::before {
-  content:"";
+  content: "";
   margin-right: 8px;
-  height:32px;
+  height: 32px;
   width: 32px;
   background-size: 32px 32px;
   background-image: url(/ScoDoc/static/icons/warning_bloquant.svg);
@@ -3737,13 +3585,11 @@ table.recap_hide_details tr.sem_precedent td.ue_acro span {
 }
 
 .recap_parcours tr.sem_autre_formation td.rcp_titre_sem {
-  background-image: repeating-linear-gradient(
-    -45deg,
-    rgb(100, 205, 193),
-    rgb(100, 205, 193) 2px,
-    transparent 5px,
-    transparent 40px
-  );
+  background-image: repeating-linear-gradient(-45deg,
+      rgb(100, 205, 193),
+      rgb(100, 205, 193) 2px,
+      transparent 5px,
+      transparent 40px);
 }
 
 .rcp_l2 td {
@@ -3847,10 +3693,12 @@ span.sp_etape {
   font-weight: bold;
   color: rgb(1, 76, 1) !important;
 }
+
 .inscrit-ailleurs {
   font-weight: bold;
   color: red !important;
 }
+
 div.etuds_select_boxes {
   margin-bottom: 16px;
 }
@@ -3981,14 +3829,14 @@ div.module_check_absences ul {
   z-index: 1;
 }
 
-.scoplement > div {
+.scoplement>div {
   text-align: left;
   display: inline-block;
   white-space: nowrap;
 }
 
-.scoplement > div:nth-child(1),
-.scoplement > div:nth-child(7) {
+.scoplement>div:nth-child(1),
+.scoplement>div:nth-child(7) {
   margin-bottom: 8px;
 }
 
@@ -4052,15 +3900,15 @@ table.formsemestre_description tbody tr.evaluation td {
 }
 
 /* --- */
-tr#tf_extue_decl > td,
-tr#tf_extue_note > td {
+tr#tf_extue_decl>td,
+tr#tf_extue_note>td {
   padding-top: 20px;
 }
 
-tr#tf_extue_titre > td,
-tr#tf_extue_acronyme > td,
-tr#tf_extue_type > td,
-tr#tf_extue_ects > td {
+tr#tf_extue_titre>td,
+tr#tf_extue_acronyme>td,
+tr#tf_extue_type>td,
+tr#tf_extue_ects>td {
   padding-left: 20px;
 }
 
@@ -4068,6 +3916,7 @@ table.formsemestre_enseignants_list tbody tr td.nbabsadded {
   text-align: right;
   padding-right: 1em;
 }
+
 /* ----------------------------- */
 
 div.form_rename_partition {
@@ -4112,12 +3961,12 @@ div.scobox.update_warning {
   background-color: rgb(250, 220, 220);
 }
 
-div.scobox.update_warning > div:first-child:before {
+div.scobox.update_warning>div:first-child:before {
   content: url(/ScoDoc/static/icons/warning_img.png);
   vertical-align: -80%;
 }
 
-div.scobox.update_warning > div:nth-child(2) {
+div.scobox.update_warning>div:nth-child(2) {
   font-size: 80%;
   padding-left: 8ex;
 }
@@ -4227,13 +4076,11 @@ div.apo_csv_status span {
 }
 
 div.apo_csv_status_nok {
-  background: url(/ScoDoc/static/icons/bullet_warning_img.png) no-repeat left
-    top 0px;
+  background: url(/ScoDoc/static/icons/bullet_warning_img.png) no-repeat left top 0px;
 }
 
 div.apo_csv_status_missing_elems {
-  background: url(/ScoDoc/static/icons/bullet_warning_img.png) no-repeat left
-    top 0px;
+  background: url(/ScoDoc/static/icons/bullet_warning_img.png) no-repeat left top 0px;
   padding-left: 22px;
 }
 
@@ -4814,6 +4661,7 @@ table.table_recap th.col_malus {
   font-weight: bold;
   color: rgb(165, 0, 0);
 }
+
 table.table_recap td.col_eval_bonus,
 table.table_recap th.col_eval_bonus {
   color: #90c;
@@ -5024,7 +4872,7 @@ div.cas_settings {
   background-color: #feb4e54f;
 }
 
-div.cas_settings > div,
+div.cas_settings>div,
 div.cas_settings div.form-group {
   margin-left: 8px;
 }
@@ -5034,4 +4882,4 @@ div.cas_etat_certif_ssl {
   margin-bottom: 8px;
   font-style: italic;
   color: rgb(231, 0, 0);
-}
+}
\ No newline at end of file
diff --git a/app/static/css/ue_table.css b/app/static/css/ue_table.css
new file mode 100644
index 000000000..54679babe
--- /dev/null
+++ b/app/static/css/ue_table.css
@@ -0,0 +1,217 @@
+div.formation_descr {
+  background-color: rgb(250, 250, 240);
+  border: 1px solid rgb(128, 128, 128);
+  padding-left: 5px;
+  padding-bottom: 5px;
+  margin-right: 12px;
+}
+
+div.formation_descr span.fd_t {
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+div.formation_descr span.fd_n {
+  font-weight: bold;
+  font-style: italic;
+  color: green;
+  margin-left: 6em;
+}
+
+
+div.formation_ue_list {
+  border: 1px solid black;
+  background-color: rgb(232, 249, 255);
+  margin-top: 5px;
+  margin-right: 12px;
+  padding-left: 5px;
+}
+
+div.formation_list_ues_titre {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 24px;
+  padding-right: 24px;
+  font-size: 120%;
+  font-weight: bold;
+  border-top-right-radius: 18px;
+  border-top-left-radius: 18px;
+  background-color: #0051a9;
+  color: #eee;
+}
+
+div.formation_list_modules,
+div.formation_list_ues {
+  border-radius: 18px;
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  padding-bottom: 1px;
+}
+
+div.formation_list_ues {
+  background-color: #b7d2fa;
+  margin-top: 20px;
+}
+
+div.formation_list_ues_content {
+  margin-top: 4px;
+}
+
+div.formation_list_modules {
+  margin-top: 20px;
+}
+
+div.formation_list_modules_RESSOURCE {
+  background-color: var(--sco-color-ressources);
+}
+
+div.formation_list_modules_SAE {
+  background-color: var(--sco-color-saes);
+}
+
+div.formation_list_modules_STANDARD {
+  background-color: var(--sco-color-mod-std);
+}
+
+div.formation_list_modules_titre {
+  padding-left: 24px;
+  padding-right: 24px;
+  font-weight: bold;
+  font-size: 120%;
+}
+
+div.formation_list_ues ul.notes_module_list {
+  margin-top: 0px;
+  margin-bottom: -1px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+div.formation_list_modules ul.notes_module_list {
+  margin-top: 0px;
+  margin-bottom: -1px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+span.missing_ue_ects {
+  color: red;
+  font-weight: bold;
+}
+
+span.niveau-nom {
+  color: black;
+}
+
+span.niveau-nom>span {
+  text-decoration: dashed underline;
+}
+
+.formation_apc_infos ul li:not(:last-child) {
+  margin-bottom: 6px;
+}
+
+div.formation_parcs {
+  display: inline-flex;
+  margin-left: 8px;
+  margin-right: 8px;
+  column-gap: 8px;
+}
+
+div.formation_parcs>div {
+  font-size: 100%;
+  color: white;
+  background-color: #09c;
+  opacity: 0.7;
+  border-radius: 4px;
+  text-align: center;
+  padding: 2px 6px;
+  margin-top: 8px;
+  margin-bottom: 2px;
+}
+
+div.formation_parcs>div.ue_tc {
+  color: black;
+  font-style: italic;
+}
+
+div.formation_parcs>div.focus {
+  opacity: 1;
+}
+
+div.formation_parcs>div>a:hover {
+  color: #ccc;
+}
+
+div.formation_parcs>div>a,
+div.formation_parcs>div>a:visited {
+  color: white;
+}
+
+div.ue_choix_niveau>div.formation_parcs>div {
+  font-size: 80%;
+}
+
+
+div.ue_list_tit {
+  font-weight: bold;
+  margin-top: 8px;
+}
+
+div.ue_list_tit form {
+  display: inline-block;
+}
+
+div.ue_list_tit span.lock_info {
+  color: red;
+  margin-left: 8px;
+}
+
+ul.apc_ue_list {
+  background-color: rgba(180, 189, 191, 0.14);
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+ul.notes_ue_list {
+  margin-top: 4px;
+  margin-right: 1em;
+  margin-left: 1em;
+  /* padding-top: 1em; */
+  padding-bottom: 1em;
+  font-weight: bold;
+}
+
+.formation_classic_infos ul.notes_ue_list {
+  padding-top: 0px;
+}
+
+.formation_classic_infos li.notes_ue_list {
+  margin-top: 9px;
+  list-style-type: none;
+  border: 1px solid maroon;
+  border-radius: 10px;
+  padding-bottom: 5px;
+}
+
+
+li.module_malus span.formation_module_tit {
+  color: red;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+span.invalid-module-type {
+  color: red;
+  font-style: italic;
+}
+
+span.formation_module_ue {
+  color: #6e7d92;
+  font-size: 75%;
+}
+
+span.notes_module_list_buts {
+  margin-right: 5px;
+}
\ No newline at end of file
diff --git a/app/static/icons/warning-info.svg b/app/static/icons/warning-info.svg
new file mode 100644
index 000000000..ec91c4c40
--- /dev/null
+++ b/app/static/icons/warning-info.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-34.1074" y1="645.6909" x2="-34.1074" y2="622.0029" gradientTransform="matrix(20.48 0 0 -20.48 954.52 13234.4395)">
+	<stop  offset="0" style="stop-color:#FF9400"/>
+	<stop  offset="1" style="stop-color:#FF5F39"/>
+</linearGradient>
+<path style="fill:url(#SVGID_1_);" d="M296.182,382.792c-1.577,3.83-5.325,6.328-9.462,6.328h-20.48h-20.48h-20.48
+	c-4.137,0-7.885-2.499-9.462-6.328c-1.577-3.83-0.696-8.233,2.232-11.162l17.469-17.469V239.759l-17.469-17.49
+	c-2.929-2.929-3.809-7.332-2.232-11.162c1.577-3.83,5.325-6.308,9.462-6.308h20.48H256h10.24c5.652,0,10.24,4.567,10.24,10.24
+	v139.121l17.49,17.469C296.878,374.559,297.759,378.962,296.182,382.792 M256,122.88c16.937,0,30.72,13.763,30.72,30.72
+	c0,16.937-13.783,30.72-30.72,30.72s-30.72-13.783-30.72-30.72C225.28,136.643,239.063,122.88,256,122.88 M256,0
+	C114.852,0,0,114.831,0,256c0,141.148,114.852,256,256,256c141.169,0,256-114.852,256-256C512,114.831,397.169,0,256,0"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>