Ajout du survol sur les Super ESI (#1083)

* first try * improve css of tooltip * remove hard link 'a' for siae card * update click mode for search * include inside tooltip * update fixtures * fix inner size
gip-inclusion · Feb 14, 2024 · dc791d1 · dc791d1
1 parent 14cfe43
commit dc791d1
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 12 deletions.
diff --git a/lemarche/fixtures/django/01_siaes.json b/lemarche/fixtures/django/01_siaes.json
@@ -103967,7 +103967,8 @@
             "source": "ASP",
             "created_at": "2020-04-09T13:36:57.328Z",
             "updated_at": "2020-12-18T10:40:08.674Z",
-            "slug": "ei-garage-martinet-siege-13"
+            "slug": "ei-garage-martinet-siege-13",
+            "super_badge": true
         }
     },
     {
@@ -103994,7 +103995,8 @@
             "source": "GEIQ",
             "created_at": "2020-04-14T16:09:19.471Z",
             "updated_at": "2020-12-18T09:56:51.812Z",
-            "slug": "geiq-vertigo-films-13"
+            "slug": "geiq-vertigo-films-13",
+            "super_badge": true
         }
     },
     {
@@ -104022,7 +104024,8 @@
             "source": "ASP",
             "created_at": "2020-12-01T10:30:23.006Z",
             "updated_at": "2020-12-18T10:40:07.948Z",
-            "slug": "job-insertion-90-90"
+            "slug": "job-insertion-90-90",
+            "super_badge": true
         }
     },
     {
@@ -104053,7 +104056,8 @@
             "source": "USER_CREATED",
             "created_at": "2020-12-18T13:08:07.627Z",
             "updated_at": "2020-12-18T13:08:08.043Z",
-            "slug": "el-garage-martinet-nord-13"
+            "slug": "el-garage-martinet-nord-13",
+            "super_badge": true
         }
     },
     {
@@ -104114,4 +104118,4 @@
             "slug": "les-moulins-de-limmobilier-13"
         }
     }
