diff --git a/application/views/bandmap/list.php b/application/views/bandmap/list.php index e138734c5..5a7bb6a6b 100644 --- a/application/views/bandmap/list.php +++ b/application/views/bandmap/list.php @@ -235,7 +235,7 @@ - result() as $row) { ?> diff --git a/assets/css/bandmap_list.css b/assets/css/bandmap_list.css index 173a7b7ef..f849df667 100644 --- a/assets/css/bandmap_list.css +++ b/assets/css/bandmap_list.css @@ -119,6 +119,16 @@ html { overflow-y: scroll; } vertical-align: middle; } +/* Ensure sort markers are consistent across all sortable columns */ +.spottable thead th.dt-orderable-asc, +.spottable thead th.dt-orderable-desc { + padding-right: 22px !important; +} + +.spottable thead th span.dt-column-order { + right: 6px !important; +} + .spottable thead tr { border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); @@ -158,6 +168,7 @@ html { overflow-y: scroll; } } .spottable .column-hidden { display: none !important; } +.spottable .column-fill { width: 100% !important; min-width: 150px !important; } /* =========================================== 5. SPOT TABLE - COLUMNS @@ -322,7 +333,7 @@ html { overflow-y: scroll; } .menu-bar .d-flex { overflow: visible; min-height: fit-content; gap: 0.4rem !important; } .menu-bar .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; } -.menu-bar .radios.form-select-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem; font-size: 0.875rem; } +.menu-bar .radios.form-select-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem; font-size: 0.875rem; min-width: 330px; } .menu-bar > div:last-child { justify-content: flex-end; } .menu-bar > div.mb-2 { margin-bottom: 0.4rem !important; } @@ -483,7 +494,7 @@ select[multiple] option:checked { background-color: var(--bs-primary); color: wh /* Restore larger sizing in fullscreen mode */ .bandmap-fullscreen .menu-bar .d-flex { gap: 0.5rem !important; } .bandmap-fullscreen .menu-bar .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; } -.bandmap-fullscreen .menu-bar .radios.form-select-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem; font-size: 0.875rem; } +.bandmap-fullscreen .menu-bar .radios.form-select-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem; font-size: 0.875rem; min-width: 330px; } .bandmap-fullscreen .menu-bar > div.mb-2 { margin-bottom: 0.5rem !important; } .bandmap-fullscreen .menu-bar #radio_status #radio_cat_state { font-size: 0.875rem; padding: 0.25rem; } .bandmap-fullscreen .card-header { padding: 0.35rem 1rem !important; } diff --git a/assets/js/sections/bandmap_list.js b/assets/js/sections/bandmap_list.js index 6fd443a51..7dbed33a5 100644 --- a/assets/js/sections/bandmap_list.js +++ b/assets/js/sections/bandmap_list.js @@ -576,7 +576,7 @@ $(function() { } }, { - 'targets': [4, 6, 8, 15], // Submode, Cont, Flag, Message - disable sorting + 'targets': [6, 8, 15], // Cont, Flag, Message - disable sorting 'orderable': false } ], @@ -2875,6 +2875,9 @@ $(function() { } setTimeout(function() { + if (typeof handleResponsiveColumns === 'function') { + handleResponsiveColumns(); + } if ($.fn.DataTable.isDataTable('.spottable')) { $('.spottable').DataTable().columns.adjust(); } @@ -2899,6 +2902,9 @@ $(function() { } setTimeout(function() { + if (typeof handleResponsiveColumns === 'function') { + handleResponsiveColumns(); + } if ($.fn.DataTable.isDataTable('.spottable')) { $('.spottable').DataTable().columns.adjust(); } @@ -2934,6 +2940,9 @@ $(function() { // Adjust DataTable columns after toggle setTimeout(function() { + if (typeof handleResponsiveColumns === 'function') { + handleResponsiveColumns(); + } if ($.fn.DataTable.isDataTable('.spottable')) { $('.spottable').DataTable().columns.adjust(); } @@ -3569,8 +3578,8 @@ $(function() { $('.spottable').removeClass('cat-sorting-locked'); // Re-enable sorting on all columns that were originally sortable - // Based on columnDefs: columns 4, 6, 8, 15 are not sortable (Submode, Cont, Flag, Message) - const nonSortableColumns = [4, 6, 8, 15]; + // Based on columnDefs: columns 6, 8, 15 are not sortable (Cont, Flag, Message) + const nonSortableColumns = [6, 8, 15]; table.settings()[0].aoColumns.forEach(function(col, index) { if (!nonSortableColumns.includes(index)) { @@ -3862,10 +3871,12 @@ $(function() { * 14: Special, 15: Message * * Breakpoints: - * - Full screen or > 1374px: Show all columns - * - <= 1374px: Hide CQZ (7), de CQZ (12), Last QSO (13), Submode (4) + * Responsive column visibility based on container width. + * Works in both normal and fullscreen mode. + * - > 1374px: Show all columns + * - <= 1374px: Hide CQZ (7), de CQZ (12), Last QSO (13), Mode (3) * - <= 1294px: Additionally hide Band (1), Cont (6), de Cont (11) - * - <= 1024px: Additionally hide Flag (8) + * - <= 1024px: Additionally hide Flag (8), Message (15) * - <= 500px: Show only Age (0), Freq (2), Callsign (5), Entity (9) */ function handleResponsiveColumns() { @@ -3874,19 +3885,8 @@ $(function() { const containerWidth = tableContainer.width(); - // Check if in fullscreen mode - const isFullscreen = $('#bandmapContainer').hasClass('bandmap-fullscreen'); - // Reset all columns to visible first - $('.spottable th, .spottable td').removeClass('column-hidden'); - - // If fullscreen, show all columns and exit - if (isFullscreen) { - if ($.fn.DataTable && $.fn.DataTable.isDataTable('.spottable')) { - $('.spottable').DataTable().columns.adjust(); - } - return; - } + $('.spottable th, .spottable td').removeClass('column-hidden column-fill'); // Apply visibility rules based on container width if (containerWidth <= 500) { @@ -3903,10 +3903,12 @@ $(function() { $('.spottable th:nth-child(14), .spottable td:nth-child(14)').addClass('column-hidden'); // Last QSO $('.spottable th:nth-child(15), .spottable td:nth-child(15)').addClass('column-hidden'); // Special $('.spottable th:nth-child(16), .spottable td:nth-child(16)').addClass('column-hidden'); // Message + // Entity fills remaining space + $('.spottable th:nth-child(10), .spottable td:nth-child(10)').addClass('column-fill'); } else if (containerWidth <= 1024) { - // Hide: CQZ, de CQZ, Last QSO, Submode, Band, Cont, de Cont, Flag + // Hide: CQZ, de CQZ, Last QSO, Mode, Band, Cont, de Cont, Flag, Message $('.spottable th:nth-child(2), .spottable td:nth-child(2)').addClass('column-hidden'); // Band - $('.spottable th:nth-child(5), .spottable td:nth-child(5)').addClass('column-hidden'); // Submode + $('.spottable th:nth-child(4), .spottable td:nth-child(4)').addClass('column-hidden'); // Mode $('.spottable th:nth-child(7), .spottable td:nth-child(7)').addClass('column-hidden'); // Continent $('.spottable th:nth-child(8), .spottable td:nth-child(8)').addClass('column-hidden'); // CQZ $('.spottable th:nth-child(9), .spottable td:nth-child(9)').addClass('column-hidden'); // Flag @@ -3914,18 +3916,20 @@ $(function() { $('.spottable th:nth-child(13), .spottable td:nth-child(13)').addClass('column-hidden'); // de CQZ $('.spottable th:nth-child(14), .spottable td:nth-child(14)').addClass('column-hidden'); // Last QSO $('.spottable th:nth-child(16), .spottable td:nth-child(16)').addClass('column-hidden'); // Message + // Entity fills remaining space + $('.spottable th:nth-child(10), .spottable td:nth-child(10)').addClass('column-fill'); } else if (containerWidth <= 1294) { - // Hide: CQZ, de CQZ, Last QSO, Submode, Band, Cont, de Cont + // Hide: CQZ, de CQZ, Last QSO, Mode, Band, Cont, de Cont $('.spottable th:nth-child(2), .spottable td:nth-child(2)').addClass('column-hidden'); // Band - $('.spottable th:nth-child(5), .spottable td:nth-child(5)').addClass('column-hidden'); // Submode + $('.spottable th:nth-child(4), .spottable td:nth-child(4)').addClass('column-hidden'); // Mode $('.spottable th:nth-child(7), .spottable td:nth-child(7)').addClass('column-hidden'); // Continent $('.spottable th:nth-child(8), .spottable td:nth-child(8)').addClass('column-hidden'); // CQZ $('.spottable th:nth-child(12), .spottable td:nth-child(12)').addClass('column-hidden'); // de Cont $('.spottable th:nth-child(13), .spottable td:nth-child(13)').addClass('column-hidden'); // de CQZ $('.spottable th:nth-child(14), .spottable td:nth-child(14)').addClass('column-hidden'); // Last QSO } else if (containerWidth <= 1374) { - // Hide: CQZ, de CQZ, Last QSO, Submode - $('.spottable th:nth-child(5), .spottable td:nth-child(5)').addClass('column-hidden'); // Submode + // Hide: CQZ, de CQZ, Last QSO, Mode + $('.spottable th:nth-child(4), .spottable td:nth-child(4)').addClass('column-hidden'); // Mode $('.spottable th:nth-child(8), .spottable td:nth-child(8)').addClass('column-hidden'); // CQZ $('.spottable th:nth-child(13), .spottable td:nth-child(13)').addClass('column-hidden'); // de CQZ $('.spottable th:nth-child(14), .spottable td:nth-child(14)').addClass('column-hidden'); // Last QSO