Fix SAG tab pane top rendering fallback
This commit is contained in:
Christian
parent
beaea0288c
commit
60d692c085
15
RELEASE_NOTES_v2.2.61.md
Normal file
15
RELEASE_NOTES_v2.2.61.md
Normal file
@ -0,0 +1,15 @@
|
||||
# Release Notes v2.2.61
|
||||
|
||||
Dato: 18. marts 2026
|
||||
|
||||
## Fixes
|
||||
|
||||
- Rettet SAG-fanevisning i sag-detaljesiden, så kun den aktive fane vises i toppen.
|
||||
- Tilføjet direkte klik-fallback på faneknapper (`onclick`) for robust aktivering, også hvis Bootstrap tab-events fejler.
|
||||
- Sat eksplicit start-visibility på tab-panes for at undgå "lang side"-effekten med indhold langt nede.
|
||||
- Fjernet to ødelagte CSS-blokke i toppen af templaten, som kunne skabe ustabil styling/parsing.
|
||||
|
||||
## Berørte filer
|
||||
|
||||
- `app/modules/sag/templates/detail.html`
|
||||
- `RELEASE_NOTES_v2.2.61.md`
|
||||
@ -4,9 +4,6 @@
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -960,14 +957,6 @@
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 76, 117, 0.12);
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
margin-right: 0.35rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.right-modules-grid {
|
||||
display: grid;
|
||||
@ -1305,12 +1294,12 @@
|
||||
<!-- Tabs Navigation -->
|
||||
<ul class="nav nav-tabs mb-4" id="caseTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab">
|
||||
<button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" onclick="forceCaseTabActivation('details', this)">
|
||||
<i class="bi bi-card-text me-2"></i>Sagsdetaljer
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="solution-tab" data-bs-toggle="tab" data-bs-target="#solution" type="button" role="tab" data-module-tab="solution">
|
||||
<button class="nav-link" id="solution-tab" data-bs-toggle="tab" data-bs-target="#solution" type="button" role="tab" data-module-tab="solution" onclick="forceCaseTabActivation('solution', this)">
|
||||
<i class="bi bi-lightbulb me-2"></i>Løsning
|
||||
{% if solution %}
|
||||
<span class="badge bg-success ms-1 rounded-pill"><i class="bi bi-check"></i></span>
|
||||
@ -1318,22 +1307,22 @@
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="emails-tab" data-bs-toggle="tab" data-bs-target="#emails" type="button" role="tab" data-module-tab="emails">
|
||||
<button class="nav-link" id="emails-tab" data-bs-toggle="tab" data-bs-target="#emails" type="button" role="tab" data-module-tab="emails" onclick="forceCaseTabActivation('emails', this)">
|
||||
<i class="bi bi-envelope me-2"></i>E-mail
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales" type="button" role="tab" data-module-tab="sales">
|
||||
<button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales" type="button" role="tab" data-module-tab="sales" onclick="forceCaseTabActivation('sales', this)">
|
||||
<i class="bi bi-basket3 me-2"></i>Varekøb & Salg
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="subscription-tab" data-bs-toggle="tab" data-bs-target="#subscription" type="button" role="tab" data-module-tab="subscription">
|
||||
<button class="nav-link" id="subscription-tab" data-bs-toggle="tab" data-bs-target="#subscription" type="button" role="tab" data-module-tab="subscription" onclick="forceCaseTabActivation('subscription', this)">
|
||||
<i class="bi bi-repeat me-2"></i>Abonnement
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="reminders-tab" data-bs-toggle="tab" data-bs-target="#reminders" type="button" role="tab" data-module-tab="reminders">
|
||||
<button class="nav-link" id="reminders-tab" data-bs-toggle="tab" data-bs-target="#reminders" type="button" role="tab" data-module-tab="reminders" onclick="forceCaseTabActivation('reminders', this)">
|
||||
<i class="bi bi-bell me-2"></i>Påmindelser
|
||||
</button>
|
||||
</li>
|
||||
@ -1341,7 +1330,7 @@
|
||||
|
||||
<div class="tab-content" id="caseTabsContent">
|
||||
<!-- Tab: Sagsdetaljer (Existing Content) -->
|
||||
<div class="tab-pane fade show active" id="details" role="tabpanel" tabindex="0">
|
||||
<div class="tab-pane fade show active" id="details" role="tabpanel" tabindex="0" style="display:block;">
|
||||
<div class="row g-4">
|
||||
<div class="col-xl-9 col-lg-8" id="case-left-column">
|
||||
<div class="row g-4">
|
||||
@ -2217,6 +2206,27 @@
|
||||
let selectedRelationCaseId = null;
|
||||
const caseTypeKey = "{{ (case.template_key or case.type or 'ticket')|lower }}";
|
||||
|
||||
function forceCaseTabActivation(tabId) {
|
||||
if (!tabId) return;
|
||||
|
||||
const tabContent = document.getElementById('caseTabsContent');
|
||||
const targetPane = document.getElementById(tabId);
|
||||
if (!tabContent || !targetPane) return;
|
||||
|
||||
tabContent.querySelectorAll(':scope > .tab-pane').forEach((pane) => {
|
||||
pane.classList.remove('show', 'active');
|
||||
pane.style.display = 'none';
|
||||
});
|
||||
|
||||
targetPane.classList.add('show', 'active');
|
||||
targetPane.style.display = 'block';
|
||||
|
||||
const tabButtons = document.querySelectorAll('#caseTabs [data-bs-target]');
|
||||
tabButtons.forEach((btn) => {
|
||||
btn.classList.toggle('active', btn.getAttribute('data-bs-target') === `#${tabId}`);
|
||||
});
|
||||
}
|
||||
|
||||
window.moduleDisplayNames = {
|
||||
'relations': 'Relationer',
|
||||
'call-history': 'Opkaldshistorik',
|
||||
@ -2302,6 +2312,8 @@
|
||||
const targetSelector = event?.target?.getAttribute('data-bs-target') || '';
|
||||
const tabId = targetSelector.startsWith('#') ? targetSelector.slice(1) : targetSelector;
|
||||
|
||||
forceCaseTabActivation(tabId);
|
||||
|
||||
try {
|
||||
if (tabId === 'sales' && typeof loadVarekobSalg === 'function') {
|
||||
await loadVarekobSalg();
|
||||
@ -2315,8 +2327,20 @@
|
||||
console.error('Tab data reload failed:', tabLoadError);
|
||||
}
|
||||
});
|
||||
|
||||
caseTabs.addEventListener('click', (event) => {
|
||||
const btn = event.target.closest('[data-bs-target]');
|
||||
if (!btn) return;
|
||||
const targetSelector = btn.getAttribute('data-bs-target') || '';
|
||||
const tabId = targetSelector.startsWith('#') ? targetSelector.slice(1) : targetSelector;
|
||||
if (tabId) {
|
||||
setTimeout(() => forceCaseTabActivation(tabId), 0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
forceCaseTabActivation('details');
|
||||
|
||||
// Focus on title when create modal opens
|
||||
const createModalEl = document.getElementById('createRelatedCaseModal');
|
||||
if (createModalEl) {
|
||||
@ -3572,7 +3596,7 @@
|
||||
</div> <!-- End Details Tab -->
|
||||
|
||||
<!-- E-mail Tab -->
|
||||
<div class="tab-pane fade" id="emails" role="tabpanel" tabindex="0" data-module="emails" data-has-content="unknown">
|
||||
<div class="tab-pane fade" id="emails" role="tabpanel" tabindex="0" data-module="emails" data-has-content="unknown" style="display:none;">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0 text-primary"><i class="bi bi-envelope me-2"></i>E-mail på sagen</h6>
|
||||
@ -3675,7 +3699,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Solution Tab -->
|
||||
<div class="tab-pane fade" id="solution" role="tabpanel" tabindex="0" data-module="solution" data-has-content="{{ 'true' if solution or is_nextcloud else 'false' }}">
|
||||
<div class="tab-pane fade" id="solution" role="tabpanel" tabindex="0" data-module="solution" data-has-content="{{ 'true' if solution or is_nextcloud else 'false' }}" style="display:none;">
|
||||
<!-- Nextcloud Integration Box -->
|
||||
{% if is_nextcloud %}
|
||||
<div class="card mb-3">
|
||||
@ -3771,7 +3795,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Varekøb & Salg Tab -->
|
||||
<div class="tab-pane fade" id="sales" role="tabpanel" tabindex="0" data-module="sales" data-has-content="unknown">
|
||||
<div class="tab-pane fade" id="sales" role="tabpanel" tabindex="0" data-module="sales" data-has-content="unknown" style="display:none;">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-lg-8">
|
||||
<div class="card mb-3">
|
||||
@ -3914,7 +3938,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Subscription Tab -->
|
||||
<div class="tab-pane fade" id="subscription" role="tabpanel" tabindex="0" data-module="subscription" data-has-content="unknown">
|
||||
<div class="tab-pane fade" id="subscription" role="tabpanel" tabindex="0" data-module="subscription" data-has-content="unknown" style="display:none;">
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-8">
|
||||
<div class="card mb-3">
|
||||
@ -4124,7 +4148,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Reminders Tab -->
|
||||
<div class="tab-pane fade" id="reminders" role="tabpanel" tabindex="0" data-module="reminders" data-has-content="unknown">
|
||||
<div class="tab-pane fade" id="reminders" role="tabpanel" tabindex="0" data-module="reminders" data-has-content="unknown" style="display:none;">
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-8">
|
||||
<div class="card mb-3">
|
||||
@ -7711,6 +7735,7 @@
|
||||
if (tabBtn) {
|
||||
setTimeout(() => {
|
||||
bootstrap.Tab.getOrCreateInstance(tabBtn).show();
|
||||
forceCaseTabActivation(tabParam);
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user