-]
+]
diff --git a/lemarche/static/itou_marche/sections/_siae.scss b/lemarche/static/itou_marche/sections/_siae.scss
@@ -255,7 +255,9 @@
 
 .siae-card {
 	margin-bottom: 1.5rem;
-
+	&[data-url]{
+		cursor: pointer;
+	};
 	.sc-profile-type,
 	.sc-profile-sectors {
 		span.ml-1 {
@@ -309,6 +311,10 @@ $super-badge-color: #ffbe18;
 	line-height: 20px;
 	letter-spacing: 0px;
 	text-align: left;
+
+	&:hover {
+		cursor: help;
+	}
 }
 
 .super-badge-tab {

diff --git a/lemarche/static/itou_marche/utils.scss b/lemarche/static/itou_marche/utils.scss
@@ -27,3 +27,18 @@
         transform: rotate(360deg);
     }
 }
+
+.tooltip-inner {
+    max-width: 50em;
+    padding: 3px 8px;
+    background-color: #fff;
+    color: #000;
+    text-align: left;
+    border: 1px solid #cccdd7;
+    border-radius: 0.25rem;
+}
+
+.icon-success {
+    color: $green;
+    font-weight: bold;
+}
diff --git a/lemarche/static/js/utils.js b/lemarche/static/js/utils.js
@@ -22,6 +22,26 @@ window.addEventListener('DOMContentLoaded', function () {
 
     initModalMessages();
 
+    $('.super-badge-badge').each(function (element) {
+        $(this).tooltip(
+            {
+                html: true,
+                placement: "bottom",
+                title: $('#tooltip-super-badge').html()
+            });
+    });
+
+    document.querySelectorAll('.siae-card[data-url]').forEach(function (card) {
+        card.addEventListener('click', function (event) {
+            if (event.target.className == 'ri-star-line ri-xl') {
+                // manage case of favorites
+                event.preventDefault()
+            }
+            else if (this.dataset.url) window.open(this.dataset.url, '_blank');
+
+        });
+    });
+
     $('.s-tabs-01__nav .nav-item').on('click', function (event) {
         event.preventDefault()
         let tabContent = this.parentElement.parentElement.querySelector(".tab-content");

diff --git a/lemarche/templates/dashboard/home_siae.html b/lemarche/templates/dashboard/home_siae.html
@@ -139,5 +139,6 @@ <h1 class="s-title-01__title h1"><strong>Tableau de bord</strong></h1>
 {% endif %}
 
 {% include "dashboard/_aides_territoires_section.html" with extra_class="pt-3" %}
+{% include "includes/_super_siae_arguments_badge.html" %}
 
 {% endblock %}
diff --git a/lemarche/templates/favorites/dashboard_favorite_list_detail.html b/lemarche/templates/favorites/dashboard_favorite_list_detail.html
@@ -72,6 +72,8 @@ <h1 class="h1 mb-3 mb-lg-5 d-flex justify-content-between">
         </div>
     </div>
 </section>
+    {% include "includes/_super_siae_arguments_badge.html" %}
+
 {% endblock %}
 
 {% block modals %}

diff --git a/lemarche/templates/includes/_super_siae_arguments_badge.html b/lemarche/templates/includes/_super_siae_arguments_badge.html
@@ -0,0 +1,10 @@
+<div class="d-none">
+    <div id="tooltip-super-badge">
+        <ul class="list-unstyled pt-1">
+            <li><i class="ri-check-line icon-success"></i> Fiche commerciale complète et mise à jour régulièrement</li>
+            <li><i class="ri-check-line icon-success"></i> Taux de réponse élevé</li>
+            <li><i class="ri-check-line icon-success"></i> Délai moyen de réponse élevé</li>
+            <li><i class="ri-check-line icon-success"></i> Coordonnées de contact à jour</li>
+        </ul>
+    </div>
+</div>
diff --git a/lemarche/templates/networks/dashboard_network_tender_siae_list.html b/lemarche/templates/networks/dashboard_network_tender_siae_list.html
@@ -76,4 +76,6 @@ <h1 class="mb-3 mb-lg-5">Mes adhérents notifiés et intéressés par cette oppo
         </div>
     </div>
 </section>
+{% include "includes/_super_siae_arguments_badge.html" %}
+
 {% endblock %}
diff --git a/lemarche/templates/siaes/_card_search_result.html b/lemarche/templates/siaes/_card_search_result.html
@@ -1,7 +1,7 @@
 {% load static siae_sectors_display %}
 {% load theme_inclusion %}
 
-<div class="card c-card c-card--hovershadow siae-card {% if siae.super_badge %}super-badge-card{% endif %}">
+<div class="card c-card c-card--hovershadow siae-card {% if siae.super_badge %}super-badge-card{% endif %}" data-url="{% url 'siae:detail' siae.slug %}" role="button">
     <div class="card-header">
         <div class="row">
             <div class="col-auto">
@@ -28,7 +28,6 @@ <h2 class="h4 mb-0">
         </div>
     </div>
     <div class="card-body">
-        <a href="{% url 'siae:detail' siae.slug %}" target="_blank" id="search-results-siae-card" class="text-decoration-none stretched-link">
             <ul class="list-unstyled m-0 lh-sm row no-gutters">
                 <li class="sc-profile-type col-12 col-lg-6 pr-lg-2 d-flex">
                     <i class="ri-briefcase-4-line mr-1"></i>
@@ -58,10 +57,8 @@ <h2 class="h4 mb-0">
                     <i class="ri-star-line ri-xl"></i>
                 </a>
             {% endif %}
-        </a>
     </div>
     <div class="card-footer fs-sm">
-        <a href="{% url 'siae:detail' siae.slug %}" target="_blank" id="search-results-siae-card" class="text-primary text-decoration-none stretched-link">
             <span>
                 <i class="ri-map-pin-line"></i>
                 <span class="sr-only">Situé à {{ siae.city }}</span>
@@ -85,6 +82,5 @@ <h2 class="h4 mb-0">
                 <span class="sr-only">Type de structure : {{ siae.get_kind_display }}</span>
                 <span>{{ siae.get_kind_display }}</span>
             </span>
-        </a>
     </div>
 </div>
diff --git a/lemarche/templates/siaes/_card_tender.html b/lemarche/templates/siaes/_card_tender.html
@@ -1,6 +1,6 @@
 {% load static %}
 
-<div class="card c-card siae-card super-esi-card {% if siae.super_badge %}super-badge-card{% endif %}">
+<div class="card c-card siae-card {% if siae.super_badge %}super-badge-card{% endif %}">
     <div class="card-header">
         <div class="row">
             <div class="col-auto">

diff --git a/lemarche/templates/siaes/detail.html b/lemarche/templates/siaes/detail.html
@@ -264,6 +264,8 @@ <h3 class="h2 m-0">
         </div>
     </div>
 </section>
+{% include "includes/_super_siae_arguments_badge.html" %}
+
 {% endblock %}
 
 {% block modals %}

diff --git a/lemarche/templates/siaes/search_results.html b/lemarche/templates/siaes/search_results.html
@@ -300,6 +300,8 @@ <h1 class="h4 mb-0">
             </div>
         </div>
     </section>
+    {% include "includes/_super_siae_arguments_badge.html" %}
+
 {% endblock %}
 {% block modals %}
     {% include "auth/_login_or_signup_modal.html" %}

diff --git a/lemarche/templates/tenders/siae_interested_list.html b/lemarche/templates/tenders/siae_interested_list.html
@@ -137,6 +137,8 @@ <h1 class="mb-3 mb-lg-5">{{ siaes.count }} prestataire{{ siaes.count|pluralize }
         {% endblock %}
     </div>
 </section>
+{% include "includes/_super_siae_arguments_badge.html" %}
+
 {% endblock %}