From 61f55945983c420c6880298f23759acf462cb92f Mon Sep 17 00:00:00 2001
From: Peter Goodhall <peter@magicbug.co.uk>
Date: Mon, 11 Aug 2025 10:45:51 +0100
Subject: [PATCH] Refactor map header layout and controls

Merged map statistics, controls, and header into a single card header for improved UI clarity and compactness. The new layout consolidates the QSOs count, map status, and control buttons, streamlining the map view presentation.
---
 application/views/map/custom_date.php | 77 ++++++++++++---------------
 1 file changed, 33 insertions(+), 44 deletions(-)

diff --git a/application/views/map/custom_date.php b/application/views/map/custom_date.php
index 6db7f909..65794ec2 100644
--- a/application/views/map/custom_date.php
+++ b/application/views/map/custom_date.php
@@ -255,54 +255,43 @@
 
 </div>
 
-<!-- Map Statistics and Controls -->
-<div class="row mb-2">
-    <div class="col-12">
-        <div class="card border-0">
-            <div class="card-body py-2">
-                <div class="row align-items-center">
-                    <div class="col-md-8">
-                        <div class="d-flex align-items-center">
-                            <div class="me-4">
-                                <small class="text-muted">QSOs Displayed:</small>
-                                <span class="badge bg-primary ms-1" id="qso-count">0</span>
-                            </div>
-
-                            <div class="alert alert-success mb-0 py-1 px-2 d-none" id="map-status">
-                                <small><i class="fas fa-check-circle me-1"></i>Map loaded successfully</small>
-                            </div>
-                        </div>
+<!-- Map Container -->
+<div class="card">
+    <div class="card-header py-3">
+        <div class="row align-items-center">
+            <div class="col-md-4">
+                <h5 class="mb-0">
+                    <i class="fas fa-globe-americas me-2"></i>World Map View
+                </h5>
+                <small class="text-muted">Showing: <strong id="active-logbook-display"><?php echo $logbook_name ?></strong></small>
+            </div>
+            <div class="col-md-4">
+                <div class="d-flex align-items-center justify-content-center">
+                    <div class="me-4">
+                        <small class="text-muted">QSOs Displayed:</small>
+                        <span class="badge bg-primary ms-1" id="qso-count">0</span>
                     </div>
-                    <div class="col-md-4 text-end">
-                        <div class="btn-group btn-group-sm" role="group">
-                            <button type="button" class="btn btn-outline-success" onclick="fitMapToMarkers()" title="Zoom to fit all QSOs">
-                                <i class="fas fa-expand-arrows-alt"></i>
-                            </button>
-                            <button type="button" class="btn btn-outline-success" onclick="toggleGridSquares()" title="Toggle grid squares">
-                                <i class="fas fa-th"></i>
-                            </button>
-                            <button type="button" class="btn btn-outline-success" onclick="toggleCallsignLabels()" title="Toggle callsign labels" id="callsign-labels-btn">
-                                <i class="fas fa-tags"></i>
-                            </button>
-                            <button type="button" class="btn btn-outline-success" onclick="toggleFullscreen()" title="Toggle fullscreen">
-                                <i class="fas fa-expand"></i>
-                            </button>
-                        </div>
+                    <div class="alert alert-success mb-0 py-1 px-2 d-none" id="map-status">
+                        <small><i class="fas fa-check-circle me-1"></i>Map loaded successfully</small>
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
-</div>
-
-<!-- Map Container -->
-<div class="card">
-    <div class="card-header d-flex justify-content-between align-items-center py-2">
-        <h5 class="mb-0">
-            <i class="fas fa-globe-americas me-2"></i>World Map View
-        </h5>
-        <div class="text-muted">
-            <small>Showing: <strong id="active-logbook-display"><?php echo $logbook_name ?></strong></small>
+            <div class="col-md-4 text-end">
+                <div class="btn-group btn-group-sm" role="group">
+                    <button type="button" class="btn btn-outline-success" onclick="fitMapToMarkers()" title="Zoom to fit all QSOs">
+                        <i class="fas fa-expand-arrows-alt"></i>
+                    </button>
+                    <button type="button" class="btn btn-outline-success" onclick="toggleGridSquares()" title="Toggle grid squares">
+                        <i class="fas fa-th"></i>
+                    </button>
+                    <button type="button" class="btn btn-outline-success" onclick="toggleCallsignLabels()" title="Toggle callsign labels" id="callsign-labels-btn">
+                        <i class="fas fa-tags"></i>
+                    </button>
+                    <button type="button" class="btn btn-outline-success" onclick="toggleFullscreen()" title="Toggle fullscreen">
+                        <i class="fas fa-expand"></i>
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
     <div class="card-body p-0">