mirror of
https://github.com/wavelog/wavelog.git
synced 2026-03-22 02:14:13 +00:00
Further CSS improvments
This commit is contained in:
Szymon Porwolik
@@ -235,7 +235,7 @@
|
||||
|
||||
<!-- Radio Selector Dropdown -->
|
||||
<small class="text-muted me-1 flex-shrink-0 d-none d-md-inline"><?= __("TRX:"); ?></small>
|
||||
<select class="form-select form-select-sm radios flex-shrink-0" id="radio" name="radio" style="width: auto; min-width: 150px;">
|
||||
<select class="form-select form-select-sm radios flex-shrink-0" id="radio" name="radio" style="width: auto;">
|
||||
<option value="0" selected="selected"><?= __("None"); ?></option>
|
||||
<option value="ws"<?php if ($this->session->userdata('radio') == 'ws') { echo ' selected="selected"'; } ?>><?= __("Live - ") . __("WebSocket (Requires WLGate>=1.1.10)"); ?></option>
|
||||
<?php foreach ($radios->result() as $row) { ?>
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user