@@ -7610,7 +7784,8 @@
function _refreshCommentCountBadge() {
const container = document.getElementById('comments-container');
- const badge = document.querySelector('#beskrivelse-comments-wrap .badge.bg-secondary');
+ const badge = document.getElementById('commentsTotalCountBadge')
+ || document.querySelector('#beskrivelse-comments-wrap .badge.bg-secondary');
if (!container || !badge) return;
badge.textContent = String(container.querySelectorAll('.comment-item').length);
}
@@ -11964,10 +12139,23 @@
}
function updateRightColumnVisibility() {
+ const detailsPane = document.getElementById('details');
const rightColumn = document.getElementById('case-right-column');
const leftColumn = document.getElementById('case-left-column');
if (!rightColumn || !leftColumn) return;
+ if (detailsPane) {
+ let detailsRow = null;
+ try {
+ detailsRow = detailsPane.querySelector(':scope > .row.g-4');
+ } catch (e) {
+ detailsRow = detailsPane.querySelector('.row.g-4');
+ }
+ if (detailsRow && rightColumn.parentElement !== detailsRow) {
+ detailsRow.appendChild(rightColumn);
+ }
+ }
+
const visibleRightModules = rightColumn.querySelectorAll('.right-module-card:not(.d-none)');
if (visibleRightModules.length === 0) {
rightColumn.classList.add('d-none');
@@ -12883,8 +13071,7 @@
function openCaseEmailTab() {
const trigger = document.getElementById('emails-tab');
if (!trigger) return;
- const instance = bootstrap.Tab.getOrCreateInstance(trigger);
- instance.show();
+ forceCaseTabActivation('emails');
}
window.quickReplyToEmailFromComment = async function(emailId) {
@@ -14161,8 +14348,9 @@
|| document.querySelector(`[data-module-tab="${tabParam}"]`);
if (tabBtn) {
setTimeout(() => {
- bootstrap.Tab.getOrCreateInstance(tabBtn).show();
- forceCaseTabActivation(tabParam);
+ const targetSelector = tabBtn.getAttribute('data-bs-target') || '';
+ const targetTabId = targetSelector.startsWith('#') ? targetSelector.slice(1) : tabParam;
+ forceCaseTabActivation(targetTabId);
}, 300);
}
}
diff --git a/app/modules/sag/templates/detail_v3.html b/app/modules/sag/templates/detail_v3.html
index 85fe5bc..9c1ec1b 100644
--- a/app/modules/sag/templates/detail_v3.html
+++ b/app/modules/sag/templates/detail_v3.html
@@ -864,11 +864,11 @@
/* Forslag 1: Opgavebeskrivelse + kommentarspor (venstre side) */
.narrative-description {
- border: 1px solid rgba(15, 76, 117, 0.22);
- background: linear-gradient(165deg, rgba(15, 76, 117, 0.11), rgba(15, 76, 117, 0.04));
- border-radius: 12px;
- padding: 1.1rem 1.1rem 1rem;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 3px 10px rgba(15, 76, 117, 0.06);
+ border: 0;
+ background: transparent;
+ border-radius: 0;
+ padding: 0.25rem 0.1rem 0;
+ box-shadow: none;
}
#beskrivelse-section {
@@ -927,10 +927,10 @@
}
#beskrivelse-comments-wrap {
- border: 1px solid rgba(15, 76, 117, 0.2);
- border-radius: 12px;
- background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, var(--bg-card)), var(--bg-card));
- padding: 0.95rem;
+ border: 0;
+ border-radius: 0;
+ background: transparent;
+ padding: 0;
}
.narrative-lead {
@@ -1393,14 +1393,51 @@
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
+ .case-details-shell {
+ background: transparent;
+ border: 0;
+ border-radius: 0;
+ box-shadow: none;
+ }
+
+ #case-left-column > .row.g-4,
+ #inner-center-col > .row.mb-3 {
+ --bs-gutter-x: 0;
+ --bs-gutter-y: 0;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+
+ #inner-left-col,
+ #inner-center-col,
+ #inner-center-col > .row.mb-3 > .col-12 {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+
+ #inner-center-col > .row.mb-3 > .col-12 {
+ margin-top: 0 !important;
+ margin-bottom: 0.75rem !important;
+ }
+
+ #inner-center-col .case-details-shell > .card-body {
+ padding: 0 !important;
+ }
+
+ #beskrivelse-section {
+ margin-top: 0 !important;
+ padding-top: 0 !important;
+ border-top: 0 !important;
+ }
+
[data-bs-theme="dark"] .case-tab-count-badge {
box-shadow: 0 0 0 2px rgba(20, 28, 36, 0.95);
}
[data-bs-theme="dark"] .narrative-description {
- border-color: rgba(117, 194, 239, 0.32);
- background: linear-gradient(180deg, rgba(117, 194, 239, 0.2), rgba(117, 194, 239, 0.08));
- box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(5, 18, 30, 0.28);
+ border-color: transparent;
+ background: transparent;
+ box-shadow: none;
}
[data-bs-theme="dark"] .case-left-section-title {
@@ -1412,8 +1449,7 @@
}
[data-bs-theme="dark"] .case-left-panel,
- [data-bs-theme="dark"] #beskrivelse-history-wrap,
- [data-bs-theme="dark"] #beskrivelse-comments-wrap {
+ [data-bs-theme="dark"] #beskrivelse-history-wrap {
border-color: rgba(117, 194, 239, 0.28);
background: linear-gradient(180deg, rgba(117, 194, 239, 0.08), rgba(17, 24, 33, 0.94));
}
@@ -1488,13 +1524,22 @@
border-bottom: 1px solid rgba(15, 76, 117, 0.08);
}
- #caseTabsContent > .tab-pane {
- display: none;
+ #caseTabsContent .tab-pane {
+ display: none !important;
+ opacity: 1 !important;
+ transition: none !important;
}
- #caseTabsContent > .tab-pane.active,
- #caseTabsContent > .tab-pane.show.active {
- display: block;
+ #caseTabsContent {
+ margin-top: 0 !important;
+ padding-top: 0 !important;
+ }
+
+ #caseTabsContent .tab-pane.active,
+ #caseTabsContent .tab-pane.show.active {
+ display: block !important;
+ opacity: 1 !important;
+ visibility: visible !important;
}
.todo-step-item {
@@ -1857,6 +1902,10 @@
gap: 0.75rem;
}
+ #beskrivelse-section {
+ gap: 0.75rem;
+ }
+
.module-priority-low {
--module-accent: #64748b;
}
@@ -1882,9 +1931,30 @@
box-shadow: 0 4px 14px rgba(15, 76, 117, 0.08);
}
- .right-module-card .card-header {
+ .left-module-card {
+ border: 1px solid rgba(15, 76, 117, 0.14);
+ border-left: 4px solid var(--module-accent, var(--accent));
+ border-radius: 12px;
+ overflow: hidden;
+ background: linear-gradient(165deg, color-mix(in srgb, var(--module-accent, var(--accent)) 6%, var(--bg-card)) 0%, var(--bg-card) 100%);
+ box-shadow: 0 4px 14px rgba(15, 76, 117, 0.08);
+ }
+
+ .right-module-card .card-header,
+ .left-module-card .card-header {
border-bottom: 1px solid color-mix(in srgb, var(--module-accent, var(--accent)) 22%, #d1d5db);
background: color-mix(in srgb, var(--module-accent, var(--accent)) 7%, var(--bg-card));
+ padding: 0.35rem 0.6rem;
+ min-height: 0;
+ }
+
+ .right-module-card > .card-body,
+ .left-module-card > .card-body {
+ padding: 0.4rem !important;
+ }
+
+ #beskrivelse-section .left-module-card + .left-module-card {
+ margin-top: 0.75rem;
}
.module-title {
@@ -2284,11 +2354,26 @@
box-shadow: 0 4px 12px rgba(15, 76, 117, 0.10);
}
+ .left-module-card,
+ .right-module-card {
+ border: 2px solid rgba(15, 76, 117, 0.28) !important;
+ border-left: 2px solid rgba(15, 76, 117, 0.28) !important;
+ border-radius: 12px !important;
+ box-shadow: 0 4px 12px rgba(15, 76, 117, 0.10) !important;
+ }
+
[data-bs-theme="dark"] .card[data-module] {
border-color: rgba(117, 167, 204, 0.45) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
+ [data-bs-theme="dark"] .left-module-card,
+ [data-bs-theme="dark"] .right-module-card {
+ border: 2px solid rgba(117, 167, 204, 0.45) !important;
+ border-left: 2px solid rgba(117, 167, 204, 0.45) !important;
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
+ }
+
[data-bs-theme="dark"] .topbar-company-edit-btn {
border-color: rgba(170,205,245,0.5);
box-shadow: 0 1px 6px rgba(75,145,255,0.35);
@@ -2309,11 +2394,24 @@
background: linear-gradient(165deg, color-mix(in srgb, var(--module-accent, #69a6d5) 12%, rgba(18, 28, 40, 0.94)) 0%, rgba(18, 28, 40, 0.94) 100%);
}
- [data-bs-theme="dark"] .right-module-card .card-header {
+ [data-bs-theme="dark"] .left-module-card {
+ border-color: rgba(140, 182, 219, 0.25);
+ box-shadow: 0 4px 16px rgba(5, 22, 40, 0.45);
+ background: linear-gradient(165deg, color-mix(in srgb, var(--module-accent, #69a6d5) 12%, rgba(18, 28, 40, 0.94)) 0%, rgba(18, 28, 40, 0.94) 100%);
+ }
+
+ [data-bs-theme="dark"] .right-module-card .card-header,
+ [data-bs-theme="dark"] .left-module-card .card-header {
border-bottom-color: color-mix(in srgb, var(--module-accent, #69a6d5) 45%, #4b5563);
background: color-mix(in srgb, var(--module-accent, #69a6d5) 18%, rgba(18, 28, 40, 0.98));
}
+ [data-bs-theme="dark"] .case-details-shell {
+ border-color: transparent;
+ box-shadow: none;
+ background: transparent;
+ }
+
[data-bs-theme="dark"] .module-title {
color: #e5edf5;
}
@@ -3351,37 +3449,73 @@
window.caseTypeModuleDefaults = caseTypeModuleDefaults;
window.caseTypeKey = window.caseTypeKey || {{ ((case.template_key or case.type or 'ticket')|lower)|tojson }};
- window.forceCaseTabActivation = window.forceCaseTabActivation || function(tabId) {
- if (!tabId) return;
+ window.syncCaseTabPaneVisibility = window.syncCaseTabPaneVisibility || function(activeTabId) {
+ if (!activeTabId) return;
const tabContent = document.getElementById('caseTabsContent');
- const targetPane = document.getElementById(tabId);
- if (!tabContent || !targetPane) return;
+ if (!tabContent) return;
+ const paneIds = Array.from(document.querySelectorAll('#caseTabs [data-bs-target^="#"]'))
+ .map((btn) => (btn.getAttribute('data-bs-target') || '').replace('#', ''))
+ .filter(Boolean);
+ if (!paneIds.length) return;
- tabContent.querySelectorAll(':scope > .tab-pane').forEach((pane) => {
- pane.classList.remove('show', 'active');
- pane.style.display = 'none';
+ paneIds.forEach((paneId) => {
+ const pane = document.getElementById(paneId);
+ if (pane && pane.parentElement !== tabContent) {
+ tabContent.appendChild(pane);
+ }
});
- targetPane.classList.add('show', 'active');
- targetPane.style.display = 'block';
+ paneIds.forEach((paneId) => {
+ const pane = document.getElementById(paneId);
+ if (!pane) return;
+ const isActive = pane.id === activeTabId;
+ pane.classList.toggle('active', isActive);
+ pane.classList.toggle('show', isActive);
+ pane.classList.remove('d-none');
+ pane.style.display = isActive ? 'block' : 'none';
+ pane.style.opacity = '1';
+ pane.style.visibility = isActive ? 'visible' : 'hidden';
+ pane.hidden = !isActive;
+ });
const tabButtons = document.querySelectorAll('#caseTabs [data-bs-target]');
tabButtons.forEach((btn) => {
- btn.classList.toggle('active', btn.getAttribute('data-bs-target') === `#${tabId}`);
+ const isActive = btn.getAttribute('data-bs-target') === `#${activeTabId}`;
+ btn.classList.toggle('active', isActive);
+ btn.setAttribute('aria-selected', isActive ? 'true' : 'false');
+ btn.tabIndex = isActive ? 0 : -1;
});
};
+
+ window.forceCaseTabActivation = window.forceCaseTabActivation || function(tabId) {
+ if (!tabId) return;
+ const trigger = document.querySelector(`#caseTabs [data-bs-target="#${tabId}"]`);
+ if (!trigger) return;
+ window.syncCaseTabPaneVisibility(tabId);
+ trigger.dispatchEvent(new Event('shown.bs.tab', { bubbles: true }));
+ if (typeof window.loadCaseTabData === 'function') window.loadCaseTabData(tabId);
+ };
+
+ window.activateCaseTabFromButton = window.activateCaseTabFromButton || function(event, tabId) {
+ if (event) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ window.forceCaseTabActivation(tabId);
+ return false;
+ };
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-