Refactor UI components and layouts for improved user experience
- Removed outdated design_forslag_top3_ny_side.html file. - Updated bottom-bar.js to add back button functionality for better navigation. - Introduced new sidebar layout in design_forslag_1_sidebar.html for enhanced information display. - Created design_forslag_2_kompakt.html featuring a compact action ribbon for streamlined interactions. - Developed design_forslag_3_kort.html implementing a widget cards dashboard for a cleaner overview of case details.
This commit is contained in:
Christian
parent
3452472ba9
commit
dee82af2ea
@ -379,6 +379,26 @@
|
|||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.email-html-body {
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-html-iframe {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 520px;
|
||||||
|
height: min(72vh, 980px);
|
||||||
|
border: 1px solid rgba(0,0,0,0.08);
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #ffffff;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .email-html-iframe {
|
||||||
|
background: #111827;
|
||||||
|
border-color: rgba(255,255,255,0.16);
|
||||||
|
}
|
||||||
|
|
||||||
.email-body pre,
|
.email-body pre,
|
||||||
.email-html-body,
|
.email-html-body,
|
||||||
.email-html-body * {
|
.email-html-body * {
|
||||||
@ -388,14 +408,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.email-html-body table {
|
.email-html-body table {
|
||||||
display: block;
|
display: table;
|
||||||
overflow-x: auto;
|
overflow-x: visible;
|
||||||
width: 100% !important;
|
width: max-content !important;
|
||||||
|
min-width: 100% !important;
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
table-layout: auto !important;
|
table-layout: auto !important;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.email-table-scroll {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-table-scroll > table {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.email-html-body tbody,
|
.email-html-body tbody,
|
||||||
.email-html-body thead,
|
.email-html-body thead,
|
||||||
.email-html-body tfoot,
|
.email-html-body tfoot,
|
||||||
@ -407,11 +441,21 @@
|
|||||||
|
|
||||||
.email-html-body td,
|
.email-html-body td,
|
||||||
.email-html-body th {
|
.email-html-body th {
|
||||||
|
min-width: 0 !important;
|
||||||
white-space: normal !important;
|
white-space: normal !important;
|
||||||
word-break: break-word !important;
|
word-break: break-word !important;
|
||||||
overflow-wrap: anywhere !important;
|
overflow-wrap: anywhere !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.email-html-body [width],
|
||||||
|
.email-html-body [style*="width:"],
|
||||||
|
.email-html-body [style*="width: "],
|
||||||
|
.email-html-body [style*="min-width:"],
|
||||||
|
.email-html-body [style*="min-width: "] {
|
||||||
|
max-width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
.email-html-body img,
|
.email-html-body img,
|
||||||
.email-html-body video,
|
.email-html-body video,
|
||||||
.email-html-body iframe {
|
.email-html-body iframe {
|
||||||
@ -2226,45 +2270,102 @@ function renderEmailDetail(email) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="email-body">
|
<div class="email-body">
|
||||||
${email.body_html ? `<div class="email-html-body"></div>` :
|
${email.body_html ? `<iframe class="email-html-iframe" sandbox="allow-popups allow-popups-to-escape-sandbox"></iframe>` :
|
||||||
`<pre style="white-space: pre-wrap; font-family: inherit;">${escapeHtml(email.body_text || 'Ingen indhold')}</pre>`}
|
`<pre style="white-space: pre-wrap; font-family: inherit;">${escapeHtml(email.body_text || 'Ingen indhold')}</pre>`}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
// If HTML, inject it as innerHTML after rendering
|
|
||||||
|
// If HTML, render inside sandboxed iframe so mail CSS cannot affect app layout.
|
||||||
if (email.body_html) {
|
if (email.body_html) {
|
||||||
const htmlDiv = pane.querySelector('.email-html-body');
|
const frame = pane.querySelector('.email-html-iframe');
|
||||||
if (htmlDiv) {
|
if (frame) {
|
||||||
htmlDiv.innerHTML = email.body_html;
|
frame.srcdoc = buildIsolatedEmailSrcdoc(email.body_html);
|
||||||
normalizeEmailHtmlLayout(htmlDiv);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function normalizeEmailHtmlLayout(container) {
|
function buildIsolatedEmailSrcdoc(rawHtml) {
|
||||||
if (!container) return;
|
const parser = new DOMParser();
|
||||||
|
const doc = parser.parseFromString(String(rawHtml || ''), 'text/html');
|
||||||
|
|
||||||
const tables = container.querySelectorAll('table');
|
doc.querySelectorAll('script, base, meta[http-equiv="refresh"]').forEach((el) => el.remove());
|
||||||
tables.forEach((table) => {
|
|
||||||
table.style.maxWidth = '100%';
|
|
||||||
table.style.width = '100%';
|
|
||||||
table.style.tableLayout = 'auto';
|
|
||||||
table.removeAttribute('width');
|
|
||||||
});
|
|
||||||
|
|
||||||
const cells = container.querySelectorAll('td, th');
|
doc.querySelectorAll('*').forEach((el) => {
|
||||||
cells.forEach((cell) => {
|
Array.from(el.attributes).forEach((attr) => {
|
||||||
cell.style.whiteSpace = 'normal';
|
if (/^on/i.test(attr.name)) {
|
||||||
cell.style.wordBreak = 'break-word';
|
el.removeAttribute(attr.name);
|
||||||
cell.style.overflowWrap = 'anywhere';
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const images = container.querySelectorAll('img, iframe, video');
|
if (el.hasAttribute('width')) {
|
||||||
images.forEach((el) => {
|
el.removeAttribute('width');
|
||||||
el.style.maxWidth = '100%';
|
}
|
||||||
if (el.tagName === 'IMG' || el.tagName === 'VIDEO') {
|
|
||||||
el.style.height = 'auto';
|
if (el.tagName === 'A') {
|
||||||
|
el.setAttribute('target', '_blank');
|
||||||
|
el.setAttribute('rel', 'noopener noreferrer');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const bodyHtml = (doc.body && doc.body.innerHTML) ? doc.body.innerHTML : String(rawHtml || '');
|
||||||
|
|
||||||
|
return `<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #1f2937;
|
||||||
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
display: block;
|
||||||
|
width: max-content !important;
|
||||||
|
min-width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
overflow-x: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
min-width: 0 !important;
|
||||||
|
white-space: normal !important;
|
||||||
|
word-break: break-word !important;
|
||||||
|
overflow-wrap: anywhere !important;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
img, video, iframe {
|
||||||
|
max-width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[style*="position:fixed"],
|
||||||
|
[style*="position: fixed"] {
|
||||||
|
position: static !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>${bodyHtml}</body>
|
||||||
|
</html>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderEmailAnalysis(email) {
|
function renderEmailAnalysis(email) {
|
||||||
|
|||||||
@ -864,11 +864,11 @@
|
|||||||
|
|
||||||
/* Forslag 1: Opgavebeskrivelse + kommentarspor (venstre side) */
|
/* Forslag 1: Opgavebeskrivelse + kommentarspor (venstre side) */
|
||||||
.narrative-description {
|
.narrative-description {
|
||||||
border: 1px solid rgba(15, 76, 117, 0.16);
|
border: 1px solid rgba(15, 76, 117, 0.22);
|
||||||
background: linear-gradient(180deg, rgba(15, 76, 117, 0.06), rgba(15, 76, 117, 0.02));
|
background: linear-gradient(165deg, rgba(15, 76, 117, 0.11), rgba(15, 76, 117, 0.04));
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 1.1rem 1.1rem 1rem;
|
padding: 1.1rem 1.1rem 1rem;
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 3px 10px rgba(15, 76, 117, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
#beskrivelse-section {
|
#beskrivelse-section {
|
||||||
@ -885,21 +885,26 @@
|
|||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.06em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--text-secondary);
|
color: color-mix(in srgb, var(--accent) 68%, #2f3a45);
|
||||||
margin-bottom: 0.55rem;
|
margin-bottom: 0.55rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.case-left-section-title i {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
.case-left-panel {
|
.case-left-panel {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.09);
|
border: 1px solid rgba(15, 76, 117, 0.18);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: var(--bg-card);
|
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--bg-card)), var(--bg-card));
|
||||||
padding: 0.9rem;
|
padding: 0.9rem;
|
||||||
|
box-shadow: 0 2px 8px rgba(15, 76, 117, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
#beskrivelse-history-wrap {
|
#beskrivelse-history-wrap {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.09);
|
border: 1px solid rgba(15, 76, 117, 0.18);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: rgba(0, 0, 0, 0.02);
|
background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
|
||||||
padding: 0.75rem 0.85rem;
|
padding: 0.75rem 0.85rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -909,9 +914,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#beskrivelse-comments-wrap {
|
#beskrivelse-comments-wrap {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
border: 1px solid rgba(15, 76, 117, 0.2);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: var(--bg-card);
|
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, var(--bg-card)), var(--bg-card));
|
||||||
padding: 0.95rem;
|
padding: 0.95rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -930,20 +935,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.comment-thread {
|
.comment-thread {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
border: 1px solid rgba(15, 76, 117, 0.2);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 0.65rem;
|
padding: 0.65rem;
|
||||||
max-height: 360px;
|
max-height: 360px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background: var(--bg-body);
|
background: color-mix(in srgb, var(--accent) 3%, var(--bg-body));
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-item {
|
.comment-item {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
border: 1px solid rgba(15, 76, 117, 0.16);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: var(--bg-card);
|
background: var(--bg-card);
|
||||||
padding: 0.55rem 0.65rem;
|
padding: 0.55rem 0.65rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
|
box-shadow: 0 1px 4px rgba(15, 76, 117, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-item:last-child {
|
.comment-item:last-child {
|
||||||
@ -1020,9 +1026,9 @@
|
|||||||
|
|
||||||
.comment-quick-reply-box {
|
.comment-quick-reply-box {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.75rem;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
border: 1px solid rgba(15, 76, 117, 0.2);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: var(--bg-card);
|
background: color-mix(in srgb, var(--accent) 3%, var(--bg-card));
|
||||||
padding: 0.6rem;
|
padding: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1162,13 +1168,31 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-bs-theme="dark"] .narrative-description {
|
[data-bs-theme="dark"] .narrative-description {
|
||||||
border-color: rgba(117, 194, 239, 0.24);
|
border-color: rgba(117, 194, 239, 0.32);
|
||||||
background: linear-gradient(180deg, rgba(117, 194, 239, 0.14), rgba(117, 194, 239, 0.06));
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .case-left-section-title {
|
||||||
|
color: #d4e8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .case-left-section-title i {
|
||||||
|
color: #8fc3e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .case-left-panel,
|
||||||
|
[data-bs-theme="dark"] #beskrivelse-history-wrap,
|
||||||
|
[data-bs-theme="dark"] #beskrivelse-comments-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));
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-bs-theme="dark"] .comment-thread,
|
[data-bs-theme="dark"] .comment-thread,
|
||||||
[data-bs-theme="dark"] .comment-item {
|
[data-bs-theme="dark"] .comment-item,
|
||||||
border-color: rgba(255, 255, 255, 0.14);
|
[data-bs-theme="dark"] .comment-quick-reply-box {
|
||||||
|
border-color: rgba(117, 194, 239, 0.24);
|
||||||
|
background: rgba(20, 30, 41, 0.86);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card[data-module].module-empty-compact {
|
.card[data-module].module-empty-compact {
|
||||||
@ -1802,9 +1826,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.case-tabs-topbar.topbar-primary {
|
.case-tabs-topbar.topbar-primary {
|
||||||
grid-template-columns: repeat(8, minmax(130px, 1fr));
|
grid-template-columns: minmax(86px, 0.55fr) minmax(220px, 1.7fr) repeat(6, minmax(120px, 1fr));
|
||||||
background: linear-gradient(140deg, rgba(15,76,117,0.08), rgba(15,76,117,0.01));
|
background: #0f4c75;
|
||||||
border: 1px solid rgba(15,76,117,0.22);
|
border: 1px solid #0b3a59;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
@ -1813,7 +1837,7 @@
|
|||||||
.topbar-primary .case-tabs-topbar-item {
|
.topbar-primary .case-tabs-topbar-item {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
border-left: 1px solid rgba(15,76,117,0.2);
|
border-left: 1px solid rgba(255,255,255,0.24);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
padding: 0.45rem 0.7rem;
|
padding: 0.45rem 0.7rem;
|
||||||
}
|
}
|
||||||
@ -1823,16 +1847,26 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.topbar-primary .case-tabs-topbar-label {
|
.topbar-primary .case-tabs-topbar-label {
|
||||||
color: color-mix(in srgb, var(--accent) 75%, #2f3a45);
|
color: rgba(255,255,255,0.88);
|
||||||
opacity: 0.95;
|
opacity: 1;
|
||||||
font-size: 0.62rem;
|
font-size: 0.72rem;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar-primary .case-tabs-topbar-value {
|
.topbar-primary .case-tabs-topbar-value {
|
||||||
font-size: 1.02rem;
|
font-size: 1.12rem;
|
||||||
font-weight: 750;
|
font-weight: 750;
|
||||||
color: var(--accent);
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-primary .field-case-id .case-tabs-topbar-value {
|
||||||
|
font-size: 0.96rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-primary .field-case-id {
|
||||||
|
padding-right: 0.45rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar-company-row {
|
.topbar-company-row {
|
||||||
@ -1849,12 +1883,21 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.topbar-primary .topbar-company-name {
|
||||||
|
color: #ffffff !important;
|
||||||
|
font-size: 1.18rem;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.15;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
.topbar-company-contact {
|
.topbar-company-contact {
|
||||||
margin-top: 0.22rem;
|
margin-top: 0.22rem;
|
||||||
font-size: 0.72rem;
|
font-size: 0.8rem;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: color-mix(in srgb, var(--accent) 58%, #475569);
|
color: rgba(255,255,255,0.88);
|
||||||
opacity: 0.95;
|
opacity: 1;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@ -1886,24 +1929,43 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.topbar-primary .case-inline-select {
|
.topbar-primary .case-inline-select {
|
||||||
background: rgba(255,255,255,0.88);
|
background: rgba(255,255,255,0.14);
|
||||||
border-color: rgba(15,76,117,0.3);
|
border-color: rgba(255,255,255,0.36);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--accent);
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar-primary .topbar-next-meta {
|
.topbar-primary .topbar-next-meta {
|
||||||
margin-top: 0.12rem;
|
margin-top: 0.12rem;
|
||||||
font-size: 0.7rem;
|
font-size: 0.78rem;
|
||||||
color: color-mix(in srgb, var(--accent) 55%, #4b5563);
|
color: rgba(255,255,255,0.8);
|
||||||
opacity: 0.95;
|
opacity: 1;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.topbar-primary .topbar-secondary-action {
|
||||||
|
border-color: rgba(255,255,255,0.36);
|
||||||
|
background: rgba(255,255,255,0.12);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-primary .topbar-secondary-action:hover,
|
||||||
|
.topbar-primary .topbar-secondary-action:focus-visible {
|
||||||
|
background: rgba(255,255,255,0.22);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-primary .case-tabs-topbar-label i,
|
||||||
|
.topbar-primary .topbar-next-meta i,
|
||||||
|
.topbar-primary .case-tabs-topbar-value i {
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
}
|
||||||
|
|
||||||
.back-link {
|
.back-link {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -1945,23 +2007,34 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-bs-theme="dark"] .case-tabs-topbar.topbar-primary {
|
[data-bs-theme="dark"] .case-tabs-topbar.topbar-primary {
|
||||||
background: linear-gradient(135deg, rgba(70,120,160,0.2), rgba(70,120,160,0.06));
|
background: #0f4c75;
|
||||||
border-color: rgba(120,170,210,0.35);
|
border-color: #75a7cc;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-bs-theme="dark"] .topbar-primary .case-tabs-topbar-item {
|
[data-bs-theme="dark"] .topbar-primary .case-tabs-topbar-item {
|
||||||
border-left-color: rgba(120,170,210,0.25);
|
border-left-color: rgba(255,255,255,0.28);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-bs-theme="dark"] .topbar-primary .case-tabs-topbar-label,
|
[data-bs-theme="dark"] .topbar-primary .case-tabs-topbar-label,
|
||||||
[data-bs-theme="dark"] .topbar-primary .case-tabs-topbar-value {
|
[data-bs-theme="dark"] .topbar-primary .case-tabs-topbar-value {
|
||||||
color: #b8d9f1;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-bs-theme="dark"] .topbar-primary .case-inline-select {
|
[data-bs-theme="dark"] .topbar-primary .case-inline-select {
|
||||||
background: rgba(20,35,48,0.7);
|
background: rgba(255,255,255,0.14);
|
||||||
border-color: rgba(120,170,210,0.4);
|
border-color: rgba(255,255,255,0.4);
|
||||||
color: #d9ebf7;
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card[data-module] {
|
||||||
|
border-width: 2px !important;
|
||||||
|
border-color: rgba(15, 76, 117, 0.28) !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(15, 76, 117, 0.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
[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"] .topbar-company-edit-btn {
|
[data-bs-theme="dark"] .topbar-company-edit-btn {
|
||||||
@ -1973,6 +2046,11 @@
|
|||||||
color: #b8d9f1;
|
color: #b8d9f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .topbar-primary .topbar-company-name {
|
||||||
|
color: #ffffff !important;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
[data-bs-theme="dark"] .right-module-card {
|
[data-bs-theme="dark"] .right-module-card {
|
||||||
border-color: rgba(140, 182, 219, 0.25);
|
border-color: rgba(140, 182, 219, 0.25);
|
||||||
box-shadow: 0 4px 16px rgba(5, 22, 40, 0.45);
|
box-shadow: 0 4px 16px rgba(5, 22, 40, 0.45);
|
||||||
@ -1997,6 +2075,56 @@
|
|||||||
minmax(150px, 1.1fr) /* Deadline (1 knap) */
|
minmax(150px, 1.1fr) /* Deadline (1 knap) */
|
||||||
minmax(120px, 0.85fr) /* AnyDesk */
|
minmax(120px, 0.85fr) /* AnyDesk */
|
||||||
minmax(140px, 1fr) /* Dokumenter */;
|
minmax(140px, 1fr) /* Dokumenter */;
|
||||||
|
align-items: stretch;
|
||||||
|
background: linear-gradient(180deg, rgba(15, 76, 117, 0.10), rgba(15, 76, 117, 0.04));
|
||||||
|
border: 1px solid rgba(15, 76, 117, 0.30);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.42rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-tabs-topbar.topbar-secondary .case-tabs-topbar-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.82);
|
||||||
|
border: 1px solid rgba(15, 76, 117, 0.24);
|
||||||
|
border-left: 1px solid rgba(15, 76, 117, 0.24);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-tabs-topbar.topbar-secondary .case-tabs-topbar-item:first-child {
|
||||||
|
border-left: 1px solid rgba(15, 76, 117, 0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-tabs-topbar.topbar-secondary .case-tabs-topbar-label {
|
||||||
|
color: #1c425c;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-tabs-topbar.topbar-secondary .case-tabs-topbar-value {
|
||||||
|
color: #0f2f45;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-tabs-topbar.topbar-secondary .case-inline-select {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid rgba(15, 76, 117, 0.34);
|
||||||
|
color: #0f2f45;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-tabs-topbar.topbar-secondary .topbar-secondary-action {
|
||||||
|
border-color: rgba(15, 76, 117, 0.34);
|
||||||
|
background: #ffffff;
|
||||||
|
color: #0f2f45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-tabs-topbar.topbar-secondary .topbar-secondary-action:hover,
|
||||||
|
.case-tabs-topbar.topbar-secondary .topbar-secondary-action:focus-visible {
|
||||||
|
background: rgba(15, 76, 117, 0.12);
|
||||||
|
border-color: rgba(15, 76, 117, 0.55);
|
||||||
|
color: #0b2535;
|
||||||
}
|
}
|
||||||
|
|
||||||
.case-tabs-topbar-item {
|
.case-tabs-topbar-item {
|
||||||
@ -2226,6 +2354,31 @@
|
|||||||
background: rgba(20, 27, 38, 0.78);
|
background: rgba(20, 27, 38, 0.78);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary {
|
||||||
|
background: linear-gradient(180deg, rgba(117, 194, 239, 0.18), rgba(117, 194, 239, 0.08));
|
||||||
|
border-color: rgba(117, 194, 239, 0.36);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary .case-tabs-topbar-item {
|
||||||
|
background: rgba(15, 24, 34, 0.9);
|
||||||
|
border-color: rgba(117, 194, 239, 0.32);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary .case-tabs-topbar-label {
|
||||||
|
color: #cfe6f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary .case-tabs-topbar-value {
|
||||||
|
color: #f2f8fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary .case-inline-select,
|
||||||
|
[data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary .topbar-secondary-action {
|
||||||
|
background: rgba(19, 30, 42, 0.92);
|
||||||
|
border-color: rgba(117, 194, 239, 0.38);
|
||||||
|
color: #eef6fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.case-add-side-backdrop {
|
.case-add-side-backdrop {
|
||||||
@ -2462,7 +2615,7 @@
|
|||||||
<div class="container-fluid case-detail-page-shell">
|
<div class="container-fluid case-detail-page-shell">
|
||||||
|
|
||||||
<div class="case-tabs-topbar topbar-primary" role="region" aria-label="Primær sagsbar">
|
<div class="case-tabs-topbar topbar-primary" role="region" aria-label="Primær sagsbar">
|
||||||
<div class="case-tabs-topbar-item">
|
<div class="case-tabs-topbar-item field-case-id">
|
||||||
<div class="case-tabs-topbar-label"><i class="bi bi-hash"></i>SagsID</div>
|
<div class="case-tabs-topbar-label"><i class="bi bi-hash"></i>SagsID</div>
|
||||||
<div class="case-tabs-topbar-value">#{{ case.id }}</div>
|
<div class="case-tabs-topbar-value">#{{ case.id }}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -2535,12 +2688,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Top Bar: Back Link + Secondary Bar -->
|
<!-- Top Bar: Secondary Bar -->
|
||||||
<div class="d-flex justify-content-between align-items-start gap-3 mb-2">
|
<div class="mb-2">
|
||||||
<a href="/sag" class="back-link">
|
|
||||||
<i class="bi bi-chevron-left"></i> Tilbage til sager
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="case-top-aux">
|
<div class="case-top-aux">
|
||||||
<div class="case-tabs-topbar topbar-secondary" role="region" aria-label="Sekundær sagsbar">
|
<div class="case-tabs-topbar topbar-secondary" role="region" aria-label="Sekundær sagsbar">
|
||||||
<div class="case-tabs-topbar-item field-created">
|
<div class="case-tabs-topbar-item field-created">
|
||||||
@ -11779,13 +11928,6 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Moduler med indhold skal altid vises.
|
|
||||||
if (hasContent) {
|
|
||||||
setVisibility(true);
|
|
||||||
el.classList.remove('module-empty-compact');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// HVIS specifik præference deaktiverer den - Skjul den! Uanset content.
|
// HVIS specifik præference deaktiverer den - Skjul den! Uanset content.
|
||||||
if (pref === false) {
|
if (pref === false) {
|
||||||
setVisibility(false);
|
setVisibility(false);
|
||||||
@ -11800,6 +11942,13 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Moduler med indhold vises automatisk, når der ikke er et eksplicit brugervalg.
|
||||||
|
if (hasContent) {
|
||||||
|
setVisibility(true);
|
||||||
|
el.classList.remove('module-empty-compact');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Default logic - ingen content: se på layout defaults
|
// Default logic - ingen content: se på layout defaults
|
||||||
if (standardModuleSet.has(moduleName)) {
|
if (standardModuleSet.has(moduleName)) {
|
||||||
setVisibility(true);
|
setVisibility(true);
|
||||||
|
|||||||
@ -109,6 +109,16 @@
|
|||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.global-bottom-bar .bb-zone-left .bb-back-btn {
|
||||||
|
position: sticky;
|
||||||
|
left: 0;
|
||||||
|
z-index: 3;
|
||||||
|
background: var(--bg-card);
|
||||||
|
border-color: rgba(var(--text-primary-rgb), 0.2);
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
.global-bottom-bar .bb-zone-left::-webkit-scrollbar {
|
.global-bottom-bar .bb-zone-left::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -1047,6 +1057,10 @@
|
|||||||
<div id="globalBottomBar" class="global-bottom-bar" hidden>
|
<div id="globalBottomBar" class="global-bottom-bar" hidden>
|
||||||
<div class="bb-header">
|
<div class="bb-header">
|
||||||
<div class="bb-zone bb-zone-left" role="status" aria-live="polite">
|
<div class="bb-zone bb-zone-left" role="status" aria-live="polite">
|
||||||
|
<button id="bbBackBtn" class="bb-action-btn bb-back-btn" type="button" title="Tilbage">
|
||||||
|
<i class="bi bi-arrow-left"></i>
|
||||||
|
<span>Tilbage</span>
|
||||||
|
</button>
|
||||||
<button class="bb-chip" type="button" data-bb-key="mail"><i class="bi bi-envelope"></i> <span class="bb-chip-label">Ulæste mails</span> <span class="bb-chip-bubble" aria-hidden="true">0</span> <span class="bb-chip-text visually-hidden">Ulæste mails: 0</span></button>
|
<button class="bb-chip" type="button" data-bb-key="mail"><i class="bi bi-envelope"></i> <span class="bb-chip-label">Ulæste mails</span> <span class="bb-chip-bubble" aria-hidden="true">0</span> <span class="bb-chip-text visually-hidden">Ulæste mails: 0</span></button>
|
||||||
<button class="bb-chip" type="button" data-bb-key="urgent"><i class="bi bi-exclamation-octagon"></i> <span class="bb-chip-label">Hastesager</span> <span class="bb-chip-bubble" aria-hidden="true">0</span> <span class="bb-chip-text visually-hidden">Hastesager: 0</span></button>
|
<button class="bb-chip" type="button" data-bb-key="urgent"><i class="bi bi-exclamation-octagon"></i> <span class="bb-chip-label">Hastesager</span> <span class="bb-chip-bubble" aria-hidden="true">0</span> <span class="bb-chip-text visually-hidden">Hastesager: 0</span></button>
|
||||||
<button class="bb-chip" type="button" data-bb-key="unassigned"><i class="bi bi-person-x"></i> <span class="bb-chip-label">Uden ansvarlig</span> <span class="bb-chip-bubble" aria-hidden="true">0</span> <span class="bb-chip-text visually-hidden">Uden ansvarlig: 0</span></button>
|
<button class="bb-chip" type="button" data-bb-key="unassigned"><i class="bi bi-person-x"></i> <span class="bb-chip-label">Uden ansvarlig</span> <span class="bb-chip-bubble" aria-hidden="true">0</span> <span class="bb-chip-text visually-hidden">Uden ansvarlig: 0</span></button>
|
||||||
@ -1189,7 +1203,7 @@ window.addEventListener('unhandledrejection', function(event) {
|
|||||||
<script src="/static/js/notifications.js?v=1.0"></script>
|
<script src="/static/js/notifications.js?v=1.0"></script>
|
||||||
<script src="/static/js/telefoni.js?v=2.2"></script>
|
<script src="/static/js/telefoni.js?v=2.2"></script>
|
||||||
<script src="/static/js/sms.js?v=1.0"></script>
|
<script src="/static/js/sms.js?v=1.0"></script>
|
||||||
<script src="/static/js/bottom-bar.js?v=2.22"></script>
|
<script src="/static/js/bottom-bar.js?v=2.23"></script>
|
||||||
<script>
|
<script>
|
||||||
// Dark Mode Toggle Logic
|
// Dark Mode Toggle Logic
|
||||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
const darkModeToggle = document.getElementById('darkModeToggle');
|
||||||
|
|||||||
150
design_forslag_1_sidebar.html
Normal file
150
design_forslag_1_sidebar.html
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="da">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Design 1: Sidebar Layout</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||||
|
<style>
|
||||||
|
:root { --bs-primary-rgb: 15, 76, 117; --bg-surface: #fff; --text-color: #333; --border-color: #e0e0e0; }
|
||||||
|
body { background-color: #f8f9fa; color: var(--text-color); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.sidebar { background: var(--bg-surface); border-right: 1px solid var(--border-color); height: 100vh; position: sticky; top: 0; overflow-y: auto; padding: 1.5rem; }
|
||||||
|
.main-content { padding: 2rem; }
|
||||||
|
.sidebar-section { margin-bottom: 2rem; }
|
||||||
|
.sidebar-section h6 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #6c757d; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; }
|
||||||
|
.form-select-sm { font-size: 0.85rem; border-color: var(--border-color); background-color: #fafafa; }
|
||||||
|
.hero-title { font-size: 2rem; font-weight: 700; color: #0f4c75; letter-spacing: -0.5px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container-fluid p-0">
|
||||||
|
<div class="row g-0">
|
||||||
|
<!-- VENSTRE SIDEBAR (Erstatning for topbars) -->
|
||||||
|
<div class="col-12 col-xl-3 col-xxl-2 sidebar shadow-sm">
|
||||||
|
<!-- Kunde & Kontakt -->
|
||||||
|
<div class="sidebar-section">
|
||||||
|
<h6><i class="bi bi-building me-2"></i>Kundeinfo</h6>
|
||||||
|
<div class="fw-bold mb-1">BMC Networks</div>
|
||||||
|
<div class="small text-muted mb-2"><i class="bi bi-person me-1"></i>Christian Thomas</div>
|
||||||
|
<button class="btn btn-sm btn-outline-primary w-100 rounded-pill"><i class="bi bi-pencil me-1"></i>Skift kunde</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Klassifikation -->
|
||||||
|
<div class="sidebar-section">
|
||||||
|
<h6><i class="bi bi-tags me-2"></i>Klassifikation</h6>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label small mb-1 text-muted">Status</label>
|
||||||
|
<select class="form-select form-select-sm border-start border-warning border-3"><option>Åben</option><option>I gang</option><option>Løst</option></select>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label small mb-1 text-muted">Type</label>
|
||||||
|
<select class="form-select form-select-sm border-start border-success border-3"><option>Ticket</option><option>Opgave</option><option>Projekt</option></select>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label small mb-1 text-muted">Prioritet</label>
|
||||||
|
<select class="form-select form-select-sm border-start border-danger border-3"><option>Normal</option><option>Høj</option><option>Akut</option></select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tildeling -->
|
||||||
|
<div class="sidebar-section">
|
||||||
|
<h6><i class="bi bi-people me-2"></i>Tildeling</h6>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label small mb-1 text-muted">Ansvarlig</label>
|
||||||
|
<select class="form-select form-select-sm"><option>Christian</option><option>Frederik</option></select>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label small mb-1 text-muted">Gruppe</label>
|
||||||
|
<select class="form-select form-select-sm"><option>Support</option><option>Development</option></select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tidslinje -->
|
||||||
|
<div class="sidebar-section">
|
||||||
|
<h6><i class="bi bi-calendar3 me-2"></i>Planlægning</h6>
|
||||||
|
<div class="small text-muted mb-2"><i class="bi bi-plus-circle me-1"></i>Oprettet: 12/04/2026</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label small mb-0 text-muted">Arbejdsstart</label>
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<input type="date" class="form-control form-control-sm" value="2026-04-12">
|
||||||
|
<button class="btn btn-outline-secondary" data-bs-toggle="dropdown"><i class="bi bi-three-dots-vertical"></i></button>
|
||||||
|
<ul class="dropdown-menu"><li><a class="dropdown-item">I dag</a></li><li><a class="dropdown-item">I morgen</a></li></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label small mb-0 text-muted">Start senest (Trigger)</label>
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<input type="date" class="form-control form-control-sm">
|
||||||
|
<button class="btn btn-outline-secondary" data-bs-toggle="dropdown"><i class="bi bi-three-dots-vertical"></i></button>
|
||||||
|
<ul class="dropdown-menu"><li><a class="dropdown-item">Trigger: Sag Lukket</a></li></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label small mb-0 text-muted">Deadline</label>
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<input type="date" class="form-control form-control-sm text-danger" value="2026-04-20">
|
||||||
|
<button class="btn btn-outline-danger" title="Ryd deadline"><i class="bi bi-x"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Handlinger -->
|
||||||
|
<div class="sidebar-section">
|
||||||
|
<h6><i class="bi bi-lightning-charge me-2"></i>Handlinger</h6>
|
||||||
|
<div class="d-grid gap-2">
|
||||||
|
<button class="btn btn-sm btn-primary rounded-pill"><i class="bi bi-display me-2"></i>AnyDesk Quick Connect</button>
|
||||||
|
<button class="btn btn-sm btn-outline-secondary rounded-pill bg-white"><i class="bi bi-printer me-2"></i>Print arbejdsseddel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- HOVEDINDHOLD (Beskrivelse, Titel, Tabs) -->
|
||||||
|
<div class="col-12 col-xl-9 col-xxl-10 main-content">
|
||||||
|
<div class="d-flex justify-content-between align-items-start mb-4">
|
||||||
|
<div>
|
||||||
|
<span class="badge bg-primary rounded-pill mb-2 px-3 py-2">#9925</span>
|
||||||
|
<h1 class="hero-title">Netværksnedbrud i afdeling 3 - Ingen forbindelse</h1>
|
||||||
|
<p class="text-muted"><i class="bi bi-list-check me-1"></i>Næste todo: Gennemtjekke switches kl 14:00 (Christian)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tabs -->
|
||||||
|
<ul class="nav nav-tabs nav-tabs-bordered mb-4">
|
||||||
|
<li class="nav-item"><a class="nav-link active fw-bold border-bottom border-3 border-primary" href="#"><i class="bi bi-card-text me-2"></i>Sagsdetaljer</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link text-muted" href="#"><i class="bi bi-lightbulb me-2"></i>Løsning</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link text-muted" href="#"><i class="bi bi-envelope me-2"></i>E-mail <span class="badge bg-danger rounded-pill">2</span></a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Indhold Grid (Det du kaldte "venstre side" før er nu meget mere clean center-piece) -->
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-xl-8">
|
||||||
|
<div class="card border-0 shadow-sm rounded-4">
|
||||||
|
<div class="card-body p-4 p-xl-5">
|
||||||
|
<h5>Opgavebeskrivelse</h5>
|
||||||
|
<p class="fs-5" style="line-height: 1.6; color: #334;">Sagen er oprettet da hele afdeling 3 oplever at deres kablede forbindelse forsvandt for få minutter siden.</p>
|
||||||
|
<hr class="my-4">
|
||||||
|
<div style="height: 300px; background: #f8fafc; border-radius: 8px; border: 1px dashed #cbd5e1; display:flex; align-items:center; justify-content:center; color:#999;">
|
||||||
|
Her er Tråd & Beskeder lagt frit op, masser af ro uden støj fra meta-data i toppen.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-4">
|
||||||
|
<div class="card border-0 shadow-sm rounded-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5>Næste Todos</h5>
|
||||||
|
<ul class="list-group list-group-flush mb-3 mt-3">
|
||||||
|
<li class="list-group-item px-0 border-0"><input type="checkbox" class="form-check-input me-2"> Tjek firewall config</li>
|
||||||
|
</ul>
|
||||||
|
<button class="btn btn-outline-primary btn-sm w-100 rounded-pill"><i class="bi bi-plus-lg me-1"></i>Opret todo</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
117
design_forslag_2_kompakt.html
Normal file
117
design_forslag_2_kompakt.html
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="da">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Design 2: Kompakt Action Ribbon</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||||
|
<style>
|
||||||
|
:root { --bs-primary-rgb: 15, 76, 117; }
|
||||||
|
body { background-color: #f8f9fa; font-family: system-ui; }
|
||||||
|
/* Mega compact header */
|
||||||
|
.case-ribbon { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0.5rem 1.5rem; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
|
||||||
|
.ribbon-item { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 1.5rem; padding: 0.25rem 0.5rem; border-radius: 6px; cursor: pointer; transition: 0.2s; border: 1px solid transparent; }
|
||||||
|
.ribbon-item:hover { background: #f1f5f9; border: 1px solid #cbd5e1; }
|
||||||
|
.ribbon-label { font-size: 0.7rem; text-transform: uppercase; color: #64748b; font-weight: 600; line-height: 1; }
|
||||||
|
.ribbon-val { font-size: 0.85rem; font-weight: 600; color: #0f172a; line-height: 1; }
|
||||||
|
.id-badge { background: #0f4c75; color: #fff; padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: 700; font-size: 0.85rem; }
|
||||||
|
|
||||||
|
.main-container { max-width: 1400px; margin: 2rem auto; padding: 0 1rem; }
|
||||||
|
.title-area { margin-bottom: 2rem; }
|
||||||
|
.title-text { font-size: 2.25rem; font-weight: 800; color: #0f4c75; letter-spacing: -0.03em; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- ENKELT KOMPAKT TOPBÅND DER INDEHOLDER MODALS & POP-OVERS i steden for indhold på skærmen -->
|
||||||
|
<div class="case-ribbon d-flex justify-content-between align-items-center flex-wrap gap-2">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="id-badge me-3">#9925</div>
|
||||||
|
|
||||||
|
<div class="ribbon-item" data-bs-toggle="dropdown" title="Skift Kunde">
|
||||||
|
<div>
|
||||||
|
<div class="ribbon-label">Kunde</div>
|
||||||
|
<div class="ribbon-val text-primary"><i class="bi bi-building me-1"></i>BMC Networks <i class="bi bi-chevron-down ms-1 small"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ribbon-item" data-bs-toggle="dropdown" title="Opdater Status, Type eller Prioritet">
|
||||||
|
<div>
|
||||||
|
<div class="ribbon-label">Klassifikation</div>
|
||||||
|
<div class="ribbon-val"><span class="text-warning">●</span> Åben · Ticket · Normal <i class="bi bi-chevron-down ms-1 small"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ribbon-item" data-bs-toggle="dropdown" title="Tildel ansvarlig og gruppe">
|
||||||
|
<div>
|
||||||
|
<div class="ribbon-label">Tildeling</div>
|
||||||
|
<div class="ribbon-val"><i class="bi bi-person-check me-1 text-muted"></i>Christian (Support) <i class="bi bi-chevron-down ms-1 small"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ribbon-item" data-bs-toggle="dropdown" title="Redigér start, start-senest-trigger og deadline">
|
||||||
|
<div>
|
||||||
|
<div class="ribbon-label">Tidslinje</div>
|
||||||
|
<div class="ribbon-val"><i class="bi bi-calendar-event me-1 text-muted"></i>Start: 12/04 · <span class="text-danger">Frist: 20/04</span> <i class="bi bi-chevron-down ms-1 small"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<button class="btn btn-sm btn-primary rounded-pill fw-medium"><i class="bi bi-display me-2"></i>AnyDesk</button>
|
||||||
|
<button class="btn btn-sm btn-light bg-white border rounded-pill"><i class="bi bi-printer me-2"></i>Print</button>
|
||||||
|
<button class="btn btn-sm btn-light bg-white border rounded-pill"><i class="bi bi-check2-circle text-success me-1"></i>Næste: Tjek switches</button>
|
||||||
|
</div>
|
||||||
|
</div> <!-- /Slut på topbar -->
|
||||||
|
|
||||||
|
<!-- HOVEDINDHOLD (MEGET RENERE NU i "Venstre side") -->
|
||||||
|
<div class="main-container">
|
||||||
|
<div class="title-area">
|
||||||
|
<h1 class="title-text">Netværksnedbrud i afdeling 3 - Ingen forbindelse</h1>
|
||||||
|
<p class="text-muted mb-0"><i class="bi bi-person me-1"></i>Kontakt: <b>Lars Larsen</b> v. BMC Networks · <i class="bi bi-plus-circle me-1 ms-2"></i>Oprettet: 12/04/2026</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="nav nav-tabs mb-4">
|
||||||
|
<li class="nav-item"><a class="nav-link active fw-bold border-bottom border-3 border-primary" href="#"><i class="bi bi-card-text me-2"></i>Sagsdetaljer</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link text-muted" href="#">Løsning</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link text-muted" href="#">E-mail</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link text-muted" href="#">Tidsforbrug</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- DET OMDESIGNEDE VENSTRE SIDE & HØJRE SIDE FORLØB -->
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-xl-8">
|
||||||
|
<!-- Nu får indholdet masser af plads og minimal støj ("Venstre side" som brugeren kaldte det) -->
|
||||||
|
<div class="card shadow-sm border-0 rounded-4">
|
||||||
|
<div class="card-body p-4 p-lg-5">
|
||||||
|
<h5 class="fw-bold mb-4">Beskrivelse</h5>
|
||||||
|
<p class="fs-5" style="line-height: 1.6; color: #334155;">Vi oplever at hele afdeling 3 mistede forbindelsen for 10 minutter siden. Tror det er switchen i kælderen der er gået død efter vi stikuheldet tidligere.</p>
|
||||||
|
|
||||||
|
<hr class="my-5 opacity-25">
|
||||||
|
<h6 class="text-uppercase text-muted fw-bold mb-3 small">Tråd & Kommunikation</h6>
|
||||||
|
<div class="bg-light rounded-4 p-4 text-center text-muted" style="height:300px;border: 1px dashed #cbd5e1;">Brugerens fokus er fuldstændig centreret på sagsbehandlingen her.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xl-4 d-none d-xl-block">
|
||||||
|
<!-- Ekstra info på højre side vi nu har plads til at have åben permanent for at undgå rod på den venstre side -->
|
||||||
|
<div class="card shadow-sm border-0 rounded-4 mb-4 bg-primary text-white" style="--bs-bg-opacity: .05; color: #0f4c75 !important;">
|
||||||
|
<div class="card-body">
|
||||||
|
<h6 class="fw-bold"><i class="bi bi-clock-history me-2"></i>Sagsprogression</h6>
|
||||||
|
<p class="small mb-0">Arbejdet startede for 2 timer siden. 80% oppetidsgaranti overholdt.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Eksempel højre kolonne -->
|
||||||
|
<div class="card shadow-sm border-0 rounded-4">
|
||||||
|
<div class="card-body p-4 text-center text-muted" style="height: 200px;">
|
||||||
|
Sidestillet indhold (vedhæftninger osv.)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
142
design_forslag_3_kort.html
Normal file
142
design_forslag_3_kort.html
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="da">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Design 3: Widget Cards Dashboard</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||||
|
<style>
|
||||||
|
:root { --bs-primary-rgb: 15, 76, 117; }
|
||||||
|
body { background-color: #f1f5f9; font-family: system-ui; }
|
||||||
|
.header-bg { background: linear-gradient(to right, #0f4c75, #1e3c72); color: white; padding: 2rem 0 3rem 0; margin-bottom: -2rem; }
|
||||||
|
.stat-card { background: white; border-radius: 12px; padding: 1.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); height: 100%; border: 1px solid #e2e8f0; }
|
||||||
|
.stat-label { font-size: 0.75rem; text-transform: uppercase; color: #64748b; font-weight: 700; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
|
||||||
|
.widget-field { margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
.widget-field label { margin: 0; font-size: 0.8rem; color: #475569; }
|
||||||
|
.widget-select { width: 60%; padding: 0.15rem 0.5rem; font-size: 0.8rem; border-radius: 4px; border: 1px solid #cbd5e1; background: #f8fafc; }
|
||||||
|
.hero-title { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.5px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- CLEAN TOP UDEN INPUTS - BARE TITEL & ACTIONS (HELT NY HOVED STRUKTUR) -->
|
||||||
|
<div class="header-bg">
|
||||||
|
<div class="container-fluid px-4 px-xl-5">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
|
||||||
|
<div class="d-flex align-items-center gap-3">
|
||||||
|
<span class="badge bg-white text-primary fs-6 rounded-pill px-3 shadow-sm">#9925</span>
|
||||||
|
<span class="badge bg-success fs-6 rounded-pill px-3 shadow-sm"><i class="bi bi-circle-fill me-1 small"></i>Åben</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex gap-2">
|
||||||
|
<button class="btn btn-light rounded-pill fw-bold text-primary shadow-sm"><i class="bi bi-display me-2"></i>AnyDesk Quick Connect</button>
|
||||||
|
<button class="btn btn-outline-light rounded-pill"><i class="bi bi-printer me-2"></i>Print</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="hero-title mb-1">Netværksnedbrud i afdeling 3 - Ingen forbindelse</h1>
|
||||||
|
<p class="text-white-50"><i class="bi bi-building me-1"></i>BMC Networks · <i class="bi bi-person me-1"></i>Christian Thomas · <i class="bi bi-plus-circle me-1 ms-2"></i>Oprettet: 12/04/2026</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- WIDGET DASHBOARD SOM ERSTATTER DE 2 TOPBARER -->
|
||||||
|
<div class="container-fluid px-4 px-xl-5">
|
||||||
|
<div class="row g-3 mb-4 position-relative" style="z-index: 10;">
|
||||||
|
|
||||||
|
<!-- Widget 1: Klassifikation -->
|
||||||
|
<div class="col-md-6 col-xl-3">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label"><i class="bi bi-tags-fill text-primary"></i> Klassifikation</div>
|
||||||
|
<div class="widget-field"><label>Status</label>
|
||||||
|
<select class="widget-select border-warning border-start border-3"><option>Åben</option><option>I gang</option></select>
|
||||||
|
</div>
|
||||||
|
<div class="widget-field"><label>Type</label>
|
||||||
|
<select class="widget-select border-success border-start border-3"><option>Ticket</option><option>Opgave</option></select>
|
||||||
|
</div>
|
||||||
|
<div class="widget-field"><label>Prioritet</label>
|
||||||
|
<select class="widget-select border-danger border-start border-3"><option>Normal</option><option>Høj</option></select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Widget 2: Tildeling -->
|
||||||
|
<div class="col-md-6 col-xl-3">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label"><i class="bi bi-people-fill text-success"></i> Tildeling</div>
|
||||||
|
<div class="widget-field"><label>Ansvarlig</label>
|
||||||
|
<select class="widget-select"><option>Christian</option><option>Ingen</option></select>
|
||||||
|
</div>
|
||||||
|
<div class="widget-field"><label>Gruppe</label>
|
||||||
|
<select class="widget-select"><option>Support</option><option>Salg</option></select>
|
||||||
|
</div>
|
||||||
|
<div class="widget-field mt-3">
|
||||||
|
<label class="w-100"><i class="bi bi-check2-square text-primary me-1"></i>Næste todo:</label>
|
||||||
|
</div>
|
||||||
|
<div class="text-primary fw-bold small text-truncate">Gennemgå switches (14:00)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Widget 3: Tidslinje -->
|
||||||
|
<div class="col-md-6 col-xl-3">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label"><i class="bi bi-calendar-event-fill text-info"></i> Tidslinje</div>
|
||||||
|
<div class="widget-field"><label>Arbejdsstart</label>
|
||||||
|
<div class="input-group input-group-sm" style="width: 60%;"><input type="date" class="form-control" value="2026-04-12"><button class="btn btn-light bg-white border"><i class="bi bi-three-dots-vertical"></i></button></div>
|
||||||
|
</div>
|
||||||
|
<div class="widget-field"><label title="Start senest (Trigger)">Start senest</label>
|
||||||
|
<div class="input-group input-group-sm" style="width: 60%;"><input type="date" class="form-control"><button class="btn btn-light bg-white border"><i class="bi bi-three-dots-vertical"></i></button></div>
|
||||||
|
</div>
|
||||||
|
<div class="widget-field"><label>Deadline</label>
|
||||||
|
<div class="input-group input-group-sm" style="width: 60%;"><input type="date" class="form-control text-danger"><button class="btn btn-outline-danger bg-white"><i class="bi bi-x"></i></button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Widget 4: Links -->
|
||||||
|
<div class="col-md-6 col-xl-3">
|
||||||
|
<div class="stat-card bg-light">
|
||||||
|
<div class="stat-label"><i class="bi bi-chat-left-dots-fill text-secondary"></i> Hurtige links</div>
|
||||||
|
<div class="d-flex flex-column gap-2 mt-3">
|
||||||
|
<button class="btn btn-sm btn-white bg-white border w-100 text-start shadow-sm"><i class="bi bi-building-gear me-2 text-primary"></i>Skift kunde/firma</button>
|
||||||
|
<button class="btn btn-sm btn-white bg-white border w-100 text-start shadow-sm"><i class="bi bi-diagram-3 me-2 text-primary"></i>Ændre afdeling</button>
|
||||||
|
<button class="btn btn-sm btn-white bg-white border w-100 text-start shadow-sm"><i class="bi bi-plus-square me-2 text-success"></i>Opret underopgave</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="nav nav-tabs mb-4 px-2">
|
||||||
|
<li class="nav-item"><a class="nav-link active fw-bold px-4 border-bottom border-3 border-primary" href="#"><i class="bi bi-card-text me-2"></i>Sagsdetaljer</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link text-muted px-4" href="#">Løsning</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link text-muted px-4" href="#">E-mail</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link text-muted px-4" href="#">Tidsforbrug</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- DET OMDESIGNEDE VENSTRE SIDE INDHOLD: Nu er det ikke bombarderet med header støj -->
|
||||||
|
<div class="row g-4 mb-5">
|
||||||
|
<div class="col-xl-8">
|
||||||
|
<div class="card border-0 shadow-sm rounded-4">
|
||||||
|
<div class="card-body p-4 p-xl-5">
|
||||||
|
<h4 class="fw-bold mb-4">Beskrivelse</h4>
|
||||||
|
<p class="fs-5" style="color: #334155; line-height:1.6;">Netværket gik ned efter strømafbrydelse. Vi har brug for at tekniker gennemgår kablet setup i rack-skab D.</p>
|
||||||
|
<hr class="my-5">
|
||||||
|
<!-- Her ville chat thread ligge normalt som du bad om (venstre side) -->
|
||||||
|
<div class="p-4 rounded text-center text-muted" style="background:#f1f5f9;border:1px dashed #cbd5e1;height:250px;">
|
||||||
|
Den overordnede "Venstre side" føles meget mere åndbar nu.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-4">
|
||||||
|
<div class="card border-0 shadow-sm rounded-4 h-100">
|
||||||
|
<div class="card-body p-4 text-center text-muted" style="background:#f8fafc;">
|
||||||
|
Sidestillet overblik over timer, tildelinger og vedhæftninger.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,195 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="da">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Kompakte Designforslag - Sagsdetaljer</title>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
||||||
padding-bottom: 50px;
|
|
||||||
font-size: 0.9rem; /* Generelt lidt mindre tekststørrelse for helheden */
|
|
||||||
}
|
|
||||||
.container { max-width: 900px; }
|
|
||||||
.section-title {
|
|
||||||
color: #0f4c75;
|
|
||||||
border-bottom: 2px solid #0f4c75;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
margin-top: 40px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Værktøjs-klasser for at fjerne default p-margins */
|
|
||||||
p:last-child { margin-bottom: 0; }
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
Forslag 1: Inline Chat / Slack Kompakt
|
|
||||||
Alt på (næsten) én linje, nul spildplads.
|
|
||||||
--------------------------------------------------- */
|
|
||||||
.f1-container { background: white; border: 1px solid #ddd; border-radius: 4px; padding: 10px; }
|
|
||||||
.f1-row { padding: 4px 8px; border-radius: 4px; line-height: 1.4; border-bottom: 1px dashed #f0f0f0; }
|
|
||||||
.f1-row:last-child { border-bottom: none; }
|
|
||||||
.f1-row:hover { background-color: #f8f9fa; }
|
|
||||||
.f1-meta { color: #888; font-size: 0.8rem; margin-right: 8px; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
|
||||||
.f1-author { font-weight: 600; margin-right: 8px; }
|
|
||||||
.f1-author.tech { color: #0f4c75; }
|
|
||||||
.f1-author.cust { color: #b33939; }
|
|
||||||
.f1-content { color: #222; }
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
Forslag 2: Helpdesk Split (Venstre/Højre)
|
|
||||||
Tydelig opdeling mellem forfatter og tekst, men kompakt font.
|
|
||||||
--------------------------------------------------- */
|
|
||||||
.f2-container { border: 1px solid #dee2e6; border-radius: 4px; background: white; }
|
|
||||||
.f2-row { display: flex; border-bottom: 1px solid #e9ecef; }
|
|
||||||
.f2-row:last-child { border-bottom: none; }
|
|
||||||
.f2-left { width: 140px; background: #f8f9fa; padding: 8px 10px; flex-shrink: 0; border-right: 1px solid #e9ecef; }
|
|
||||||
.f2-right { padding: 8px 12px; flex-grow: 1; color: #333; }
|
|
||||||
.f2-name { font-weight: 600; font-size: 0.85rem; margin-bottom: 2px; }
|
|
||||||
.f2-time { font-size: 0.75rem; color: #6c757d; }
|
|
||||||
.f2-badge-tech { color: #0f4c75; font-size: 0.75rem; font-weight: bold; }
|
|
||||||
.f2-badge-cust { color: #6c757d; font-size: 0.75rem; font-weight: bold; }
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
Forslag 3: Minimalistisk Logbog
|
|
||||||
Information-dense liste. Små headere, tekst umiddelbart under.
|
|
||||||
--------------------------------------------------- */
|
|
||||||
.f3-container { background: white; border: 1px solid #ccc; border-radius: 4px; }
|
|
||||||
.f3-item { border-bottom: 1px solid #eee; }
|
|
||||||
.f3-item:last-child { border-bottom: none; }
|
|
||||||
.f3-header { display: flex; justify-content: space-between; align-items: center; background: #fdfdfd; padding: 3px 8px; border-left: 3px solid #ccc; font-size: 0.85rem; font-weight: 600; color: #444; }
|
|
||||||
.f3-header.tech { border-left-color: #0f4c75; background: #f0f4f8; }
|
|
||||||
.f3-body { padding: 6px 8px 8px 11px; color: #222; }
|
|
||||||
.f3-small { font-weight: normal; color: #777; font-size: 0.75rem; }
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container mt-4">
|
|
||||||
<h2 class="mb-4 text-center">Fokuseret på Minimal Plads (Kompakt)</h2>
|
|
||||||
<p class="text-muted text-center mb-5">Her er 3 designs uden store ikoner, uden navnebobler og med minimal whitespace, præcis som i en professionel log eller et tæt ticket-system.</p>
|
|
||||||
|
|
||||||
<!-- ==============================================
|
|
||||||
FORSLAG 1: INLINE CHAT (SLACK KOMPAKT STYLE)
|
|
||||||
============================================== -->
|
|
||||||
<h3 class="section-title">Forslag 1: Inline Log (Slack Kompakt style)</h3>
|
|
||||||
<p class="text-muted small mb-2">Minder om terminal-output eller kompakt chat. Alt udover teksten står på én linje, og marginer er næsten fjernet.</p>
|
|
||||||
|
|
||||||
<div class="f1-container">
|
|
||||||
<div class="f1-row">
|
|
||||||
<span class="f1-meta">I dag 10:00</span>
|
|
||||||
<span class="f1-author cust">Jens Jensen:</span>
|
|
||||||
<span class="f1-content">Vi har et problem med at vores to printere på kontoret ikke vil forbinde til netværket siden fredag. Skærmene lyser, men de melder offline på printserveren.</span>
|
|
||||||
</div>
|
|
||||||
<div class="f1-row">
|
|
||||||
<span class="f1-meta">I dag 10:15</span>
|
|
||||||
<span class="f1-author tech">Christian Thomas:</span>
|
|
||||||
<span class="f1-content">Hej Jens. Jeg kan se at switchen port 4 & 5 var nede hurtigt i nat. Har I prøvet at genstarte dem, så de fanger ny DHCP IP?</span>
|
|
||||||
</div>
|
|
||||||
<div class="f1-row">
|
|
||||||
<span class="f1-meta">I dag 10:35</span>
|
|
||||||
<span class="f1-author cust">Jens Jensen:</span>
|
|
||||||
<span class="f1-content">Ja, det har vi nu og det løste det mærkeligt nok for den ene, men HP printeren driller stadig.</span>
|
|
||||||
</div>
|
|
||||||
<div class="f1-row">
|
|
||||||
<span class="f1-meta">I dag 10:45</span>
|
|
||||||
<span class="f1-author tech">Christian Thomas:</span>
|
|
||||||
<span class="f1-content">Jeg logger lige på jeres firewall udefra om 5 minutter og tjekker om HP'en er blokeret i MAC-filteret.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ==============================================
|
|
||||||
FORSLAG 2: HELPDESK SPLIT (2-KOLONNER)
|
|
||||||
============================================== -->
|
|
||||||
<h3 class="section-title">Forslag 2: Helpdesk Split (ITSM style)</h3>
|
|
||||||
<p class="text-muted small mb-2">Klassisk 2-kolonne layout. Venstre side har fast bredde til metadata, højre side udnytter hele bredden til ren tekst. Ingen tidsspilde vertikalt.</p>
|
|
||||||
|
|
||||||
<div class="f2-container">
|
|
||||||
<!-- Oprindelig sag -->
|
|
||||||
<div class="f2-row">
|
|
||||||
<div class="f2-left">
|
|
||||||
<div class="f2-name">Jens Jensen</div>
|
|
||||||
<div class="f2-badge-cust">KUNDE</div>
|
|
||||||
<div class="f2-time mt-1">I dag, kl. 10:00</div>
|
|
||||||
</div>
|
|
||||||
<div class="f2-right">
|
|
||||||
Vi har et problem med at vores to printere på kontoret ikke vil forbinde til netværket siden fredag. Skærmene lyser, men de melder offline på printserveren.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Svar -->
|
|
||||||
<div class="f2-row">
|
|
||||||
<div class="f2-left">
|
|
||||||
<div class="f2-name text-primary">Christian Thomas</div>
|
|
||||||
<div class="f2-badge-tech">BMC NETWORKS</div>
|
|
||||||
<div class="f2-time mt-1">I dag, kl. 10:15</div>
|
|
||||||
</div>
|
|
||||||
<div class="f2-right">
|
|
||||||
Hej Jens.<br>Jeg kan se at switchen port 4 & 5 var nede hurtigt i nat. Har I prøvet at genstarte dem, så de fanger ny DHCP IP?
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Svar -->
|
|
||||||
<div class="f2-row">
|
|
||||||
<div class="f2-left">
|
|
||||||
<div class="f2-name">Jens Jensen</div>
|
|
||||||
<div class="f2-badge-cust">KUNDE</div>
|
|
||||||
<div class="f2-time mt-1">I dag, kl. 10:35</div>
|
|
||||||
</div>
|
|
||||||
<div class="f2-right">
|
|
||||||
Ja, det har vi nu og det løste det mærkeligt nok for den ene, men HP printeren driller stadig.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ==============================================
|
|
||||||
FORSLAG 3: MINIMALISTISK LOGBOG
|
|
||||||
============================================== -->
|
|
||||||
<h3 class="section-title">Forslag 3: Minimalistisk Logbog</h3>
|
|
||||||
<p class="text-muted small mb-2">Hver tråd adskilles af en meget tynd grå overskrift. Ingen kasser rundt om teksten, den flyder frit for maksimal informationsdensitet.</p>
|
|
||||||
|
|
||||||
<div class="f3-container">
|
|
||||||
|
|
||||||
<div class="f3-item">
|
|
||||||
<div class="f3-header">
|
|
||||||
<span>Jens Jensen <span class="fw-normal text-muted">(Kunde)</span></span>
|
|
||||||
<span class="f3-small">I dag, kl. 10:00</span>
|
|
||||||
</div>
|
|
||||||
<div class="f3-body">
|
|
||||||
Vi har et problem med at vores to printere på kontoret ikke vil forbinde til netværket siden fredag. Skærmene lyser, men de melder offline på printserveren.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="f3-item">
|
|
||||||
<div class="f3-header tech">
|
|
||||||
<span>Christian Thomas <span class="fw-normal text-muted" style="color: #0f4c75 !important;">(Tekniker)</span></span>
|
|
||||||
<span class="f3-small">I dag, kl. 10:15</span>
|
|
||||||
</div>
|
|
||||||
<div class="f3-body">
|
|
||||||
Hej Jens.<br>Jeg kan se at switchen port 4 & 5 var nede hurtigt i nat. Har I prøvet at genstarte dem, så de fanger ny DHCP IP?
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="f3-item">
|
|
||||||
<div class="f3-header">
|
|
||||||
<span>Jens Jensen <span class="fw-normal text-muted">(Kunde)</span></span>
|
|
||||||
<span class="f3-small">I dag, kl. 10:35</span>
|
|
||||||
</div>
|
|
||||||
<div class="f3-body">
|
|
||||||
Ja, det har vi nu og det løste det mærkeligt nok for den ene, men HP printeren driller stadig.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,338 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="da">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Designforslag - Sagsdetaljer & Kommentarer</title>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background: #f0f2f5;
|
|
||||||
padding: 3rem 1rem;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
max-width: 900px;
|
|
||||||
}
|
|
||||||
.proposal-wrapper {
|
|
||||||
background: white;
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
|
|
||||||
padding: 2rem;
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
.proposal-title {
|
|
||||||
border-bottom: 2px solid #f0f2f5;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
color: #0f4c75;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fælles: Opgavebeskrivelse kort */
|
|
||||||
.desc-card {
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #e1e4e8;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
.desc-label {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
color: #6c757d;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
FORSLAG 1: CHAT / MESSENGER STYLE
|
|
||||||
--------------------------------------------------- */
|
|
||||||
.chat-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
.chat-msg {
|
|
||||||
max-width: 85%;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.chat-internal {
|
|
||||||
align-self: flex-end;
|
|
||||||
background-color: #e3f2fd;
|
|
||||||
border-bottom-right-radius: 2px;
|
|
||||||
color: #084298;
|
|
||||||
}
|
|
||||||
.chat-customer {
|
|
||||||
align-self: flex-start;
|
|
||||||
background-color: #f1f3f5;
|
|
||||||
border-bottom-left-radius: 2px;
|
|
||||||
color: #212529;
|
|
||||||
border: 1px solid #e9ecef;
|
|
||||||
}
|
|
||||||
.chat-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
FORSLAG 2: TIMELINE / ACTIVITY FEED
|
|
||||||
--------------------------------------------------- */
|
|
||||||
.timeline {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 3rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
.timeline::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 17px;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 2px;
|
|
||||||
background: #e9ecef;
|
|
||||||
}
|
|
||||||
.timeline-item {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
.timeline-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: -3rem;
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: white;
|
|
||||||
border: 2px solid #e9ecef;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
.icon-internal { border-color: #ffc107; color: #ffc107; }
|
|
||||||
.icon-customer { border-color: #198754; color: #198754; }
|
|
||||||
.icon-system { border-color: #6c757d; color: #6c757d; }
|
|
||||||
|
|
||||||
.timeline-content {
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e9ecef;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
|
||||||
padding: 1.25rem;
|
|
||||||
}
|
|
||||||
.timeline-meta {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #6c757d;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
FORSLAG 3: CLEAN CARDS MED FARVEKODER (Trello/Jira style)
|
|
||||||
--------------------------------------------------- */
|
|
||||||
.comment-card {
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e9ecef;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
|
|
||||||
}
|
|
||||||
.comment-card.type-internal {
|
|
||||||
border-left: 4px solid #ffc107; /* Gul venstre kant for intern */
|
|
||||||
}
|
|
||||||
.comment-card.type-customer {
|
|
||||||
border-left: 4px solid #0dcaf0; /* Blå/grøn venstre kant for kunde */
|
|
||||||
}
|
|
||||||
.card-header-clean {
|
|
||||||
background: #f8f9fa;
|
|
||||||
border-bottom: 1px solid #e9ecef;
|
|
||||||
padding: 0.75rem 1.25rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.card-header-clean .author {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
.badge-type {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
padding: 0.2rem 0.5rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="mb-5 text-center">
|
|
||||||
<h1 class="fw-bold" style="color: #0f4c75;">UI Forslag: Sagsdetaljer & Kommentarer</h1>
|
|
||||||
<p class="text-muted">3 forskellige måder at redesigne "Opgavebeskrivelse" og "Kommentarer" på, uden at røre live-koden endnu.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- FORSLAG 1 -->
|
|
||||||
<div class="proposal-wrapper">
|
|
||||||
<h3 class="proposal-title"><i class="bi bi-chat-dots me-2"></i>Forslag 1: Chat / Messenger UI</h3>
|
|
||||||
<p class="text-muted mb-4">Gør det nemt at adskille hvem der siger hvad. Interne noter (højre, blå), kundens svar (venstre, grå). Beskrivelsen er "låst" i toppen som opgavens udgangspunkt.</p>
|
|
||||||
|
|
||||||
<div class="desc-card">
|
|
||||||
<div class="desc-label">
|
|
||||||
<span><i class="bi bi-card-text me-2"></i>Opgavebeskrivelse</span>
|
|
||||||
<a href="#" class="text-decoration-none text-muted"><i class="bi bi-pencil-square"></i> Rediger</a>
|
|
||||||
</div>
|
|
||||||
<p class="mb-0">awrtqerqerg</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chat-container mt-4">
|
|
||||||
<div class="chat-msg chat-internal">
|
|
||||||
<div class="chat-header">
|
|
||||||
<span><i class="bi bi-lock-fill me-1"></i> Hurtig kommentar (Intern)</span>
|
|
||||||
<span class="small fw-normal">19/03-2026 06:34</span>
|
|
||||||
</div>
|
|
||||||
<div>tiest</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chat-msg chat-internal">
|
|
||||||
<div class="chat-header">
|
|
||||||
<span><i class="bi bi-lock-fill me-1"></i> Hurtig kommentar (Intern)</span>
|
|
||||||
<span class="small fw-normal">19/03-2026 07:30</span>
|
|
||||||
</div>
|
|
||||||
<div>test</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chat-msg chat-customer">
|
|
||||||
<div class="chat-header">
|
|
||||||
<span><i class="bi bi-person-circle me-1"></i> Bruger / Kunde svar</span>
|
|
||||||
<span class="small fw-normal">19/03-2026 08:03</span>
|
|
||||||
</div>
|
|
||||||
<div>sdfsdfsdfgsg</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- FORSLAG 2 -->
|
|
||||||
<div class="proposal-wrapper">
|
|
||||||
<h3 class="proposal-title"><i class="bi bi-clock-history me-2"></i>Forslag 2: Timeline / Activity Feed</h3>
|
|
||||||
<p class="text-muted mb-4">Inspireret af GitHub Issues. En lodret historik-streg samler oprettelse, kommentarer og ændringer i et nemt læsbart flow.</p>
|
|
||||||
|
|
||||||
<div class="timeline">
|
|
||||||
<!-- Beskrivelsen som første post i timelinen -->
|
|
||||||
<div class="timeline-item">
|
|
||||||
<div class="timeline-icon icon-system"><i class="bi bi-flag-fill"></i></div>
|
|
||||||
<div class="timeline-content">
|
|
||||||
<div class="timeline-meta">
|
|
||||||
<strong>Sag oprettet</strong> • Beskrivelse tilføjet
|
|
||||||
<div class="ms-auto"><a href="#" class="text-muted"><i class="bi bi-pencil"></i></a></div>
|
|
||||||
</div>
|
|
||||||
<div class="p-3 bg-light rounded border">
|
|
||||||
awrtqerqerg
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="timeline-item">
|
|
||||||
<div class="timeline-icon icon-internal"><i class="bi bi-chat-square-text"></i></div>
|
|
||||||
<div class="timeline-content">
|
|
||||||
<div class="timeline-meta">
|
|
||||||
<strong>Hurtig kommentar</strong> (Intern note)
|
|
||||||
<span class="ms-auto text-muted small">19/03-2026 06:34</span>
|
|
||||||
</div>
|
|
||||||
<div>tiest</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="timeline-item">
|
|
||||||
<div class="timeline-icon icon-customer"><i class="bi bi-envelope"></i></div>
|
|
||||||
<div class="timeline-content" style="border-color: #c3e6cb;">
|
|
||||||
<div class="timeline-meta text-success">
|
|
||||||
<strong>Bruger</strong> (Svar fra kunde)
|
|
||||||
<span class="ms-auto text-muted small">19/03-2026 08:03</span>
|
|
||||||
</div>
|
|
||||||
<div>sdfsdfsdfgsg</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- FORSLAG 3 -->
|
|
||||||
<div class="proposal-wrapper">
|
|
||||||
<h3 class="proposal-title"><i class="bi bi-card-list me-2"></i>Forslag 3: Clean Cards (Farvekodet venstre kant)</h3>
|
|
||||||
<p class="text-muted mb-4">Meget stilrent design til CRM / Enterprise systemer. Bevarer fuld bredde for lang tekst, men bruger en tyk farvekode på venstre kant til at identificere typen lynhurtigt.</p>
|
|
||||||
|
|
||||||
<div class="desc-card shadow-sm" style="border-top: 4px solid #0f4c75;">
|
|
||||||
<div class="desc-label">
|
|
||||||
<span>Opgavebeskrivelse</span>
|
|
||||||
<button class="btn btn-sm btn-outline-secondary py-0"><i class="bi bi-pencil"></i> Rediger</button>
|
|
||||||
</div>
|
|
||||||
<p class="mb-0 fs-5">awrtqerqerg</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5 class="mb-3 mt-5" style="color: #6c757d; font-size: 0.9rem; text-transform: uppercase;">Kommentarer & Historik</h5>
|
|
||||||
|
|
||||||
<div class="comment-card type-internal">
|
|
||||||
<div class="card-header-clean">
|
|
||||||
<div class="author">
|
|
||||||
<div class="bg-warning text-dark rounded-circle d-flex align-items-center justify-content-center" style="width:24px; height:24px; font-size:0.75rem;"><i class="bi bi-lock-fill"></i></div>
|
|
||||||
Hurtig kommentar
|
|
||||||
<span class="badge bg-warning text-dark badge-type ms-2">Intern Note</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-muted small">19/03-2026 06:34</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body p-3">
|
|
||||||
tiest
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="comment-card type-internal">
|
|
||||||
<div class="card-header-clean">
|
|
||||||
<div class="author">
|
|
||||||
<div class="bg-warning text-dark rounded-circle d-flex align-items-center justify-content-center" style="width:24px; height:24px; font-size:0.75rem;"><i class="bi bi-lock-fill"></i></div>
|
|
||||||
Hurtig kommentar
|
|
||||||
<span class="badge bg-warning text-dark badge-type ms-2">Intern Note</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-muted small">19/03-2026 07:59</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body p-3">
|
|
||||||
adfgaegea hsrhsh
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="comment-card type-customer">
|
|
||||||
<div class="card-header-clean">
|
|
||||||
<div class="author">
|
|
||||||
<div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center" style="width:24px; height:24px; font-size:0.75rem;"><i class="bi bi-person-fill"></i></div>
|
|
||||||
Bruger
|
|
||||||
<span class="badge bg-info text-dark badge-type ms-2">Kunde</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-muted small">19/03-2026 08:03</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body p-3">
|
|
||||||
sdfsdfsdfgsg
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,290 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="da">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>3 Kompakte Forslag - Sagsdetaljer</title>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--accent: #0f4c75;
|
|
||||||
--bg: #f4f6f8;
|
|
||||||
--card: #ffffff;
|
|
||||||
--muted: #6c757d;
|
|
||||||
--border: #e3e7eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: var(--bg);
|
|
||||||
color: #1f2937;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap {
|
|
||||||
max-width: 980px;
|
|
||||||
margin: 24px auto 48px;
|
|
||||||
padding: 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
background: linear-gradient(145deg, #fafdff, #eef5fb);
|
|
||||||
border: 1px solid #d7e7f7;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 14px 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero h1 {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
margin: 0 0 4px;
|
|
||||||
color: var(--accent);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero p {
|
|
||||||
margin: 0;
|
|
||||||
color: var(--muted);
|
|
||||||
font-size: 0.83rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proposal {
|
|
||||||
background: var(--card);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proposal-head {
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
background: #fbfdff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proposal-head h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 0.84rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.07em;
|
|
||||||
color: var(--accent);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proposal-head small {
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 0.73rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proposal-body {
|
|
||||||
padding: 10px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example {
|
|
||||||
border: 1px solid #edf0f3;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.msg-row {
|
|
||||||
padding: 7px 10px;
|
|
||||||
border-bottom: 1px solid #f2f4f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.msg-row:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 7px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
font-size: 0.78rem;
|
|
||||||
color: #64748b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta .name {
|
|
||||||
color: #0f172a;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta .time {
|
|
||||||
margin-left: auto;
|
|
||||||
color: #9aa3ad;
|
|
||||||
font-size: 0.72rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
color: #1f2937;
|
|
||||||
line-height: 1.43;
|
|
||||||
font-size: 0.86rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Forslag 1 */
|
|
||||||
.avatar {
|
|
||||||
width: 21px;
|
|
||||||
height: 21px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 0.63rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: white;
|
|
||||||
background: var(--accent);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sys {
|
|
||||||
background: #7d8793;
|
|
||||||
font-style: italic;
|
|
||||||
color: #5f6b76;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Forslag 2 */
|
|
||||||
.log-line {
|
|
||||||
display: flex;
|
|
||||||
gap: 0;
|
|
||||||
border-bottom: 1px solid #f1f3f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-line:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stripe {
|
|
||||||
width: 3px;
|
|
||||||
background: #cfd6de;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stripe.tech {
|
|
||||||
background: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stripe.system {
|
|
||||||
background: #9da8b5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-inner {
|
|
||||||
padding: 6px 9px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Forslag 3 */
|
|
||||||
.inbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 8px;
|
|
||||||
background: #fbfdff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
max-width: 78%;
|
|
||||||
border: 1px solid #dee5ed;
|
|
||||||
border-radius: 7px;
|
|
||||||
padding: 6px 9px;
|
|
||||||
font-size: 0.86rem;
|
|
||||||
line-height: 1.43;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left { align-self: flex-start; background: #eef3f8; }
|
|
||||||
.right { align-self: flex-end; background: #e4eef8; border-color: #c7d9eb; }
|
|
||||||
.center { align-self: center; max-width: 90%; background: #f4f4f4; border-color: #e3e3e3; color: #69727d; font-style: italic; }
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.proposal-head {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
max-width: 92%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="wrap">
|
|
||||||
<div class="hero">
|
|
||||||
<h1>3 nye forslag på én side</h1>
|
|
||||||
<p>Fokus: kompakt layout, mindre vertikalt spild, hurtig læsning i drift.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="proposal">
|
|
||||||
<div class="proposal-head">
|
|
||||||
<h2>Forslag 1: Kompakt Thread</h2>
|
|
||||||
<small>Bedst balance mellem læsbarhed og tæthed</small>
|
|
||||||
</div>
|
|
||||||
<div class="proposal-body">
|
|
||||||
<div class="example">
|
|
||||||
<div class="msg-row">
|
|
||||||
<div class="meta"><span class="avatar">JJ</span><span class="name">Jens Jensen</span><span class="time">10:00</span></div>
|
|
||||||
<div class="content" style="padding-left:28px;">Vi har et problem med printerne siden fredag. De melder offline.</div>
|
|
||||||
</div>
|
|
||||||
<div class="msg-row">
|
|
||||||
<div class="meta"><span class="avatar">CT</span><span class="name">Christian Thomas</span><span class="time">10:15</span></div>
|
|
||||||
<div class="content" style="padding-left:28px;">Jeg kan se port 4 og 5 har været nede. Kan I genstarte printerne?</div>
|
|
||||||
</div>
|
|
||||||
<div class="msg-row sys">
|
|
||||||
<div class="meta"><span class="avatar" style="background:#7d8793;">SY</span><span class="name">System</span><span class="time">10:20</span></div>
|
|
||||||
<div class="content" style="padding-left:28px;">Status ændret: Åben -> Under behandling</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="proposal">
|
|
||||||
<div class="proposal-head">
|
|
||||||
<h2>Forslag 2: Activity Log</h2>
|
|
||||||
<small>Maksimal informationsdensitet</small>
|
|
||||||
</div>
|
|
||||||
<div class="proposal-body">
|
|
||||||
<div class="example">
|
|
||||||
<div class="log-line">
|
|
||||||
<div class="stripe"></div>
|
|
||||||
<div class="log-inner">
|
|
||||||
<div class="meta"><span class="name">Jens Jensen</span><span class="time">10:00</span></div>
|
|
||||||
<div class="content">Vi har et problem med printerne siden fredag. De melder offline.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="log-line">
|
|
||||||
<div class="stripe tech"></div>
|
|
||||||
<div class="log-inner">
|
|
||||||
<div class="meta"><span class="name">Christian Thomas</span><span class="time">10:15</span></div>
|
|
||||||
<div class="content">Jeg kan se port 4 og 5 har været nede. Kan I genstarte printerne?</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="log-line">
|
|
||||||
<div class="stripe system"></div>
|
|
||||||
<div class="log-inner">
|
|
||||||
<div class="meta"><span class="name">System</span><span class="time">10:20</span></div>
|
|
||||||
<div class="content" style="color:#6b7280; font-style:italic;">Status ændret: Åben -> Under behandling</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="proposal">
|
|
||||||
<div class="proposal-head">
|
|
||||||
<h2>Forslag 3: Split Inbox</h2>
|
|
||||||
<small>Tydelig kunde/tekniker-retning</small>
|
|
||||||
</div>
|
|
||||||
<div class="proposal-body">
|
|
||||||
<div class="example inbox">
|
|
||||||
<div class="bubble left">Vi har et problem med printerne siden fredag. De melder offline.<div class="meta" style="margin-top:4px; margin-bottom:0;"><span class="name">Jens Jensen</span><span class="time">10:00</span></div></div>
|
|
||||||
<div class="bubble right">Jeg kan se port 4 og 5 har været nede. Kan I genstarte printerne?<div class="meta" style="margin-top:4px; margin-bottom:0;"><span class="name">Christian Thomas</span><span class="time">10:15</span></div></div>
|
|
||||||
<div class="bubble center">Status ændret: Åben -> Under behandling<div class="meta" style="justify-content:center; margin-top:4px; margin-bottom:0;"><span class="name">System</span><span class="time">10:20</span></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1492,6 +1492,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function bindHeaderActions() {
|
function bindHeaderActions() {
|
||||||
|
const backBtn = byId('bbBackBtn');
|
||||||
const searchBtn = byId('bbSearchBtn');
|
const searchBtn = byId('bbSearchBtn');
|
||||||
const notificationsBtn = byId('bbNotificationsBtn');
|
const notificationsBtn = byId('bbNotificationsBtn');
|
||||||
const pauseBtn = byId('bbTimerPauseBtn');
|
const pauseBtn = byId('bbTimerPauseBtn');
|
||||||
@ -1499,6 +1500,16 @@
|
|||||||
const switchBtn = byId('bbTimerSwitchBtn');
|
const switchBtn = byId('bbTimerSwitchBtn');
|
||||||
const timerChip = byId('bbActiveTimerChip');
|
const timerChip = byId('bbActiveTimerChip');
|
||||||
|
|
||||||
|
if (backBtn) {
|
||||||
|
backBtn.addEventListener('click', function () {
|
||||||
|
if (window.history.length > 1) {
|
||||||
|
window.history.back();
|
||||||
|
} else {
|
||||||
|
window.location.href = '/sag';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (searchBtn) {
|
if (searchBtn) {
|
||||||
searchBtn.addEventListener('click', function () {
|
searchBtn.addEventListener('click', function () {
|
||||||
const trigger = byId('globalSearchBtn');
|
const trigger = byId('globalSearchBtn');
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user