Refactors design system documentation and layout
Updates design system documentation with comprehensive component overview Enhances UI layout across multiple pages with consistent styling and new components Adds support for charts, pagination, and responsive design elements Improves overall system documentation and visual consistency
This commit is contained in:
Janus C. H. Knudsen
parent
35b15294e3
commit
fac7754d7a
14 changed files with 3492 additions and 281 deletions
588
wwwroot/poc-medarbejdere.html
Normal file
588
wwwroot/poc-medarbejdere.html
Normal file
|
|
@ -0,0 +1,588 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="da">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Medarbejdere - Salon OS</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
|
||||
<link rel="stylesheet" href="css/konto.css">
|
||||
<style>
|
||||
/* ==========================================
|
||||
FONT FACE (Poppins)
|
||||
========================================== */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('fonts/Poppins-Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('fonts/Poppins-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('fonts/Poppins-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('fonts/Poppins-Bold.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
CSS VARIABLES (Design System)
|
||||
========================================== */
|
||||
:root {
|
||||
--color-surface: #fff;
|
||||
--color-background: #f5f5f5;
|
||||
--color-background-hover: #f0f0f0;
|
||||
--color-background-alt: #fafafa;
|
||||
--color-border: #e0e0e0;
|
||||
--color-text: #333;
|
||||
--color-text-secondary: #666;
|
||||
--color-teal: #00897b;
|
||||
--color-blue: #1976d2;
|
||||
--color-red: #e53935;
|
||||
--color-amber: #f59e0b;
|
||||
--color-purple: #8b5cf6;
|
||||
--color-green: #43a047;
|
||||
--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* Dark mode - system preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode) {
|
||||
--color-surface: #1e1e1e;
|
||||
--color-background: #121212;
|
||||
--color-background-hover: #2a2a2a;
|
||||
--color-background-alt: #1a1a1a;
|
||||
--color-border: #333;
|
||||
--color-text: #e0e0e0;
|
||||
--color-text-secondary: #999;
|
||||
--color-teal: #26a69a;
|
||||
--color-blue: #42a5f5;
|
||||
--color-red: #ef5350;
|
||||
--color-amber: #ffb74d;
|
||||
--color-purple: #a78bfa;
|
||||
--color-green: #66bb6a;
|
||||
}
|
||||
}
|
||||
|
||||
/* Manual dark mode override */
|
||||
:root.dark-mode {
|
||||
--color-surface: #1e1e1e;
|
||||
--color-background: #121212;
|
||||
--color-background-hover: #2a2a2a;
|
||||
--color-background-alt: #1a1a1a;
|
||||
--color-border: #333;
|
||||
--color-text: #e0e0e0;
|
||||
--color-text-secondary: #999;
|
||||
--color-teal: #26a69a;
|
||||
--color-blue: #42a5f5;
|
||||
--color-red: #ef5350;
|
||||
--color-amber: #ffb74d;
|
||||
--color-purple: #a78bfa;
|
||||
--color-green: #66bb6a;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
RESET & BASE
|
||||
========================================== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
font-size: 14px;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
ROLE BADGES
|
||||
========================================== */
|
||||
swp-role-badge.leader {
|
||||
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
STATS CARDS
|
||||
========================================== */
|
||||
swp-stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
swp-stat-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 20px;
|
||||
background: var(--color-surface);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-stat-label {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-stat-card.teal swp-stat-value {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-stat-card.amber swp-stat-value {
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-stat-card.purple swp-stat-value {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
TABS
|
||||
========================================== */
|
||||
swp-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
swp-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
swp-tab:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-tab[data-active="true"] {
|
||||
color: var(--color-teal);
|
||||
border-bottom-color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-tab i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
swp-tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
swp-tab-content[data-active="true"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
PERMISSIONS MATRIX
|
||||
========================================== */
|
||||
swp-permissions-matrix {
|
||||
display: block;
|
||||
background: var(--color-surface);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
swp-permissions-matrix table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
swp-permissions-matrix th,
|
||||
swp-permissions-matrix td {
|
||||
padding: 14px 16px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
swp-permissions-matrix th:first-child,
|
||||
swp-permissions-matrix td:first-child {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
}
|
||||
swp-permissions-matrix thead th {
|
||||
background: var(--color-background-alt);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
swp-permissions-matrix tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
swp-permissions-matrix .permission-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
swp-permissions-matrix .permission-name i {
|
||||
font-size: 18px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
swp-permissions-matrix .check {
|
||||
color: var(--color-teal);
|
||||
font-size: 20px;
|
||||
}
|
||||
swp-permissions-matrix .no-access {
|
||||
color: var(--color-border);
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<swp-page-container>
|
||||
|
||||
<!-- Page Header -->
|
||||
<swp-page-header>
|
||||
<swp-page-title>
|
||||
<h1>Medarbejdere</h1>
|
||||
<p>Administrer brugere, roller og rettigheder</p>
|
||||
</swp-page-title>
|
||||
</swp-page-header>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<swp-stats-row>
|
||||
<swp-stat-card class="teal">
|
||||
<swp-stat-value>4</swp-stat-value>
|
||||
<swp-stat-label>Aktive medarbejdere</swp-stat-label>
|
||||
</swp-stat-card>
|
||||
<swp-stat-card class="amber">
|
||||
<swp-stat-value>1</swp-stat-value>
|
||||
<swp-stat-label>Afventer invitation</swp-stat-label>
|
||||
</swp-stat-card>
|
||||
<swp-stat-card class="purple">
|
||||
<swp-stat-value>4</swp-stat-value>
|
||||
<swp-stat-label>Roller defineret</swp-stat-label>
|
||||
</swp-stat-card>
|
||||
</swp-stats-row>
|
||||
|
||||
<!-- Tabs -->
|
||||
<swp-tabs>
|
||||
<swp-tab data-tab="brugere" data-active="true">
|
||||
<i class="ph ph-users"></i>
|
||||
Brugere
|
||||
</swp-tab>
|
||||
<swp-tab data-tab="roller">
|
||||
<i class="ph ph-shield-check"></i>
|
||||
Roller
|
||||
</swp-tab>
|
||||
</swp-tabs>
|
||||
|
||||
<!-- Tab: Brugere -->
|
||||
<swp-tab-content data-tab="brugere" data-active="true">
|
||||
<swp-users-header>
|
||||
<swp-users-count>
|
||||
<strong>5 af 8</strong> brugere
|
||||
<swp-users-progress>
|
||||
<swp-users-progress-bar style="width: 62.5%"></swp-users-progress-bar>
|
||||
</swp-users-progress>
|
||||
</swp-users-count>
|
||||
<swp-btn class="primary">
|
||||
<i class="ph ph-user-plus"></i>
|
||||
Inviter bruger
|
||||
</swp-btn>
|
||||
</swp-users-header>
|
||||
|
||||
<swp-table-card>
|
||||
<swp-table>
|
||||
<swp-table-header>
|
||||
<swp-table-row>
|
||||
<swp-table-cell>Bruger</swp-table-cell>
|
||||
<swp-table-cell>Rolle</swp-table-cell>
|
||||
<swp-table-cell>Status</swp-table-cell>
|
||||
<swp-table-cell>Sidst aktiv</swp-table-cell>
|
||||
<swp-table-cell></swp-table-cell>
|
||||
</swp-table-row>
|
||||
</swp-table-header>
|
||||
<swp-table-body>
|
||||
<!-- User 1 - Owner -->
|
||||
<swp-table-row>
|
||||
<swp-table-cell>
|
||||
<swp-user-info>
|
||||
<swp-user-avatar>MJ</swp-user-avatar>
|
||||
<swp-user-details>
|
||||
<swp-user-name>Maria Jensen</swp-user-name>
|
||||
<swp-user-email>maria@salonbeauty.dk</swp-user-email>
|
||||
</swp-user-details>
|
||||
</swp-user-info>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-role-badge class="owner">Ejer</swp-role-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-status-badge class="active">
|
||||
<swp-status-dot></swp-status-dot>
|
||||
Aktiv
|
||||
</swp-status-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>I dag, 14:32</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-table-actions>
|
||||
<swp-icon-btn title="Rediger">
|
||||
<i class="ph ph-pencil"></i>
|
||||
</swp-icon-btn>
|
||||
</swp-table-actions>
|
||||
</swp-table-cell>
|
||||
</swp-table-row>
|
||||
|
||||
<!-- User 2 - Admin -->
|
||||
<swp-table-row>
|
||||
<swp-table-cell>
|
||||
<swp-user-info>
|
||||
<swp-user-avatar class="purple">AS</swp-user-avatar>
|
||||
<swp-user-details>
|
||||
<swp-user-name>Anna Sørensen</swp-user-name>
|
||||
<swp-user-email>anna@salonbeauty.dk</swp-user-email>
|
||||
</swp-user-details>
|
||||
</swp-user-info>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-role-badge class="admin">Admin</swp-role-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-status-badge class="active">
|
||||
<swp-status-dot></swp-status-dot>
|
||||
Aktiv
|
||||
</swp-status-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>I dag, 12:15</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-table-actions>
|
||||
<swp-icon-btn title="Rediger">
|
||||
<i class="ph ph-pencil"></i>
|
||||
</swp-icon-btn>
|
||||
<swp-icon-btn class="danger" title="Fjern bruger">
|
||||
<i class="ph ph-trash"></i>
|
||||
</swp-icon-btn>
|
||||
</swp-table-actions>
|
||||
</swp-table-cell>
|
||||
</swp-table-row>
|
||||
|
||||
<!-- User 3 - Leder -->
|
||||
<swp-table-row>
|
||||
<swp-table-cell>
|
||||
<swp-user-info>
|
||||
<swp-user-avatar class="blue">LP</swp-user-avatar>
|
||||
<swp-user-details>
|
||||
<swp-user-name>Louise Pedersen</swp-user-name>
|
||||
<swp-user-email>louise@salonbeauty.dk</swp-user-email>
|
||||
</swp-user-details>
|
||||
</swp-user-info>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-role-badge class="leader">Leder</swp-role-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-status-badge class="active">
|
||||
<swp-status-dot></swp-status-dot>
|
||||
Aktiv
|
||||
</swp-status-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>I går, 17:45</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-table-actions>
|
||||
<swp-icon-btn title="Rediger">
|
||||
<i class="ph ph-pencil"></i>
|
||||
</swp-icon-btn>
|
||||
<swp-icon-btn class="danger" title="Fjern bruger">
|
||||
<i class="ph ph-trash"></i>
|
||||
</swp-icon-btn>
|
||||
</swp-table-actions>
|
||||
</swp-table-cell>
|
||||
</swp-table-row>
|
||||
|
||||
<!-- User 4 -->
|
||||
<swp-table-row>
|
||||
<swp-table-cell>
|
||||
<swp-user-info>
|
||||
<swp-user-avatar class="amber">KN</swp-user-avatar>
|
||||
<swp-user-details>
|
||||
<swp-user-name>Katrine Nielsen</swp-user-name>
|
||||
<swp-user-email>katrine@salonbeauty.dk</swp-user-email>
|
||||
</swp-user-details>
|
||||
</swp-user-info>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-role-badge>Medarbejder</swp-role-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-status-badge class="active">
|
||||
<swp-status-dot></swp-status-dot>
|
||||
Aktiv
|
||||
</swp-status-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>27. dec, 09:30</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-table-actions>
|
||||
<swp-icon-btn title="Rediger">
|
||||
<i class="ph ph-pencil"></i>
|
||||
</swp-icon-btn>
|
||||
<swp-icon-btn class="danger" title="Fjern bruger">
|
||||
<i class="ph ph-trash"></i>
|
||||
</swp-icon-btn>
|
||||
</swp-table-actions>
|
||||
</swp-table-cell>
|
||||
</swp-table-row>
|
||||
|
||||
<!-- User 5 - Invited -->
|
||||
<swp-table-row>
|
||||
<swp-table-cell>
|
||||
<swp-user-info>
|
||||
<swp-user-avatar class="purple">SH</swp-user-avatar>
|
||||
<swp-user-details>
|
||||
<swp-user-name>Sofie Hansen</swp-user-name>
|
||||
<swp-user-email>sofie@salonbeauty.dk</swp-user-email>
|
||||
</swp-user-details>
|
||||
</swp-user-info>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-role-badge>Medarbejder</swp-role-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-status-badge class="invited">
|
||||
<swp-status-dot></swp-status-dot>
|
||||
Invitation sendt
|
||||
</swp-status-badge>
|
||||
</swp-table-cell>
|
||||
<swp-table-cell>-</swp-table-cell>
|
||||
<swp-table-cell>
|
||||
<swp-table-actions>
|
||||
<swp-icon-btn title="Send invitation igen">
|
||||
<i class="ph ph-paper-plane-tilt"></i>
|
||||
</swp-icon-btn>
|
||||
<swp-icon-btn class="danger" title="Annuller invitation">
|
||||
<i class="ph ph-x"></i>
|
||||
</swp-icon-btn>
|
||||
</swp-table-actions>
|
||||
</swp-table-cell>
|
||||
</swp-table-row>
|
||||
</swp-table-body>
|
||||
</swp-table>
|
||||
</swp-table-card>
|
||||
</swp-tab-content>
|
||||
|
||||
<!-- Tab: Roller -->
|
||||
<swp-tab-content data-tab="roller">
|
||||
<swp-permissions-matrix>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rettighed</th>
|
||||
<th>Ejer</th>
|
||||
<th>Admin</th>
|
||||
<th>Leder</th>
|
||||
<th>Medarbejder</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="permission-name">
|
||||
<i class="ph ph-calendar"></i>
|
||||
Kalender
|
||||
</span>
|
||||
</td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="permission-name">
|
||||
<i class="ph ph-users"></i>
|
||||
Medarbejdere
|
||||
</span>
|
||||
</td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
<td><i class="ph ph-minus no-access"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="permission-name">
|
||||
<i class="ph ph-address-book"></i>
|
||||
Kunder
|
||||
</span>
|
||||
</td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="permission-name">
|
||||
<i class="ph ph-chart-bar"></i>
|
||||
Rapporter & Økonomi
|
||||
</span>
|
||||
</td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
<td><i class="ph ph-check-circle check"></i></td>
|
||||
<td><i class="ph ph-minus no-access"></i></td>
|
||||
<td><i class="ph ph-minus no-access"></i></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</swp-permissions-matrix>
|
||||
</swp-tab-content>
|
||||
|
||||
</swp-page-container>
|
||||
|
||||
<script>
|
||||
// Simple tab switching
|
||||
document.querySelectorAll('swp-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
const tabName = tab.dataset.tab;
|
||||
|
||||
// Update tab active states
|
||||
document.querySelectorAll('swp-tab').forEach(t => t.removeAttribute('data-active'));
|
||||
tab.setAttribute('data-active', 'true');
|
||||
|
||||
// Update content active states
|
||||
document.querySelectorAll('swp-tab-content').forEach(c => c.removeAttribute('data-active'));
|
||||
document.querySelector(`swp-tab-content[data-tab="${tabName}"]`).setAttribute('data-active', 'true');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue