UX/UI: Passer le bouton “Modifier” de la fiche de poste à droite

[hellodeloo]

🤔 Pourquoi ?

Parcqu'il était tout seul dans une barre d'action prévue pour plusieurs boutons et que nous avons une mise en page prévue pour un seul bouton d'action

💻 Captures d'écran

Avant

Apres

[notion-workspace]

☠️ Passer le bouton “Modifier” en bouton primary à droite

[github-actions]

🥁 La recette jetable est prête ! 👉 Je veux tester cette PR !

[tonial]

Mais du coup ces bouton là aussi ont le même problème, non ?

[hellodeloo]

Le problème c'était que le bouton "Modifier" apparaissait seul dans la box d'action et que les UX préfèrent que s'il n'y a qu'un seul bouton, il apparaisse seul à la droite du titre, sans box d'action. S'il y a plusieurs boutons, alors là, OK, dans la box d'actions

Donc, a priori, les boutons changent juste de mise en page, pas de conditions d'apparitions (sauf si j'ai merdoullé)

[tonial]

👌 j'avais l'impression qu'il n'y avait qu'un seul bouton, mais en fait il peut y en avoir plusieurs

[francoisfreitag]

Pour éviter les redites, le patch suivant permet de mutualiser le code, au prix d’un peu de différence dans les espacements.

Peut-être l’améliorer un peu ?

diff --git a/itou/templates/companies/job_description_card.html b/itou/templates/companies/job_description_card.html
index 2a83ad370..0d4c30904 100644
--- a/itou/templates/companies/job_description_card.html
+++ b/itou/templates/companies/job_description_card.html
@@ -26,18 +26,18 @@
         {% include "apply/includes/job_application_external_transfer_progress.html" with job_app_to_transfer=job_app_to_transfer step=1 only %}
     {% endif %}
 
-    {% if can_update_job_description %}
-        <div class="d-flex flex-column flex-md-row gap-3 mb-3 mb-md-4 justify-content-md-between">
-            <div>
-                <h1 class="m-1">{{ job.display_name }}</h1>
-                {% if job.is_active %}
-                    <p class="mb-0">
-                        <span class="badge rounded-pill bg-success">
-                            {{ job.open_positions }} poste{{ job.open_positions|pluralizefr }} ouvert{{ job.open_positions|pluralizefr }} au recrutement
-                        </span>
-                    </p>
-                {% endif %}
-            </div>
+    <div class="d-flex flex-column flex-md-row gap-3 mb-3 mb-md-4 justify-content-md-between">
+        <div>
+            <h1>{{ job.display_name }}</h1>
+            {% if job.is_active %}
+                <p class="mt-n2">
+                    <span class="badge rounded-pill bg-success">
+                        {{ job.open_positions }} poste{{ job.open_positions|pluralizefr }} ouvert{{ job.open_positions|pluralizefr }} au recrutement
+                    </span>
+                </p>
+            {% endif %}
+        </div>
+        {% if can_update_job_description %}
             <div>
                 <a href="{% url "companies_views:update_job_description" job_description_id=job.pk %}"
                    class="btn btn-lg btn-block btn-primary btn-ico"
@@ -47,17 +47,8 @@
                     <span>Modifier</span>
                 </a>
             </div>
-        </div>
-    {% else %}
-        <h1>{{ job.display_name }}</h1>
-        {% if job.is_active %}
-            <p class="mt-n2">
-                <span class="badge rounded-pill bg-success">
-                    {{ job.open_positions }} poste{{ job.open_positions|pluralizefr }} ouvert{{ job.open_positions|pluralizefr }} au recrutement
-                </span>
-            </p>
         {% endif %}
-    {% endif %}
+    </div>
 
     <div class="c-box c-box--action">
         <h2 class="visually-hidden">Actions rapides</h2>