ellipsis in siae small card

gip-inclusion · Aug 12, 2024 · 01df09e · 01df09e
1 parent 24e362b
commit 01df09e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 25 deletions.
diff --git a/lemarche/static/itou_marche/itou_marche.scss b/lemarche/static/itou_marche/itou_marche.scss
@@ -44,3 +44,11 @@ $yellow-super-badge--borders-color: #fcc63a;
     padding-left: 0;
     list-style: none;
 }
+
+.ellipsis {
+    display: inline-block;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/lemarche/templates/siaes/_card_tender.html b/lemarche/templates/siaes/_card_tender.html
@@ -1,6 +1,6 @@
 {% load static %}
 
-<div class="fr-card fr-card--horizontal siae-card{% if siae.super_badge %} super-badge-card{% endif %}">
+<div class="fr-card fr-card--horizontal{% if siae.super_badge %} super-badge-card{% endif %}">
     <div class="fr-card__body">
         <div class="fr-card__content">
             <div class="fr-card__desc">
@@ -13,40 +13,46 @@
                         {% endif %}
                     </div>
                     <div class="fr-col">
-                        <h2 class="h4 mb-0">{{ siae.name_display }}</h2>
+                        <h2>{{ siae.name_display }}</h2>
                         {% include "includes/_super_badge.html" with siae=siae %}
                     </div>
                 </div>
                 <div class="fr-grid-row fr-grid-row--gutters fr-mt-4v">
                     <div class="fr-col-md-8">
                         <div class="fr-grid-row fr-grid-row--gutters">
-                            <div class="fr-col-md-4">
+                            <div class="fr-col-md-4 ellipsis">
                                 <span class="fr-icon-user-line"></span>
-                                <span>{{ siae.contact_short_name }}</span>
+                                {{ siae.contact_short_name }}
                             </div>
-                            <div class="fr-col-md-4">
+                            <div class="fr-col-md-4 ellipsis">
                                 <span class="fr-icon-phone-line"></span>
-                                <a href="tel:{{ siae.contact_phone }}" id="tender_siae_company_phone" style="text-overflow:ellipsis">{{ siae.contact_phone }}</a>
-                            </div>
-                            <div class="fr-col-md-4">
-                                <span class="fr-icon-signal-tower-line"></span>
-                                <a href="mailto:{{ siae.contact_email }}" id="tender_siae_company_email">{{ siae.contact_email }}</a>
+                                <a href="tel:{{ siae.contact_phone }}" id="tender_siae_company_phone">{{ siae.contact_phone }}</a>
                             </div>
+                            {% if siae.contact_email %}
+                                <div class="fr-col-md-4 ellipsis">
+                                    <span class="fr-icon-signal-tower-line"></span>
+                                    <a href="mailto:{{ siae.contact_email }}" id="tender_siae_company_email">{{ siae.contact_email }}</a>
+                                </div>
+                            {% endif %}
                         </div>
                         <div class="fr-grid-row fr-grid-row--gutters">
-                            <div class="fr-col-md-6">
-                                <i class="fr-icon-terminal-window-line"></i>
-                                <a href="{{ siae.contact_website }}" id="tender_siae_company_website" target="_blank" rel="noopener">{{ siae.contact_website }}</a>
-                            </div>
-                            <div class="fr-col-md-6">
-                                <i class="fr-icon-earth-line"></i>
-                                <a href="{{ siae.contact_social_website }}" id="tender_siae_company_social_website" target="_blank" rel="noopener">{{ siae.contact_social_website }}</a>
-                            </div>
+                            {% if siae.contact_website %}
+                                <div class="fr-col-md-6 ellipsis">
+                                    <span class="fr-icon-terminal-window-line"></span>
+                                    <a href="{{ siae.contact_website }}" id="tender_siae_company_website" target="_blank" rel="noopener">{{ siae.contact_website }}</a>
+                                </div>
+                            {% endif %}
+                            {% if siae.contact_social_website %}
+                                <div class="fr-col-md-6 ellipsis">
+                                    <span class="fr-icon-earth-line"></span>
+                                    <a href="{{ siae.contact_social_website }}" id="tender_siae_company_social_website" target="_blank" rel="noopener">{{ siae.contact_social_website }}</a>
+                                </div>
+                            {% endif %}
                         </div>
                     </div>
                     <div class="fr-col-md-4">
                         <a href="{% url 'siae:detail' siae.slug %}" class="fr-btn" target="_blank" rel="noopener">
-                            <span>Accéder à la fiche commerciale</span>
+                            Accéder à la fiche commerciale
                         </a>
                     </div>
                 </div>

diff --git a/lemarche/templates/tenders/siae_interested_list.html b/lemarche/templates/tenders/siae_interested_list.html
@@ -124,13 +124,13 @@ <h1>{{ siaes.count }} prestataire{{ siaes.count|pluralize }}</h1>
                                     </ul>
                                 </div>
                             </div>
-                            <div class="fr-grid-row">
-                                <div class="fr-col-12">
-                                    {% for siae in siaes %}
+                            <div class="fr-grid-row fr-grid-row--gutters">
+                                {% for siae in siaes %}
+                                    <div class="fr-col-12">
                                         {% include "siaes/_card_tender.html" with siae=siae %}
-                                    {% endfor %}
-                                    {% include "includes/_pagination.html" %}
-                                </div>
+                                    </div>
+                                {% endfor %}
+                                {% include "includes/_pagination.html" %}
                             </div>
                         </div>                        
                     </div>