From 95a2a3daebc204851de520c5b09695123d39e812 Mon Sep 17 00:00:00 2001
From: Emmanuel Viennet <emmanuel.viennet@gmail.com>
Date: Sat, 23 Dec 2023 14:14:23 +0100
Subject: [PATCH] cosmetic

---
 app/static/css/assiduites.css                 |  2 +-
 .../assiduites/explication_etats_justifs.j2   | 49 +++++++++++--------
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/app/static/css/assiduites.css b/app/static/css/assiduites.css
index 10a7508a..a19f0d9e 100644
--- a/app/static/css/assiduites.css
+++ b/app/static/css/assiduites.css
@@ -646,7 +646,7 @@
 .assi-liste {
   border: 1px solid gray;
   border-radius: 12px;
-  margin-right: 12px;
+  margin-right: 24px;
   padding: 12px;
 }
 #options-tableau label {
diff --git a/app/templates/assiduites/explication_etats_justifs.j2 b/app/templates/assiduites/explication_etats_justifs.j2
index 3c1f0903..c8b0dc1b 100644
--- a/app/templates/assiduites/explication_etats_justifs.j2
+++ b/app/templates/assiduites/explication_etats_justifs.j2
@@ -1,37 +1,47 @@
 {# Explication des états des justificatifs #}
 
 <div class="explication-etats-justifs">
+    <div class="explication-titre">États des justificatifs</div>
+    <div class="explication-etats">
+        <div class="valide">Justificatif valide</div>
+        <div class="legend">ayant été considéré comme valide, justifie les absences
+        ou retards de la période
+        </div>
 
-<div class="valide">Justificatif valide</div>
-<div class="legend">ayant été considéré comme valide, justifie les absences
-ou retards de la période
-</div>
+        <div class="attente">Justificatif soumis</div>
+        <div class="legend">en attente de validation. Les absences ne sont pas
+        encore considérées comme justifiées.
+        </div>
 
-<div class="attente">Justificatif soumis</div>
-<div class="legend">en attente de validation. Les absences ne sont pas
-encore considérées comme justifiées.
-</div>
-
-<div class="modifie">Justificatif modifié</div>
-<div class="legend">une information a été ajoutée ou modifiée. Doit être validé avant
-d'être pris en en compte.
-</div>
-
-<div class="invalide">Justificatif invalide</div>
-<div class="legend">proposé mais considéré comme non valide.
-Les absences ne sont pas justifiées.
-</div>
+        <div class="modifie">Justificatif modifié</div>
+        <div class="legend">une information a été ajoutée ou modifiée. Doit être validé avant
+        d'être pris en en compte.
+        </div>
 
+        <div class="invalide">Justificatif invalide</div>
+        <div class="legend">proposé mais considéré comme non valide.
+        Les absences ne sont pas justifiées.
+        </div>
+    </div>
 </div>
 
 <style>
 .explication-etats-justifs {
     margin-top: 32px;
     margin-left: 12px;
+    padding: 8px;
+}
+.explication-etats-justifs .explication-titre {
+    font-size: 110%;
+    font-weight: bold;
+    margin-bottom: 8px;
+}
+.explication-etats-justifs .explication-etats {
     display: grid;
     grid-template-columns: auto 1fr;
+    font-size: 80%;
 }
-.explication-etats-justifs > div {
+.explication-etats > div {
     margin-bottom: 8px;
     margin-right: 8px;
     padding: 6px;
@@ -42,7 +52,6 @@ Les absences ne sont pas justifiées.
 .valide {
     background-color: var(--color-justi);
 }
-
 .attente {
     background-color: var(--color-justi-attente);
 }