Refactor ADIF import tabs to use Bootstrap nav-tabs
Replaced custom tab navigation and styling in the ADIF import view with Bootstrap's native nav-tabs for improved maintainability and consistency. Removed related custom CSS and JavaScript, simplifying the codebase and leveraging Bootstrap's built-in tab functionality.
这个提交包含在：
Peter Goodhall
父节点
4a28df703e
当前提交
09c45a7e3e
共有 2 个文件被更改，包括 23 次插入 和 131 次删除
|
|
@ -15,61 +15,6 @@
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Aggressive tab styling for maximum visibility in dark themes */
|
|
||||||
.custom-tab-nav {
|
|
||||||
display: flex;
|
|
||||||
gap: 3px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
border-bottom: 1px solid var(--bs-border-color);
|
|
||||||
padding: 0;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
.custom-tab-btn {
|
|
||||||
background-color: #495057 !important;
|
|
||||||
color: #ffffff !important;
|
|
||||||
border: 2px solid #6c757d !important;
|
|
||||||
border-bottom: none !important;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 0.375rem 0.375rem 0 0;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
position: relative;
|
|
||||||
top: 1px;
|
|
||||||
font-weight: 500;
|
|
||||||
min-width: 120px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.custom-tab-btn:hover {
|
|
||||||
background-color: #6c757d !important;
|
|
||||||
color: #ffffff !important;
|
|
||||||
text-decoration: none;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
.custom-tab-btn.active {
|
|
||||||
background-color: var(--bs-body-bg) !important;
|
|
||||||
color: var(--bs-body-color) !important;
|
|
||||||
border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg) !important;
|
|
||||||
font-weight: 600;
|
|
||||||
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
.custom-tab-btn i {
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
/* Dark theme specific overrides */
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.custom-tab-btn {
|
|
||||||
background-color: #343a40 !important;
|
|
||||||
color: #f8f9fa !important;
|
|
||||||
border-color: #495057 !important;
|
|
||||||
}
|
|
||||||
.custom-tab-btn:hover {
|
|
||||||
background-color: #495057 !important;
|
|
||||||
color: #ffffff !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Fix text-muted visibility in dark themes */
|
/* Fix text-muted visibility in dark themes */
|
||||||
.text-muted {
|
.text-muted {
|
||||||
color: var(--bs-secondary-color) !important;
|
color: var(--bs-secondary-color) !important;
|
||||||
|
|
@ -77,60 +22,30 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
|
||||||
// Custom tab functionality since we replaced Bootstrap nav-tabs
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
const tabButtons = document.querySelectorAll('.custom-tab-btn');
|
|
||||||
const tabPanes = document.querySelectorAll('.tab-pane');
|
|
||||||
|
|
||||||
tabButtons.forEach(button => {
|
|
||||||
button.addEventListener('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
// Remove active class from all buttons
|
|
||||||
tabButtons.forEach(btn => btn.classList.remove('active'));
|
|
||||||
|
|
||||||
// Add active class to clicked button
|
|
||||||
this.classList.add('active');
|
|
||||||
|
|
||||||
// Hide all tab panes
|
|
||||||
tabPanes.forEach(pane => {
|
|
||||||
pane.classList.remove('active', 'show');
|
|
||||||
pane.classList.add('fade');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Show target tab pane
|
|
||||||
const targetId = this.getAttribute('href').substring(1);
|
|
||||||
const targetPane = document.getElementById(targetId);
|
|
||||||
if (targetPane) {
|
|
||||||
targetPane.classList.remove('fade');
|
|
||||||
targetPane.classList.add('active', 'show');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
<div class="card-header" style="background-color: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color);">
|
<div class="card-header">
|
||||||
<div class="custom-tab-nav">
|
<nav class="card-header-tabs">
|
||||||
<a href="#import" class="custom-tab-btn <?php if ($showtab == '' || $showtab == 'adif') echo 'active'; ?>"
|
<div class="nav nav-tabs" id="nav-tab" role="tablist">
|
||||||
data-bs-toggle="tab" role="tab" aria-controls="import" id="import-tab">
|
<a class="nav-item nav-link <?php if ($showtab == '' || $showtab == 'adif') echo 'active'; ?>"
|
||||||
<i class="fas fa-upload"></i><?php echo lang('adif_import') ?>
|
id="import-tab" data-bs-toggle="tab" href="#import" role="tab" aria-controls="import"
|
||||||
|
aria-selected="<?php echo ($showtab == '' || $showtab == 'adif') ? 'true' : 'false'; ?>">
|
||||||
|
<i class="fas fa-upload me-1"></i><?php echo lang('adif_import') ?>
|
||||||
</a>
|
</a>
|
||||||
<a href="#export" class="custom-tab-btn"
|
<a class="nav-item nav-link" id="export-tab" data-bs-toggle="tab" href="#export" role="tab"
|
||||||
data-bs-toggle="tab" role="tab" aria-controls="export" id="export-tab">
|
aria-controls="export" aria-selected="false">
|
||||||
<i class="fas fa-download"></i><?php echo lang('adif_export') ?>
|
<i class="fas fa-download me-1"></i><?php echo lang('adif_export') ?>
|
||||||
</a>
|
</a>
|
||||||
<a href="#lotw" class="custom-tab-btn"
|
<a class="nav-item nav-link" id="lotw-tab" data-bs-toggle="tab" href="#lotw" role="tab"
|
||||||
data-bs-toggle="tab" role="tab" aria-controls="lotw" id="lotw-tab">
|
aria-controls="lotw" aria-selected="false">
|
||||||
<i class="fas fa-globe"></i><?php echo lang('lotw_title') ?>
|
<i class="fas fa-globe me-1"></i><?php echo lang('lotw_title') ?>
|
||||||
</a>
|
</a>
|
||||||
<a href="#dcl" class="custom-tab-btn <?php if ($showtab == 'dcl') echo 'active'; ?>"
|
<a class="nav-item nav-link <?php if ($showtab == 'dcl') echo 'active'; ?>"
|
||||||
data-bs-toggle="tab" role="tab" aria-controls="dcl" id="dcl-tab">
|
id="dcl-tab" data-bs-toggle="tab" href="#dcl" role="tab" aria-controls="dcl"
|
||||||
<i class="fas fa-flag"></i><?php echo lang('darc_dcl') ?>
|
aria-selected="<?php echo ($showtab == 'dcl') ? 'true' : 'false'; ?>">
|
||||||
|
<i class="fas fa-flag me-1"></i><?php echo lang('darc_dcl') ?>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
|
||||||
|
|
@ -74,34 +74,11 @@ thead>tr>td {
|
||||||
margin-bottom: 0rem;
|
margin-bottom: 0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Enhanced ADIF styling */
|
|
||||||
.adif .nav-tabs .nav-link {
|
|
||||||
border-radius: 0.5rem 0.5rem 0 0;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adif .nav-tabs .nav-link:hover {
|
|
||||||
border-color: #e9ecef #e9ecef #dee2e6;
|
|
||||||
isolation: isolate;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adif .nav-tabs .nav-link.active {
|
|
||||||
background-color: #fff;
|
|
||||||
border-color: #dee2e6 #dee2e6 #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adif .card {
|
.adif .card {
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||||
}
|
}
|
||||||
|
|
||||||
.adif .card-header {
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
border-bottom: 1px solid #dee2e6;
|
|
||||||
padding: 1rem 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adif .card-body {
|
.adif .card-body {
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
正在加载…
在新工单中引用