adapt siae dashboard

gip-inclusion · Jul 16, 2024 · af186f8 · af186f8
1 parent d9958f2
commit af186f8
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 78 deletions.
diff --git a/lemarche/templates/dashboard/_add_siae_card.html b/lemarche/templates/dashboard/_add_siae_card.html
@@ -1,22 +1,30 @@
 {% load static %}
-
-<div class="card h-45 w-100">
+<div class="fr-card fr-card--horizontal fr-card--horizontal-tier">
     <div class="fr-card__body">
-        <div class="d-flex align-items-center">
-            <span class="d-none d-lg-inline-flex mr-3">
-                <img src="{% static 'images/illustration-28b.svg' %}" height="200" alt="" />
-            </span>
-            <div>
-                <p class="h4 lh-sm mb-lg-4">Ajouter une structure</p>
+        <div class="fr-card__content">
+            <h3 class="fr-card__title">
+                Ajouter une structure
+            </h3>
+            <div class="fr-card__desc">
                 <p>
                     Ajoutez votre première structure afin d'être visible auprès des acheteurs qui consultent le marché.
                     Complétez au maximum les informations vous permettra de remonter dans les résultats de recherche.
                 </p>
-                <a href="{% url 'dashboard_siaes:siae_search_by_siret' %}" id="add-siae-first-btn" class="btn btn-primary btn-ico width-100 width-md-auto">
-                    <i class="ri-add-fill ri-lg"></i>
-                    <span>Ajouter une structure</span>
-                </a>
             </div>
         </div>
+        <div class="fr-card__footer">
+            <ul class="fr-btns-group fr-btns-group--right fr-btns-group--icon-right fr-btns-group--inline">
+                <li>
+                    <a id="add-siae-first-btn" class="fr-btn fr-btn--icon-right fr-icon-add-line" href="{% url 'dashboard_siaes:siae_search_by_siret' %}">
+                        Ajouter une structure
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="fr-card__header">
+        <div class="fr-card__img">
+            <img class="fr-responsive-img" src="{% static 'images/illustration-28b.svg' %}" alt="" height="200" />
+        </div>
     </div>
-</div>
+</div>
diff --git a/lemarche/templates/dashboard/_api_key_card.html b/lemarche/templates/dashboard/_api_key_card.html
@@ -1,23 +1,19 @@
 {% load static %}
 
-<div class="card h-45 w-100 mb-3 mb-lg-5">
+<div class="fr-card fr-card--horizontal fr-card--horizontal-tier">
     <div class="fr-card__body">
-        <div class="d-flex align-items-center">
-            <span class="d-none d-lg-inline-flex mr-3">
-                <img src="{% static 'images/illustration-28.svg' %}" height="100" alt="" loading="lazy" />
-            </span>
-            <div>
-                <p class="h4 lh-sm mb-lg-4">API</p>
+        <div class="fr-card__content">
+            <h3 class="fr-card__title">
+                API
+            </h3>
+            <div class="fr-card__desc">
                 {% if api_key %}
-                    <div class="form-group">
-                        <label class="sr-only" for="user-api-key">Votre token</label>
-                        <div class="input-group input-group-sm">
-                            <input type="text" id="user-api-key" class="form-control" value="{{ api_key }}" readonly />
-                            <div class="input-group-append">
-                                <button type="button" id="user-api-key-copy-button" class="btn btn-sm btn-primary">Copier</button>
-                            </div>
+                    <div class="fr-input-group">
+                        <label class="fr-label" for="user-api-key">Votre token</label>
+                        <input type="text" id="user-api-key" class="fr-input" value="{{ api_key }}" readonly />
+                        <div class="fr-input-group__append">
+                            <button type="button" id="user-api-key-copy-button" class="fr-btn fr-btn--sm">Copier</button>
                         </div>
-                        <small class="form-text text-muted">Votre token</small>
                     </div>
                 {% else %}
                     {% if user_kind == "BUYER" %}
@@ -29,16 +25,23 @@
                 {% endif %}
             </div>
         </div>
+        <div class="fr-card__footer">
+            <ul class="fr-btns-group fr-btns-group--icon-right fr-btns-group--right fr-btns-group--inline">
+                <li>
+                    <a class="fr-btn fr-icon-arrow-right-s-line" href="{% url 'api:home' %}">
+                        Documentation
+                    </a>
+                </li>
+            </ul>
+        </div>
     </div>
