From 7614d5611279e722c445b30c208d35da6ba170bc Mon Sep 17 00:00:00 2001
From: kdeterme <karl.determe@gmail.com>
Date: Mon, 17 Aug 2026 12:32:59 +0200
Subject: [PATCH] refactor: redesign mobile control list cards and enhance FAB
 styling

---
 .../static/controls/controls_index_mobile.css | 164 ++++++++++++++++--
 .../controls/_controls_list_mobile.html       | 116 ++++++++-----
 2 files changed, 216 insertions(+), 64 deletions(-)

diff --git a/loko/controls/static/controls/controls_index_mobile.css b/loko/controls/static/controls/controls_index_mobile.css
index 28c7b8f..e478d5e 100644
--- a/loko/controls/static/controls/controls_index_mobile.css
+++ b/loko/controls/static/controls/controls_index_mobile.css
@@ -30,20 +30,40 @@
     z-index: 2100;
 }
 
-/* FAB bouton carte : au-dessus du footer */
+/* === FAB BOUTON CARTE (Floating Action Button en bas à droite) === */
 #map-fab-btn {
-    position: fixed;
-    bottom: 4.5rem;
-    right: 1rem;
-    z-index: 1050;
-    border-radius: 50%;
-    width: 3.25rem;
-    height: 3.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-    padding: 0;
+    position: fixed !important;
+    bottom: 4.5rem !important;
+    right: 1.25rem !important;
+    z-index: 1050 !important;
+    border-radius: 50% !important;
+    width: 3.5rem !important;
+    height: 3.5rem !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
+    padding: 0 !important;
+    background-color: var(--brand-color, #2f3e8b) !important;
+    border: none !important;
+    color: #ffffff !important;
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+#map-fab-btn:hover {
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
+    color: #ffffff !important;
+    transform: scale(1.05);
+}
+
+#map-fab-btn:active {
+    transform: scale(0.92) !important;
+}
+
+#map-fab-btn i {
+    font-size: 1.4rem !important;
+    line-height: 1;
 }
 
 .maplibregl-popup-content a {
@@ -52,19 +72,127 @@
     text-decoration: none;
 }
 
+/* === CARTE DE CONTRÔLE === */
 .control-card {
     cursor: pointer;
-    transition: background-color 0.2s, transform 0.15s;
-    border-radius: 0.5rem;
+    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+    border-radius: 0.6rem;
+    border: 1px solid #e2e8f0;
+    background-color: #ffffff;
 }
 
 .control-card:active {
-    background-color: #f1f3f5;
+    background-color: #f8f9fa;
     transform: scale(0.99);
 }
 
-.badge {
-    font-size: 0.75rem;
+/* === BADGES DE TYPE & STATUT === */
+.control-type-badge {
+    font-weight: 600;
+    font-size: 0.72rem;
+    padding: 0.25em 0.55em;
+    border-radius: 0.35rem;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.control-type-control {
+    background-color: #e0edff;
+    color: #0d6efd;
+    border: 1px solid #b6d4fe;
+}
+
+.control-type-site_report {
+    background-color: #fff3cd;
+    color: #664d03;
+    border: 1px solid #ffecb5;
+}
+
+.control-type-statement {
+    background-color: #f8d7da;
+    color: #842029;
+    border: 1px solid #f5c2c7;
+}
+
+.control-type-meeting_report {
+    background-color: #cff4fc;
+    color: #055160;
+    border: 1px solid #b6effb;
+}
+
+.control-type-other {
+    background-color: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+}
+
+.control-status-badge {
+    font-weight: 600;
+    font-size: 0.72rem;
+    padding: 0.25em 0.55em;
+    border-radius: 0.35rem;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.control-status-in_progress {
+    background-color: #ffc107;
+    color: #000;
+}
+
+.control-status-information {
+    background-color: #0dcaf0;
+    color: #000;
+}
+
+.control-status-to_be_processed {
+    background-color: #dc3545;
+    color: #fff;
+}
+
+.control-status-processed {
+    background-color: #198754;
+    color: #fff;
+}
+
+.control-status-validated {
+    background-color: #0d6efd;
+    color: #fff;
+}
+
+.control-status-canceled {
+    background-color: #6c757d;
+    color: #fff;
+}
+
+.control-status-other {
+    background-color: #6c757d;
+    color: #fff;
+}
+
+/* === CHIPS THÉMATIQUES & CATÉGORIES === */
+.badge-chip {
+    font-weight: 500;
+    font-size: 0.72rem;
+    padding: 0.22em 0.55em;
+    border-radius: 1rem;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.badge-theme {
+    background-color: #f1f5f9;
+    color: #334155;
+    border: 1px solid #cbd5e1;
+}
+
+.badge-category {
+    background-color: #f8fafc;
+    color: #475569;
+    border: 1px solid #e2e8f0;
 }
 
 .form-select,
diff --git a/loko/controls/templates/controls/_controls_list_mobile.html b/loko/controls/templates/controls/_controls_list_mobile.html
index 6bc9824..facde9c 100644
--- a/loko/controls/templates/controls/_controls_list_mobile.html
+++ b/loko/controls/templates/controls/_controls_list_mobile.html
@@ -8,81 +8,105 @@
 {% endif %}
 
 {% for control in controls %}
-<div class="card mb-2 control-card shadow-sm" data-href="{% url 'mobile:controls_detail' control.id %}">
+<div class="card mb-2 control-card shadow-sm border" data-href="{% url 'mobile:controls_detail' control.id %}">
     <div class="card-body p-2">
-        <div class="d-flex justify-content-between align-items-start gap-1 mb-1">
-            <!-- Thématiques et Catégories -->
-            <div class="d-flex flex-wrap gap-1 flex-grow-1">
-                {% for theme in control.thematics.all %}
-                <span class="badge bg-light text-dark border py-1">
-                    {% if theme.icon %}<i class="bi {{ theme.icon }} me-1"></i>{% endif %}{{ theme.name }}
-                </span>
-                {% endfor %}
-                {% for cat in control.categories.all %}
-                <span class="badge bg-light text-dark border py-1">{{ cat.get_name }}</span>
-                {% endfor %}
-            </div>
-            
-            <!-- Type et Statut Badges -->
-            <div class="d-flex flex-column align-items-end gap-1 flex-shrink-0">
+        <!-- 1. En-tête : Code & Badges Type / Statut -->
+        <div class="d-flex justify-content-between align-items-center mb-1 gap-2">
+            <span class="fw-bold text-primary fs-6">{{ control.control_code }}</span>
+            <div class="d-flex align-items-center gap-1 flex-wrap justify-content-end">
+                <!-- Badge Type -->
                 {% if control.control_type == 'control' %}
-                <span class="badge text-bg-primary">
+                <span class="badge control-type-badge control-type-control">
                     <i class="bi bi-clipboard-check me-1"></i>{{ control.get_control_type_display }}
                 </span>
                 {% elif control.control_type == 'site_report' %}
-                <span class="badge text-bg-warning">
+                <span class="badge control-type-badge control-type-site_report">
                     <i class="bi bi-building-gear me-1"></i>{{ control.get_control_type_display }}
                 </span>
                 {% elif control.control_type == 'statement' %}
-                <span class="badge text-bg-danger">
+                <span class="badge control-type-badge control-type-statement">
                     <i class="bi bi-exclamation-octagon me-1"></i>{{ control.get_control_type_display }}
                 </span>
                 {% elif control.control_type == 'meeting_report' %}
-                <span class="badge text-bg-info">
+                <span class="badge control-type-badge control-type-meeting_report">
                     <i class="bi bi-people me-1"></i>{{ control.get_control_type_display }}
                 </span>
                 {% else %}
-                <span class="badge text-bg-secondary">{{ control.get_control_type_display }}</span>
+                <span class="badge control-type-badge control-type-other">
+                    {{ control.get_control_type_display }}
+                </span>
                 {% endif %}
 
+                <!-- Badge Statut -->
                 {% if control.status == 'in_progress' %}
-                <span class="badge text-bg-warning">{{ control.get_status_display }}</span>
+                <span class="badge control-status-badge control-status-in_progress">
+                    <i class="bi bi-hourglass-split me-1"></i>{{ control.get_status_display }}
+                </span>
                 {% elif control.status == 'information' %}
-                <span class="badge text-bg-info">{{ control.get_status_display }}</span>
+                <span class="badge control-status-badge control-status-information">
+                    <i class="bi bi-info-circle me-1"></i>{{ control.get_status_display }}
+                </span>
                 {% elif control.status == 'to_be_processed' %}
-                <span class="badge text-bg-danger">{{ control.get_status_display }}</span>
+                <span class="badge control-status-badge control-status-to_be_processed">
+                    <i class="bi bi-clock-history me-1"></i>{{ control.get_status_display }}
+                </span>
                 {% elif control.status == 'processed' %}
-                <span class="badge text-bg-success">{{ control.get_status_display }}</span>
+                <span class="badge control-status-badge control-status-processed">
+                    <i class="bi bi-check-circle me-1"></i>{{ control.get_status_display }}
+                </span>
                 {% elif control.status == 'validated' %}
-                <span class="badge text-bg-primary">{{ control.get_status_display }}</span>
+                <span class="badge control-status-badge control-status-validated">
+                    <i class="bi bi-check-all me-1"></i>{{ control.get_status_display }}
+                </span>
                 {% elif control.status == 'canceled' %}
-                <span class="badge text-bg-secondary">{{ control.get_status_display }}</span>
+                <span class="badge control-status-badge control-status-canceled">
+                    <i class="bi bi-x-circle me-1"></i>{{ control.get_status_display }}
+                </span>
                 {% else %}
-                <span class="badge text-bg-secondary">{{ control.get_status_display }}</span>
+                <span class="badge control-status-badge control-status-other">
+                    {{ control.get_status_display }}
+                </span>
                 {% endif %}
             </div>
         </div>
 
-        <div class="mb-1">
-            <strong class="text-primary">{{ control.control_code }}</strong>
-            {% if control.description %}
-            <div class="text-dark small mt-1">{{ control.description|truncatewords:15 }}</div>
+        <!-- 2. Badges Thématiques et Catégories (chips) -->
+        {% if control.thematics.exists or control.categories.exists %}
+        <div class="d-flex flex-wrap gap-1 mb-1">
+            {% for theme in control.thematics.all %}
+            <span class="badge badge-chip badge-theme">
+                {% if theme.icon %}<i class="bi {{ theme.icon }} me-1 text-primary"></i>{% endif %}{{ theme.name }}
+            </span>
+            {% endfor %}
+            {% for cat in control.categories.all %}
+            <span class="badge badge-chip badge-category">
+                <i class="bi bi-tag me-1 text-secondary"></i>{{ cat.get_name }}
+            </span>
+            {% endfor %}
+        </div>
+        {% endif %}
+
+        <!-- 3. Description -->
+        {% if control.description %}
+        <div class="text-dark small mb-1">{{ control.description|truncatewords:15 }}</div>
+        {% endif %}
+
+        <!-- 4. Localisation & Projet -->
+        <div class="d-flex flex-wrap gap-2 text-muted small mb-1">
+            {% if control.location %}
+            <div class="d-inline-flex align-items-center">
+                <i class="bi bi-geo-alt text-danger me-1"></i><span>{{ control.location }}</span>
+            </div>
+            {% endif %}
+            {% if control.project %}
+            <div class="d-inline-flex align-items-center">
+                <i class="bi bi-folder text-primary me-1"></i><span>{{ control.project.name }}</span>
+            </div>
             {% endif %}
         </div>
 
-        {% if control.location %}
-        <div class="text-muted small mb-1">
-            <i class="bi bi-geo-alt me-1"></i>{{ control.location }}
-        </div>
-        {% endif %}
-
-        {% if control.project %}
-        <div class="text-muted small mb-1">
-            <i class="bi bi-folder me-1"></i>{{ control.project.name }}
-        </div>
-        {% endif %}
-
-        <div class="d-flex justify-content-between align-items-center mt-2 pt-1 border-top small text-muted">
+        <!-- 5. Pied de carte : Auteur, Date & Compteur de remarques -->
+        <div class="d-flex justify-content-between align-items-center mt-1 pt-1 border-top small text-muted">
             <div>
                 {% if control.control_author %}
                 <i class="bi bi-person me-1"></i>{{ control.control_author|short_name }} · 
@@ -91,7 +115,7 @@
             </div>
             {% if control.remarks.count > 0 %}
             <div>
-                <span class="badge bg-secondary rounded-pill">
+                <span class="badge rounded-pill bg-light text-secondary border">
                     <i class="bi bi-chat-left-text me-1"></i>{{ control.remarks.count }}
                 </span>
             </div>