style(interventions): standardize timeline status badge widths and use distinct purple for status event

- Assign fixed 115px width to all status badges for vertical alignment of transitions
- Unify left event badge width to 85px for a clean tabular layout
- Use purple (#6f42c1) for the 'Statut' badge and node icon to avoid visual collision with status colors
- Update timeline unit tests accordingly

loko/interventions/models.py

@@ -1331,7 +1331,7 @@ class InterventionTimeLine(models.Model):
     def get_badge_class(self):
         return {
             'creation': 'bg-success',
-            'status_change': 'bg-primary',
+            'status_change': 'bg-purple',
             'assignment': 'bg-info text-dark',
             'transfer': 'bg-warning text-dark',
             'modification': 'bg-secondary',

loko/interventions/static/interventions/timeline.css

@@ -237,3 +237,28 @@
     margin-bottom: 0.25rem;
 }
 
+/* Badges de l'historique : type d'événement & statut */
+.history-event-badge {
+    display: inline-block;
+    min-width: 85px;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.history-status-badge {
+    display: inline-block;
+    width: 115px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+/* Couleur violette/pourpre pour le badge et marqueur 'Statut' (absente des statuts d'intervention) */
+.bg-purple {
+    background-color: #6f42c1 !important;
+    color: #ffffff !important;
+}
+
+

loko/interventions/templates/interventions/detail/card_chronologie.html

@@ -55,43 +55,43 @@
                         <!-- Event Info -->
                         <div class="d-flex flex-wrap align-items-center gap-2">
                             {% if event.event_type == 'status_change' %}
-                                <span class="badge bg-primary">{% translate "Statut" %}</span>
+                                <span class="badge bg-purple history-event-badge">{% translate "Statut" %}</span>
                                 {% if event.from_status %}
-                                    <span class="badge bg-{{ event.get_from_status_color }}">{{ event.get_from_status_display }}</span>
+                                    <span class="badge bg-{{ event.get_from_status_color }} history-status-badge" title="{{ event.get_from_status_display }}">{{ event.get_from_status_display }}</span>
                                     <i class="bi bi-arrow-right text-muted small"></i>
                                 {% endif %}
-                                <span class="badge bg-{{ event.get_to_status_color }}">{{ event.get_to_status_display }}</span>
+                                <span class="badge bg-{{ event.get_to_status_color }} history-status-badge" title="{{ event.get_to_status_display }}">{{ event.get_to_status_display }}</span>
                                 {% if event.event_description %}
                                     <span class="small text-muted ms-1">({{ event.event_description }})</span>
                                 {% endif %}
                             {% elif event.event_type == 'assignment' %}
-                                <span class="badge bg-info text-dark">{% translate "Assignation" %}</span>
+                                <span class="badge bg-info text-dark history-event-badge">{% translate "Assignation" %}</span>
                                 <span class="fw-semibold text-dark">{{ event.event_description|default:_("Assignation mise à jour") }}</span>
                             {% elif event.event_type == 'creation' %}
-                                <span class="badge bg-success">{% translate "Création" %}</span>
+                                <span class="badge bg-success history-event-badge">{% translate "Création" %}</span>
                                 <span class="fw-semibold text-dark">{% translate "Intervention initialisée" %}</span>
                                 {% if event.to_status %}
-                                    <span class="badge bg-{{ event.get_to_status_color }} ms-1">{{ event.get_to_status_display }}</span>
+                                    <span class="badge bg-{{ event.get_to_status_color }} history-status-badge ms-1" title="{{ event.get_to_status_display }}">{{ event.get_to_status_display }}</span>
                                 {% endif %}
                             {% elif event.event_type == 'transfer' %}
-                                <span class="badge bg-warning text-dark">{% translate "Transfert" %}</span>
+                                <span class="badge bg-warning text-dark history-event-badge">{% translate "Transfert" %}</span>
                                 <span class="fw-semibold text-dark">{{ event.event_description|default:_("Intervention transférée") }}</span>
                             {% elif event.event_type == 'modification' %}
-                                <span class="badge bg-secondary">{% translate "Modification" %}</span>
+                                <span class="badge bg-secondary history-event-badge">{% translate "Modification" %}</span>
                                 <span class="fw-semibold text-secondary">{{ event.event_description|default:_("Attributs modifiés") }}</span>
                             {% elif event.event_type == 'note' %}
-                                <span class="badge bg-info text-dark">{% translate "Note" %}</span>
+                                <span class="badge bg-info text-dark history-event-badge">{% translate "Note" %}</span>
                                 <span class="fw-semibold text-dark">{{ event.event_description }}</span>
                             {% elif event.event_type == 'document' %}
-                                <span class="badge bg-secondary">{% translate "Document" %}</span>
+                                <span class="badge bg-secondary history-event-badge">{% translate "Document" %}</span>
                                 <span class="fw-semibold text-dark">{{ event.event_description }}</span>
                             {% elif event.event_type == 'link' %}
-                                <span class="badge bg-dark">{% translate "Lien" %}</span>
+                                <span class="badge bg-dark history-event-badge">{% translate "Lien" %}</span>
                                 <span class="fw-semibold text-dark">{{ event.event_description }}</span>
                             {% else %}
-                                <span class="badge bg-secondary">{{ event.get_event_type_display }}</span>
+                                <span class="badge bg-secondary history-event-badge">{{ event.get_event_type_display }}</span>
                                 {% if event.to_status %}
-                                    <span class="badge bg-{{ event.get_to_status_color }} ms-1">{{ event.get_to_status_display }}</span>
+                                    <span class="badge bg-{{ event.get_to_status_color }} history-status-badge ms-1" title="{{ event.get_to_status_display }}">{{ event.get_to_status_display }}</span>
                                 {% endif %}
                             {% endif %}
                         </div>

loko/interventions/templates/interventions/detail/styles.html

@@ -582,4 +582,28 @@
             padding-bottom: 0.25rem;
             margin-bottom: 0.25rem;
         }
+
+        /* Badges de l'historique : type d'événement & statut */
+        .history-event-badge {
+            display: inline-block;
+            min-width: 85px;
+            text-align: center;
+            vertical-align: middle;
+        }
+
+        .history-status-badge {
+            display: inline-block;
+            width: 115px;
+            text-align: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            vertical-align: middle;
+        }
+
+        /* Couleur violette/pourpre pour le badge et marqueur 'Statut' (absente des statuts d'intervention) */
+        .bg-purple {
+            background-color: #6f42c1 !important;
+            color: #ffffff !important;
+        }
     </style>

loko/interventions/tests/test_timeline_history.py

@@ -88,7 +88,7 @@ class TimelineHistoryTests(TestCase):
         self.assertTrue(event_status.is_default_visible)
         self.assertFalse(event_status.is_modification)
         self.assertFalse(event_status.is_assignment)
-        self.assertEqual(event_status.get_badge_class(), 'bg-primary')
+        self.assertEqual(event_status.get_badge_class(), 'bg-purple')
         self.assertEqual(event_status.get_icon(), 'bi-arrow-repeat')
 
         # Assignment event
@@ -466,4 +466,8 @@ class TimelineHistoryTests(TestCase):
         self.assertContains(response, 'data-event-type="note"')
         self.assertContains(response, 'data-event-type="document"')
         self.assertContains(response, 'data-event-type="link"')
+        self.assertContains(response, 'history-event-badge')
+        self.assertContains(response, 'history-status-badge')
+        self.assertContains(response, 'bg-purple')
+