-    <div class="fr-card__end pt-0 bg-white text-right">
-        <a href="{% url 'api:home' %}" class="btn btn-link btn-ico">
-            <span>Documentation</span>
-            <i class="ri-arrow-right-s-line ri-xl"></i>
-        </a>
+    <div class="fr-card__header fr-hidden fr-unhidden-lg">
+        <div class="fr-card__img">
+            <img class="fr-responsive-img" src="{% static 'images/illustration-28.svg' %}" alt=""/>
+        </div>
     </div>
 </div>
 
-
 {% block extra_js %}
 <script type="text/javascript">
 const copyToClipboard = str => {

diff --git a/lemarche/templates/dashboard/_siae_tab_content.html b/lemarche/templates/dashboard/_siae_tab_content.html
@@ -1,57 +1,56 @@
 {% load static %}
 
-<div class="fr-grid-row">
-    <div class="fr-col-12 fr-col-md-7">
-        <div class="fr-grid-row mb-3">
+<div class="fr-grid-row fr-grid-row--gutters">
+    <div class="fr-col-12 fr-col-md-9">
+        <div class="fr-grid-row fr-grid-row--gutters">
             <div class="fr-col-auto">
                 {% if siae.logo_url %}
-                    <img class="img-fluid" style="width:50px" src="{{ siae.logo_url }}" alt="Logo de la structure {{ siae.name }}" loading="lazy" />
+                    <img class="fr-responsive-img" style="width:50px" src="{{ siae.logo_url }}" alt="Logo de la structure {{ siae.name }}" loading="lazy" />
                 {% else %}
-                    <img class="img-fluid" style="width:50px" src="{% static 'img/default-listing.png' %}" alt="{{ siae.name }}" loading="lazy" />
+                    <img class="fr-responsive-img" style="width:50px" src="{% static 'img/default-listing.png' %}" alt="{{ siae.name }}" loading="lazy" />
                 {% endif %}
             </div>
             <div class="fr-col">
-                <h2 class="mb-0">{{ siae.name_display }}</h2>
-                {% if siae.super_badge %}
-                    <span class="badge badge-base rounded-pill super-badge-badge text-primary mt-2 font-weight-bold">
-                        <i class="ri-award-fill"></i>
-                        Super prestataire
-                    </span>
-                {% endif %}
+                <h2>{{ siae.name_display }}</h2>
+                {% include "includes/_super_badge.html" with siae=siae %}
             </div>
         </div>
         {% include "includes/_completion_progress_bar.html" with completion_percent=siae.completion_rate_calculated %}
     </div>
-    <div class="fr-col-12 fr-col-md-auto ml-auto d-flex flex-column">
-        <a href="{% url 'dashboard_siaes:siae_edit' siae.slug %}" id="dashboard-siae-edit-btn" class="btn btn-important btn-sm btn-ico mb-2">
-            <i class="ri-pencil-fill ri-lg"></i>
-            <span>Compléter votre fiche</span>
-        </a>
-        <a href="{% url 'siae:detail' siae.slug %}" target="_blank" id="dashboard-siae-view-btn" class="btn btn-outline-primary btn-sm btn-ico mb-2">
-            <i class="ri-eye-line ri-lg"></i>
-            <span>Voir votre fiche</span>
-        </a>
-        <a href="{% url 'dashboard_siaes:siae_users' siae.slug %}" id="dashboard-siae-edit-btn" class="btn btn-outline-primary btn-sm btn-ico">
-            <i class="ri-group-line ri-lg"></i>
-            <span>Collaborateurs ({{ siae.user_count }})</span>
-        </a>
+    <div class="fr-col-12 fr-col-md-3">
+        <ul class="fr-btns-group fr-btns-group--center fr-btns-group--sm fr-btns-group--icon-left">
+            <li>
+                <a href="{% url 'dashboard_siaes:siae_edit' siae.slug %}" id="dashboard-siae-edit-btn" class="fr-btn fr-icon-pencil-fill fr-btn--icon-left">
+                    Compléter votre fiche
+                </a>
+            </li>
+            <li>
+                <a href="{% url 'siae:detail' siae.slug %}" target="_blank" id="dashboard-siae-view-btn" class="fr-btn fr-btn--secondary fr-icon-eye-line fr-btn--icon-left">
+                    Voir votre fiche
+                </a>
+            </li>
+            <li>
+                <a href="{% url 'dashboard_siaes:siae_users' siae.slug %}" id="dashboard-siae-edit-btn" class="fr-btn fr-btn--secondary fr-icon-group-line fr-btn--icon-left">
+                    Collaborateurs ({{ siae.user_count }})
+                </a>
+            </li>
+        </ul>
     </div>
 </div>
 
-<hr />
+<hr class="fr-my-4v">
 
-<div class="fr-grid-row">
-    <div class="fr-col-lg-6">
-        <p class="h4 lh-sm mb-lg-4">Statistiques liées à votre structure <span class="fs-sm font-weight-normal">(3 derniers mois)</span></p>
-        <div class="d-flex">
-            <div class="flex-fill text-center">
-                <span class="h2 text-info d-block mb-1">{{ siae.stat_buyer_view_count_last_3_months }}</span>
-                <span class="fs-sm lh-sm d-block">Entreprises et acheteurs publics<br />ont vu votre fiche</span>
-            </div>
-            <div class="flex-fill text-center">
-                <span class="h2 text-info d-block mb-1">{{ siae.stat_partner_view_count_last_3_months }}</span>
-                <span class="fs-sm lh-sm d-block">Partenaires (facilitateur, réseau…)<br />ont vu votre fiche</span>
-            </div>
-        </div>
+<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
+    <div class="fr-col-12">
+        <h3>Statistiques liées à votre structure</h3>
+        <p>(3 derniers mois)</p>
+    </div>
+    <div class="fr-col-12 fr-col-sm">
+        <h4 class="fr-display-xs">{{ siae.stat_buyer_view_count_last_3_months }}</h4>
+        <p>Entreprises et acheteurs publics<br />ont vu votre fiche</p>
+    </div>
+    <div class="fr-col-12 fr-col-sm">
+        <h4 class="fr-display-xs">{{ siae.stat_partner_view_count_last_3_months }}</h4>
+        <p>Partenaires (facilitateur, réseau…)<br />ont vu votre fiche</p>
     </div>
 </div>
diff --git a/lemarche/templates/dashboard/home_siae.html b/lemarche/templates/dashboard/home_siae.html
@@ -61,7 +61,7 @@ <h1 class="h1"><strong>Tableau de bord</strong></h1>
     <section>
         <div class="fr-container">
             <div class="fr-grid-row">
-                <div class="fr-col-12 pb-5">
+                <div class="fr-col-12 fr-mb-6v">
                     {% include "dashboard/_add_siae_card.html" %}
                 </div>
             </div>
@@ -113,9 +113,9 @@ <h3 class="fr-card__title">
 </section>
 
 {% if user.api_key %}
-<section>
+<section class="fr-pt-6v">
     <div class="fr-container">
-        <div class="fr-grid-row">
+        <div class="fr-grid-row fr-grid-row--gutters">
             <div class="fr-col-12 fr-col-lg-6">
                 {% include "dashboard/_api_key_card.html" with user_kind="SIAE" api_key=user.api_key %}
             </div>
@@ -128,3 +128,10 @@ <h3 class="fr-card__title">
 {% include "includes/_super_siae_arguments_badge.html" %}
 
 {% endblock content %}
+
+{% block extra_css %}
+<style>
+    .progress{display:flex;height:.5rem;overflow:hidden;line-height:0;font-size:.75rem;background-color:#e6e6eb;border-radius:.25rem;box-shadow:none}
+    .progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#000091;transition:width .6s ease}
+</style>
+{% endblock extra_css %}
diff --git a/lemarche/templates/includes/_completion_progress_bar.html b/lemarche/templates/includes/_completion_progress_bar.html
@@ -1,4 +1,4 @@
-<p class="my-2 text-important fs-sm">{{ completion_percent }}% des informations sont complétées</p>
+<p class="fr-my-4v fr-text--lead-text">{{ completion_percent }}% des informations sont complétées</p>
 <div class="progress progress--important">
     <div class="progress-bar" role="progressbar" style="width: {{ completion_percent }}%" aria-valuenow="{{ completion_percent }}" aria-valuemin="0" aria-valuemax="100"></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 siae-card {% if siae.super_badge %}super-badge-card{% endif %}">
+<div class="card siae-card{% if siae.super_badge %} super-badge-card{% endif %}">
     <div class="card-header">
         <div class="fr-grid-row">
             <div class="fr-col-auto">