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

150 lines
9.7 KiB
HTML
Raw Permalink 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 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>
Reference in New Issue Copy Permalink