From d9486ce447fa3d0f60953dd590a608b575a28d28 Mon Sep 17 00:00:00 2001
From: Yoan Le Clanche <yoanl@pilotsystems.net>
Date: Wed, 30 Nov 2022 15:34:52 +0100
Subject: [PATCH] Multipart seminar breadcrumb integration :
 https://trackers.pilotsystems.net/prebarreau/0574

---
 teleforma/static/teleforma/css/teleforma.css  | 63 +++++++++++++++++--
 .../templates/teleforma/seminar_detail.html   |  8 +--
 2 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/teleforma/static/teleforma/css/teleforma.css b/teleforma/static/teleforma/css/teleforma.css
index 1d8c5715..187313aa 100644
--- a/teleforma/static/teleforma/css/teleforma.css
+++ b/teleforma/static/teleforma/css/teleforma.css
@@ -2191,19 +2191,70 @@ form .exceed{
 }
 
 /*** TABS ***/
-.multipart-tabs li {
-    display: inline-block;
+.multipart-tabs {
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 5px 0;
+}
+.multipart-tabs .tab-link {
+    position: relative;
+    display:flex;
+    justify-content: start;
+    align-items: center;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    height: 36px;
+    background-color: #393;
+    color: white;
+    padding: 0 10px;
+    margin: 2px 10px 2px 0px;
+    transition: all 0.3s;
+}
+.multipart-tabs .tab-link:hover, .multipart-tabs .tab-link.active {
+    background-color: #171;
+}
+.multipart-tabs .tab-link span {
+    z-index: 1;
+}
+.multipart-tabs .tab-link .part-index {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    color: black;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    margin-right: 10px;
+}
+.multipart-tabs .tab-link:not(:last-child):after {
+    content: "";
+    border-left: 10px solid #393;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    background-color: transparent;
+    right: -10px;
+    position: absolute;
+    z-index: 0;
+}
+.multipart-tabs .tab-link:hover:not(:last-child):after, .multipart-tabs .tab-link.active:not(:last-child):after {
+    border-left: 10px solid #171;
+}
+.multipart-tabs .tab-link:not(:last-child).disabled:after {
+    border-left: 10px solid #ccc;
+}
+.multipart-tabs .disabled {
+    pointer-events: none;
+    background-color: #ccc;
+    color: black;
 }
 .multipart-tabs li {
     font-size: 0.9em;
 }
 .multipart-tabs .disabled {
-    color: grey;
     pointer-events: none;
 }
-.multipart-tabs .active {
-    font-weight: bold;
-}
 .tab-content {
   display: none;
   padding: 6px 12px;
diff --git a/teleforma/templates/teleforma/seminar_detail.html b/teleforma/templates/teleforma/seminar_detail.html
index ccfc7bd5..74259999 100644
--- a/teleforma/templates/teleforma/seminar_detail.html
+++ b/teleforma/templates/teleforma/seminar_detail.html
@@ -182,12 +182,12 @@
   {% if seminar.is_multipart %}
 
   <div class="multipart">
-    <ul class="multipart-tabs">
+    <div class="multipart-tabs">
       {% for part in parts %}
-      <li><a href="#part-{{ part.index }}" class="tab-link {% if part.validated %}validated{% endif %} {% if not part.accessible %}disabled{% endif %}">{% if part.object.title %}{{ part.object.title }}{% else %}Séquence {{ part.index }}{% endif %} > </a></li>
+      <a href="#part-{{ part.index }}" class="tab-link {% if part.validated %}validated{% endif %} {% if not part.accessible %}disabled{% endif %}"><span class="part-index">{{ part.index }}</span><span>{% if part.object.title %}{{ part.object.title }}{% else %}Séquence {{ part.index }}{% endif %}</span></a>
       {% endfor %}
-      <li><a href="#part-last" class="tab-link {% if not seminar_progress == 100 %}disabled{% endif %}">Attestation</a></li>
-    </ul>
+      <a href="#part-last" class="tab-link {% if not seminar_progress == 100 %}disabled{% endif %}"><span class="part-index">{{ parts|length|add:1 }}</span>Attestation</a></li>
+    </div>
 
 
     {% for part in parts %}
-- 
2.39.5