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.
这个提交包含在:
Peter Goodhall 2025-08-11 10:45:51 +01:00
父节点 9baee1ee84
当前提交 61f5594598

查看文件

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