From 682464b1fa2473401f93e367e13ba812ddfe7a34 Mon Sep 17 00:00:00 2001
From: Karl Determe <karl.determe@streetup.be>
Date: Mon, 10 Aug 2026 13:03:16 +0200
Subject: [PATCH] feat: implement quick inspection map interface and parking
 spot component template

---
 .../components/asset_fields/_parkingspot.html |  6 +-
 .../inspections/quick_inspection_map.html     | 71 ++++++++++++-------
 2 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/streetup/inspections/templates/inspections/components/asset_fields/_parkingspot.html b/streetup/inspections/templates/inspections/components/asset_fields/_parkingspot.html
index e3d4bba..fb31b0e 100644
--- a/streetup/inspections/templates/inspections/components/asset_fields/_parkingspot.html
+++ b/streetup/inspections/templates/inspections/components/asset_fields/_parkingspot.html
@@ -7,17 +7,17 @@
     </span>
     <div class="row g-2 mb-3">
         <div class="col-4">
-            <label class="form-label small mb-1">{% translate "Arceaux classiques" %}</label>
+            <label class="form-label small mb-1" style="min-height: 38px; display: flex; align-items: flex-end; line-height: 1.15;">{% translate "Arceaux classiques" %}</label>
             <input type="number" name="verified_standard_stand_count" id="insp_std_stands"
                 class="form-control form-control-sm" min="0">
         </div>
         <div class="col-4">
-            <label class="form-label small mb-1">{% translate "Arceaux cargo" %}</label>
+            <label class="form-label small mb-1" style="min-height: 38px; display: flex; align-items: flex-end; line-height: 1.15;">{% translate "Arceaux cargo" %}</label>
             <input type="number" name="verified_cargo_stand_count" id="insp_cargo_stands"
                 class="form-control form-control-sm" min="0">
         </div>
         <div class="col-4">
-            <label class="form-label small mb-1">{% translate "Arceaux drop-off" %}</label>
+            <label class="form-label small mb-1" style="min-height: 38px; display: flex; align-items: flex-end; line-height: 1.15;">{% translate "Arceaux drop-off" %}</label>
             <input type="number" name="verified_drop_off_stand_count" id="insp_drop_off_stands"
                 class="form-control form-control-sm" min="0">
         </div>
diff --git a/streetup/inspections/templates/inspections/quick_inspection_map.html b/streetup/inspections/templates/inspections/quick_inspection_map.html
index a0eb799..2286d20 100644
--- a/streetup/inspections/templates/inspections/quick_inspection_map.html
+++ b/streetup/inspections/templates/inspections/quick_inspection_map.html
@@ -125,6 +125,7 @@
     .filter-btn-pill:active {
         transform: scale(0.97);
     }
+
     .maplibregl-popup {
         max-width: 330px !important;
     }
@@ -153,35 +154,53 @@
 <div id="inspection-map-wrapper">
     <!-- Overlay des filtres mémorisés (Boutons tactiles mobiles) -->
     <div class="map-controls-overlay">
-        <div class="card shadow-sm border-0 bg-white opacity-95 rounded-4">
-            <div class="card-body p-2 d-flex align-items-center justify-content-between gap-2 flex-wrap">
-                <div class="d-flex align-items-center gap-1.5">
-                    <i class="bi bi-geo-alt-fill text-primary fs-6"></i>
-                    <span class="fw-bold small me-1">{% translate "Inspection Rapide" %}</span>
-                    <span class="badge bg-light text-muted border small" id="gps-status-text">{% translate "GPS actif" %}</span>
-                </div>
+        <div class="card shadow-sm border-0 bg-white opacity-95 rounded-4 overflow-hidden">
+            <div class="card-body p-2">
+                <div class="row g-2 align-items-center">
+                    <!-- Bloc titre -->
+                    <div class="col-12 col-md-4 d-flex align-items-center gap-1.5 justify-content-center justify-content-md-start mb-1 mb-md-0">
+                        <i class="bi bi-geo-alt-fill text-primary fs-6"></i>
+                        <span class="fw-bold small me-1">{% translate "Inspection Rapide" %}</span>
+                        <span class="badge bg-light text-muted border small" id="gps-status-text">{% translate "GPS actif" %}</span>
+                    </div>
 
