goodspeed/Cloudlog
1
0
派生 0
代码 工单 合并请求 项目 版本发布 软件包 百科 动态 Actions

Replace Bootstrap tabs with custom styled tabs

浏览代码 
Introduces custom tab navigation with enhanced dark theme support, replacing Bootstrap nav-tabs. Adds aggressive tab styling, a custom tab switching script, and updates card headers for consistent appearance across all tab panes.
这个提交包含在：
Peter Goodhall 2025-08-09 23:40:10 +01:00
父节点 b4d06dc0a9
当前提交 e5675d3531
共有 1 个文件被更改，包括 126 次插入 和 47 次删除
显示统计信息 下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

165
application/views/adif/import.php
查看文件

@ -14,51 +14,132 @@
} }
?> ?>
<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 */
.text-muted {
color: var(--bs-secondary-color) !important;
opacity: 0.8;
}
</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 bg-light"> <div class="card-header" style="background-color: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color);">
<ul class="nav nav-tabs card-header-tabs" role="tablist"> <div class="custom-tab-nav">
<li class="nav-item"> <a href="#import" class="custom-tab-btn <?php if ($showtab == '' || $showtab == 'adif') echo 'active'; ?>"
<a class="nav-link <?php if ($showtab == '' || $showtab == 'adif') { data-bs-toggle="tab" role="tab" aria-controls="import" id="import-tab">
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 if ($showtab == '' || $showtab == 'adif') {
echo 'true';
} else {
echo 'false';
} ?>">
<i class="fas fa-upload me-1"></i><?php echo lang('adif_import') ?>
</a> </a>
</li> <a href="#export" class="custom-tab-btn"
<li class="nav-item"> data-bs-toggle="tab" role="tab" aria-controls="export" id="export-tab">
<a class="nav-link" id="export-tab" data-bs-toggle="tab" href="#export" role="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>
</li> <a href="#lotw" class="custom-tab-btn"
<li class="nav-item"> data-bs-toggle="tab" role="tab" aria-controls="lotw" id="lotw-tab">
<a class="nav-link" id="lotw-tab" data-bs-toggle="tab" href="#lotw" role="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>
</li> <a href="#dcl" class="custom-tab-btn <?php if ($showtab == 'dcl') echo 'active'; ?>"
<li class="nav-item"> data-bs-toggle="tab" role="tab" aria-controls="dcl" id="dcl-tab">
<a class="nav-link <?php if ($showtab == 'dcl') { <i class="fas fa-flag"></i><?php echo lang('darc_dcl') ?>
echo 'active';
} ?>" id="dcl-tab" data-bs-toggle="tab" href="#dcl" role="tab" aria-controls="dcl" aria-selected="<?php if ($showtab == 'dcl') {
echo 'true';
} else {
echo 'false';
} ?>">
<i class="fas fa-flag me-1"></i><?php echo lang('darc_dcl') ?>
</a> </a>
</li> </div>
</ul>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane <?php if ($showtab == '' || $showtab == 'adif') { <div class="tab-pane <?php if ($showtab == '' || $showtab == 'adif') {
echo 'active'; echo 'active show';
} else { } else {
echo 'fade'; echo 'fade';
} ?>" id="import" role="tabpanel" aria-labelledby="home-tab"> } ?>" id="import" role="tabpanel" aria-labelledby="import-tab">
<?php if (isset($error) && ($showtab == '' || $showtab == 'adif')) { ?> <?php if (isset($error) && ($showtab == '' || $showtab == 'adif')) { ?>
<div class="alert alert-danger" role="alert"> <div class="alert alert-danger" role="alert">
@ -116,7 +197,7 @@
<!-- Basic Options --> <!-- Basic Options -->
<div class="card mb-3"> <div class="card mb-3">
<div class="card-header"> <div class="card-header" style="background-color: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color);">
<h6 class="mb-0">Basic Settings</h6> <h6 class="mb-0">Basic Settings</h6>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -158,10 +239,8 @@
<!-- Logbook Upload Markers --> <!-- Logbook Upload Markers -->
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header" style="background-color: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color);">
<h6 class="mb-0">Mark as Uploaded to Online Logbooks</h6> <h6 class="mb-0">Mark as Uploaded to Online Logbooks</h6> </div>
<small class="text-muted">Select if ADIF being imported does not contain this information</small>
</div>
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
@ -223,7 +302,7 @@
<form class="form" action="<?php echo site_url('adif/export_custom'); ?>" method="post" enctype="multipart/form-data"> <form class="form" action="<?php echo site_url('adif/export_custom'); ?>" method="post" enctype="multipart/form-data">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header" style="background-color: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color);">
<h6 class="mb-0">Export Settings</h6> <h6 class="mb-0">Export Settings</h6>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -282,7 +361,7 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header" style="background-color: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color);">
<h6 class="mb-0"><i class="fas fa-satellite me-2"></i><?php echo lang('adif_export_sat_only_qso') ?></h6> <h6 class="mb-0"><i class="fas fa-satellite me-2"></i><?php echo lang('adif_export_sat_only_qso') ?></h6>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -320,7 +399,7 @@
<form class="form" action="<?php echo site_url('adif/mark_lotw'); ?>" method="post" enctype="multipart/form-data"> <form class="form" action="<?php echo site_url('adif/mark_lotw'); ?>" method="post" enctype="multipart/form-data">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header" style="background-color: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color);">
<h6 class="mb-0">Mark QSOs as Exported to LoTW</h6> <h6 class="mb-0">Mark QSOs as Exported to LoTW</h6>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -363,7 +442,7 @@
</div> </div>
</div> </div>
<div class="tab-pane <?php if ($showtab == 'dcl') { <div class="tab-pane <?php if ($showtab == 'dcl') {
echo 'active'; echo 'active show';
} else { } else {
echo 'fade'; echo 'fade';
} ?>" id="dcl" role="tabpanel" aria-labelledby="dcl-tab"> } ?>" id="dcl" role="tabpanel" aria-labelledby="dcl-tab">
@ -387,7 +466,7 @@
<form class="form" action="<?php echo site_url('adif/dcl'); ?>" method="post" enctype="multipart/form-data"> <form class="form" action="<?php echo site_url('adif/dcl'); ?>" method="post" enctype="multipart/form-data">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header" style="background-color: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color);">
<h6 class="mb-0">DCL Import Settings</h6> <h6 class="mb-0">DCL Import Settings</h6>
</div> </div>
<div class="card-body"> <div class="card-body">