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

117 lines
7.2 KiB
HTML
Raw Normal View History

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.
2026-04-24 23:12:51 +02:00
<!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>
Reference in New Issue Copy Permalink