-                <div class="d-flex align-items-center gap-2">
-                    <!-- Bouton Déclencheur Thématique -->
-                    <button id="btn-select-thematic" type="button" class="btn filter-btn-pill d-flex align-items-center gap-1.5" data-bs-toggle="modal" data-bs-target="#thematicChooserModal">
-                        <i id="thematic-icon-display" class="bi bi-collection text-primary me-2"></i>
-                        <span id="thematic-name-display" class="fw-semibold">{% translate "Thématique" %}</span>
-                        <i class="bi bi-chevron-down text-muted ms-1 small"></i>
-                    </button>
+                    <!-- Bloc filtres -->
+                    <div class="col-12 col-md-8">
+                        <div class="row g-2 justify-content-md-end">
+                            <div class="col-6 col-md-auto">
+                                <!-- Bouton Déclencheur Thématique -->
+                                <button id="btn-select-thematic" type="button" class="btn filter-btn-pill w-100 d-flex align-items-center justify-content-between gap-1.5" data-bs-toggle="modal" data-bs-target="#thematicChooserModal">
+                                    <span class="text-truncate">
+                                        <i id="thematic-icon-display" class="bi bi-collection text-primary me-2"></i>
+                                        <span id="thematic-name-display" class="fw-semibold">{% translate "Thématique" %}</span>
+                                    </span>
+                                    <i class="bi bi-chevron-down text-muted ms-1 small"></i>
+                                </button>
+                            </div>
 
-                    <!-- Bouton Déclencheur Catégorie -->
-                    <button id="btn-select-category" type="button" class="btn filter-btn-pill d-flex align-items-center gap-1.5" data-bs-toggle="modal" data-bs-target="#categoryChooserModal">
-                        <i class="bi bi-tag-fill text-secondary me-1.5"></i>
-                        <span id="category-name-display" class="fw-semibold">{% translate "Catégorie" %}</span>
-                        <i class="bi bi-chevron-down text-muted ms-1 small"></i>
-                    </button>
+                            <div class="col-6 col-md-auto">
+                                <!-- Bouton Déclencheur Catégorie -->
+                                <button id="btn-select-category" type="button" class="btn filter-btn-pill w-100 d-flex align-items-center justify-content-between gap-1.5" data-bs-toggle="modal" data-bs-target="#categoryChooserModal">
+                                    <span class="text-truncate">
+                                        <i class="bi bi-tag-fill text-secondary me-1.5"></i>
+                                        <span id="category-name-display" class="fw-semibold">{% translate "Catégorie" %}</span>
+                                    </span>
+                                    <i class="bi bi-chevron-down text-muted ms-1 small"></i>
+                                </button>
+                            </div>
 
-                    <!-- Bouton Déclencheur Historique Inspections -->
-                    <button id="btn-toggle-inspections" type="button" class="btn filter-btn-pill d-flex align-items-center gap-1.5" data-bs-toggle="modal" data-bs-target="#inspectionsHistoryModal">
-                        <i id="inspections-history-icon" class="bi bi-clock-history text-primary me-1"></i>
-                        <span id="inspections-history-label" class="fw-semibold">{% translate "Inspections (3 mois)" %}</span>
-                        <i class="bi bi-chevron-down text-muted ms-1 small"></i>
-                    </button>
+                            <div class="col-12 col-md-auto">
+                                <!-- Bouton Déclencheur Historique Inspections -->
+                                <button id="btn-toggle-inspections" type="button" class="btn filter-btn-pill w-100 d-flex align-items-center justify-content-between gap-1.5" data-bs-toggle="modal" data-bs-target="#inspectionsHistoryModal">
+                                    <span class="text-truncate">
+                                        <i id="inspections-history-icon" class="bi bi-clock-history text-primary me-1"></i>
+                                        <span id="inspections-history-label" class="fw-semibold">{% translate "Inspections (3 mois)" %}</span>
+                                    </span>
+                                    <i class="bi bi-chevron-down text-muted ms-1 small"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>