ct/bmc_hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
daf2f29471
bmc_hub/mine_3_anbefalinger.html

325 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mine 3 anbefalinger – Sag Kommentarer</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root {
--accent: #0f4c75;
--bg-card: #ffffff;
--bg-page: #f4f6f8;
}
body { background: var(--bg-page); font-size: 0.875rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.container { max-width: 860px; }
h2.proposal-title {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
font-weight: 700;
border-bottom: 2px solid var(--accent);
padding-bottom: 4px;
margin-bottom: 6px;
}
.proposal-desc { font-size: 0.78rem; color: #666; margin-bottom: 12px; }
/* =====================================================
MIN ANBEFALING #1: Linear / Notion Thread
- Lille initial-cirkel + navn + tid på én linje
- Tekst nedenunder med indent (ingen boks)
- Absolut mindst mulig vertikalt spild
===================================================== */
.ln-thread { background: var(--bg-card); border: 1px solid #e2e6ea; border-radius: 6px; overflow: hidden; }
.ln-msg { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }
.ln-msg:last-child { border-bottom: none; }
.ln-msg.system-msg { background: #f8fbff; }
.ln-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.ln-avatar {
width: 22px; height: 22px; border-radius: 50%;
background: var(--accent); color: white;
font-size: 0.65rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ln-avatar.sys { background: #6c757d; }
.ln-name { font-weight: 600; font-size: 0.82rem; color: #222; }
.ln-time { font-size: 0.72rem; color: #aaa; margin-left: auto; }
.ln-body { margin-left: 29px; color: #333; line-height: 1.45; }
/* Input */
.ln-input { border-top: 1px solid #e2e6ea; background: #fafafa; padding: 8px 12px; }
.ln-input textarea { resize: none; font-size: 0.875rem; border-radius: 4px; }
/* =====================================================
MIN ANBEFALING #2: Jira Activity Log
- INGEN avatarer. Bare tekst-rækker med tynd venstre-border.
- Tekniker = blå accent, System = grå, Kunde = default
- Ekstrem informationsdensitet
===================================================== */
.jira-log { background: var(--bg-card); border: 1px solid #ddd; border-radius: 4px; }
.jira-row { display: flex; gap: 0; border-bottom: 1px solid #f2f2f2; }
.jira-row:last-child { border-bottom: none; }
.jira-stripe { width: 3px; flex-shrink: 0; background: #dee2e6; }
.jira-stripe.tech { background: var(--accent); }
.jira-stripe.sys { background: #adb5bd; }
.jira-inner { padding: 5px 10px; flex-grow: 1; }
.jira-meta { font-size: 0.72rem; color: #888; line-height: 1.2; }
.jira-meta strong { color: #333; }
.jira-text { color: #222; line-height: 1.4; margin-top: 1px; }
/* Input */
.jira-input { border-top: 1px solid #ddd; background: #fafafa; padding: 8px; }
.jira-input textarea { resize: none; font-size: 0.875rem; }
/* =====================================================
MIN ANBEFALING #3: Flat Inbox (Zendesk/Freshdesk)
- Kunde-beskeder i lysere boks venstre
- Tekniker-svar højre-aligned i lysere boks
- Zero chrome: ingen card-headers, ingen colours
- Eneste differentieringsmarkør: alignment + subtil bg
===================================================== */
.inbox-feed { background: var(--bg-card); border: 1px solid #e2e6ea; border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ib-msg { max-width: 78%; }
.ib-msg.left { align-self: flex-start; }
.ib-msg.right { align-self: flex-end; }
.ib-bubble {
padding: 6px 10px;
border-radius: 6px;
line-height: 1.45;
color: #222;
}
.ib-msg.left .ib-bubble { background: #f0f4f7; border: 1px solid #dde4ed; }
.ib-msg.right .ib-bubble { background: #e8f0f7; border: 1px solid #c5d8ea; }
.ib-msg.sys .ib-bubble { background: #f4f4f4; border: 1px solid #ddd; font-style: italic; color: #666; font-size: 0.8rem; text-align: center; }
.ib-meta { font-size: 0.7rem; color: #999; margin-top: 2px; padding: 0 2px; }
.ib-msg.right .ib-meta { text-align: right; }
.inbox-input { border-top: 1px solid #e2e6ea; background: #fafafa; padding: 8px 12px; border-radius: 0 0 6px 6px; }
.inbox-input textarea { resize: none; font-size: 0.875rem; }
</style>
</head>
<body>
<div class="container mt-4 pb-5">
<div class="mb-4">
<h1 style="font-size:1.2rem; color: var(--accent); font-weight:700;">Mine 3 anbefalinger til sag-kommentarer</h1>
<p class="text-muted" style="font-size:0.82rem;">Alle 3 er baseret på den faktiske Jinja-struktur i <code>detail.html</code> og er klar til at erstatte det eksisterende kort-layout direkte.</p>
</div>
<!-- =============================================
FORSLAG 1: LINEAR / NOTION THREAD
============================================= -->
<h2 class="proposal-title">Anbefaling 1 — Thread (Linear/Notion style) ⭐ min favorit</h2>
<p class="proposal-desc">Lille initial-cirkel + navn + tid på én linje. Tekst nedenunder med kun et fast indent. Ingen bokse, ingen farvegte headers. Virker kompakt men er stadig behagelig at læse.</p>
<div class="ln-thread">
<!-- Kommentar 1: kunde -->
<div class="ln-msg">
<div class="ln-head">
<div class="ln-avatar">JJ</div>
<span class="ln-name">Jens Jensen</span>
<span class="ln-time">21/03-2026 10:00</span>
</div>
<div class="ln-body">Vi har et problem med vores to printere på kontoret — de melder offline på printserveren siden fredag.</div>
</div>
<!-- Kommentar 2: tekniker -->
<div class="ln-msg">
<div class="ln-head">
<div class="ln-avatar">CT</div>
<span class="ln-name">Christian Thomas</span>
<span class="ln-time">21/03-2026 10:15</span>
</div>
<div class="ln-body">Jeg kan se at port 4 &amp; 5 på switchen var nede kort i nat. Har I prøvet at genstarte printerne så de fanger ny DHCP-adresse?</div>
</div>
<!-- Kommentar 3: system -->
<div class="ln-msg system-msg">
<div class="ln-head">
<div class="ln-avatar sys"><i class="bi bi-gear" style="font-size:0.6rem;"></i></div>
<span class="ln-name" style="color:#6c757d;">System</span>
<span class="ln-time">21/03-2026 10:20</span>
</div>
<div class="ln-body" style="color:#666; font-style:italic;">Status ændret fra <strong>Åben</strong> til <strong>Under behandling</strong></div>
</div>
<!-- Kommentar 4: kunde -->
<div class="ln-msg">
<div class="ln-head">
<div class="ln-avatar">JJ</div>
<span class="ln-name">Jens Jensen</span>
<span class="ln-time">21/03-2026 10:35</span>
</div>
<div class="ln-body">HP'en virker stadig ikke - den anden fik vi op at køre.</div>
</div>
<!-- Input -->
<div class="ln-input">
<div class="input-group input-group-sm">
<textarea class="form-control" rows="2" placeholder="Skriv en kommentar..."></textarea>
<button class="btn btn-primary"><i class="bi bi-send"></i></button>
</div>
</div>
</div>
<!-- Jinja kode hint -->
<details class="mt-2 mb-4">
<summary class="text-muted small" style="cursor:pointer;">Vis Jinja-kode til at erstatte det nuværende</summary>
<pre class="bg-light border rounded p-2 small mt-2" style="overflow-x:auto;">&lt;div class="ln-thread"&gt;
{% for comment in comments %}
&lt;div class="ln-msg {% if comment.er_system_besked %}system-msg{% endif %}"&gt;
&lt;div class="ln-head"&gt;
&lt;div class="ln-avatar {% if comment.er_system_besked %}sys{% endif %}"&gt;
{% if comment.er_system_besked %}&lt;i class="bi bi-gear"&gt;&lt;/i&gt;
{% else %}{{ comment.forfatter[:2]|upper }}{% endif %}
&lt;/div&gt;
&lt;span class="ln-name"&gt;{{ comment.forfatter }}&lt;/span&gt;
&lt;span class="ln-time"&gt;{{ comment.created_at.strftime('%d/%m-%Y %H:%M') }}&lt;/span&gt;
&lt;/div&gt;
&lt;div class="ln-body"&gt;{{ comment.indhold|replace('\n','&lt;br&gt;')|safe }}&lt;/div&gt;
&lt;/div&gt;
{% endfor %}
&lt;div class="ln-input"&gt;...form...&lt;/div&gt;
&lt;/div&gt;</pre>
</details>
<!-- =============================================
FORSLAG 2: JIRA ACTIVITY LOG
============================================= -->
<h2 class="proposal-title">Anbefaling 2 — Activity Log (Jira style)</h2>
<p class="proposal-desc">Ingen avatarer. Kun tekst-rækker. En 3px venstre-streg i blå viser hvem der er tekniker vs. hvid/grå for alle andre. Højeste mulige informationsdensitet — ligner en IT-log.</p>
<div class="jira-log">
<div class="jira-row">
<div class="jira-stripe"></div>
<div class="jira-inner">
<div class="jira-meta"><strong>Jens Jensen</strong> · 21/03-2026 kl. 10:00</div>
<div class="jira-text">Vi har et problem med vores to printere på kontoret — de melder offline på printserveren siden fredag.</div>
</div>
</div>
<div class="jira-row">
<div class="jira-stripe tech"></div>
<div class="jira-inner">
<div class="jira-meta"><strong>Christian Thomas</strong> <span class="badge bg-primary" style="font-size:0.62rem;">BMC</span> · 21/03-2026 kl. 10:15</div>
<div class="jira-text">Jeg kan se at port 4 &amp; 5 på switchen var nede kort i nat. Har I prøvet at genstarte printerne?</div>
</div>
</div>
<div class="jira-row">
<div class="jira-stripe sys"></div>
<div class="jira-inner">
<div class="jira-meta"><strong>System</strong> · 21/03-2026 kl. 10:20</div>
<div class="jira-text" style="font-style:italic; color:#666;">Status ændret: Åben → Under behandling</div>
</div>
</div>
<div class="jira-row">
<div class="jira-stripe"></div>
<div class="jira-inner">
<div class="jira-meta"><strong>Jens Jensen</strong> · 21/03-2026 kl. 10:35</div>
<div class="jira-text">HP'en virker stadig ikke — den anden fick vi op at køre.</div>
</div>
</div>
<div class="jira-input">
<div class="input-group input-group-sm">
<textarea class="form-control" rows="2" placeholder="Skriv en kommentar..."></textarea>
<button class="btn btn-primary"><i class="bi bi-send"></i></button>
</div>
</div>
</div>
<details class="mt-2 mb-4">
<summary class="text-muted small" style="cursor:pointer;">Vis Jinja-kode til at erstatte det nuværende</summary>
<pre class="bg-light border rounded p-2 small mt-2" style="overflow-x:auto;">&lt;div class="jira-log"&gt;
{% for comment in comments %}
&lt;div class="jira-row"&gt;
&lt;div class="jira-stripe {% if comment.er_system_besked %}sys
{%- elif comment.er_intern %}tech{% endif %}"&gt;&lt;/div&gt;
&lt;div class="jira-inner"&gt;
&lt;div class="jira-meta"&gt;
&lt;strong&gt;{{ comment.forfatter }}&lt;/strong&gt;
{% if comment.er_intern %}&lt;span class="badge bg-primary"&gt;BMC&lt;/span&gt;{% endif %}
· {{ comment.created_at.strftime('%d/%m-%Y %H:%M') }}
&lt;/div&gt;
&lt;div class="jira-text"&gt;{{ comment.indhold|replace('\n','&lt;br&gt;')|safe }}&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
{% endfor %}
&lt;/div&gt;</pre>
</details>
<!-- =============================================
FORSLAG 3: FLAT INBOX
============================================= -->
<h2 class="proposal-title">Anbefaling 3 — Flat Inbox (Zendesk/Freshdesk style)</h2>
<p class="proposal-desc">Kunde-beskeder til venstre. BMC/tekniker-svar til højre. Ingen farvegte headers, ingen bobler — bare flad alignment og subtil baggrundsforskel. Klart at forstå hvem der sagde hvad.</p>
<div class="inbox-feed">
<!-- Kunde (venstre) -->
<div class="ib-msg left">
<div class="ib-bubble">Vi har et problem med vores to printere på kontoret — de melder offline på printserveren siden fredag.</div>
<div class="ib-meta">Jens Jensen · 21/03-2026 10:00</div>
</div>
<!-- Tekniker (højre) -->
<div class="ib-msg right">
<div class="ib-bubble">Jeg kan se at port 4 &amp; 5 på switchen var nede kort i nat. Har I prøvet at genstarte printerne så de fanger ny DHCP-adresse?</div>
<div class="ib-meta">Christian Thomas · 21/03-2026 10:15</div>
</div>
<!-- System (centreret) -->
<div class="ib-msg sys" style="align-self:center; max-width:90%;">
<div class="ib-bubble">Status ændret: Åben → Under behandling</div>
<div class="ib-meta" style="text-align:center;">System · 21/03-2026 10:20</div>
</div>
<!-- Kunde (venstre) -->
<div class="ib-msg left">
<div class="ib-bubble">HP'en virker stadig ikke — den anden fick vi op at køre.</div>
<div class="ib-meta">Jens Jensen · 21/03-2026 10:35</div>
</div>
</div>
<div class="inbox-input mt-1">
<div class="input-group input-group-sm">
<textarea class="form-control" rows="2" placeholder="Skriv en kommentar..."></textarea>
<button class="btn btn-primary"><i class="bi bi-send"></i></button>
</div>
</div>
<details class="mt-2 mb-4">
<summary class="text-muted small" style="cursor:pointer;">Vis Jinja-kode til at erstatte det nuværende</summary>
<pre class="bg-light border rounded p-2 small mt-2" style="overflow-x:auto;">&lt;div class="inbox-feed"&gt;
{% for comment in comments %}
{% if comment.er_system_besked %}
&lt;div class="ib-msg sys" style="align-self:center;max-width:90%"&gt;
{% elif comment.er_intern %}
&lt;div class="ib-msg right"&gt;
{% else %}
&lt;div class="ib-msg left"&gt;
{% endif %}
&lt;div class="ib-bubble"&gt;{{ comment.indhold|replace('\n','&lt;br&gt;')|safe }}&lt;/div&gt;
&lt;div class="ib-meta"&gt;{{ comment.forfatter }} · {{ comment.created_at.strftime('%d/%m-%Y %H:%M') }}&lt;/div&gt;
&lt;/div&gt;
{% endfor %}
&lt;/div&gt;</pre>
</details>
<div class="alert alert-info mt-4" style="font-size:0.82rem;">
<strong>Hvornår vil jeg bruge hvilken?</strong><br>
<b>1 (Thread):</b> Bedst når der er blandede deltagere (intern + kunde + system). Nemmest at tilpasse.<br>
<b>2 (Log):</b> Bedst hvis I primært bruger systemet internt — minder om et driftslog og er meget kompakt.<br>
<b>3 (Inbox):</b> Bedst hvis I har et tydeligt skel mellem "kundekorrespondance" og "intern teknikerbesked".
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink