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
|
|
@ -2266,6 +2266,152 @@
|
|||
background: color-mix(in srgb, var(--color-teal) 15%, white);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
RATES DRAWER
|
||||
========================================== */
|
||||
swp-drawer-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.3);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
swp-drawer-overlay.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
swp-rates-drawer {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 420px;
|
||||
background: var(--color-surface);
|
||||
box-shadow: -4px 0 20px rgba(0,0,0,0.15);
|
||||
z-index: 1000;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
swp-rates-drawer.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
swp-drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-drawer-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
swp-drawer-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-secondary);
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
swp-drawer-close:hover {
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-drawer-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
swp-rate-row {
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr 100px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-rate-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-rate-row input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-rate-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
swp-rate-label.disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
swp-rate-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-rate-input input {
|
||||
width: 70px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
swp-rate-input.disabled input {
|
||||
opacity: 0.4;
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-teal);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
swp-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
swp-card-header swp-section-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -2650,35 +2796,24 @@
|
|||
<div class="grid-2">
|
||||
<div>
|
||||
<swp-card>
|
||||
<swp-section-label>Grundløn</swp-section-label>
|
||||
<swp-card-header>
|
||||
<swp-section-label>Satser</swp-section-label>
|
||||
<button class="btn-link" onclick="openRatesDrawer()">Rediger</button>
|
||||
</swp-card-header>
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Timeløn</swp-edit-label>
|
||||
<swp-edit-value contenteditable="true">185 kr/time</swp-edit-value>
|
||||
<swp-edit-label>Normal (timeløn)</swp-edit-label>
|
||||
<swp-edit-value class="mono">131,49 kr</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Overarbejde</swp-edit-label>
|
||||
<swp-edit-value contenteditable="true">150%</swp-edit-value>
|
||||
<swp-edit-label>Overarbejde (100%)</swp-edit-label>
|
||||
<swp-edit-value class="mono">280,50 kr</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Weekendtillæg</swp-edit-label>
|
||||
<swp-edit-value contenteditable="true">25%</swp-edit-value>
|
||||
<swp-edit-label>Ferie m. løn</swp-edit-label>
|
||||
<swp-edit-value class="mono">140,25 kr</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
<swp-toggle-row style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border);">
|
||||
<swp-toggle-label>ATP-bidrag</swp-toggle-label>
|
||||
<swp-toggle-slider data-value="yes">
|
||||
<swp-toggle-option>Ja</swp-toggle-option>
|
||||
<swp-toggle-option>Nej</swp-toggle-option>
|
||||
</swp-toggle-slider>
|
||||
</swp-toggle-row>
|
||||
<swp-toggle-row>
|
||||
<swp-toggle-label>Pension (arbejdsgiver)</swp-toggle-label>
|
||||
<swp-toggle-slider data-value="yes">
|
||||
<swp-toggle-option>Ja</swp-toggle-option>
|
||||
<swp-toggle-option>Nej</swp-toggle-option>
|
||||
</swp-toggle-slider>
|
||||
</swp-toggle-row>
|
||||
</swp-card>
|
||||
|
||||
<swp-card>
|
||||
|
|
@ -2686,56 +2821,74 @@
|
|||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Minimum pr. time</swp-edit-label>
|
||||
<swp-edit-value contenteditable="true">220 kr</swp-edit-value>
|
||||
<swp-edit-value class="mono" contenteditable="true">220 kr</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>På services</swp-edit-label>
|
||||
<swp-edit-value contenteditable="true">15%</swp-edit-value>
|
||||
<swp-edit-value class="mono" contenteditable="true">15%</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>På produktsalg</swp-edit-label>
|
||||
<swp-edit-value contenteditable="true">15%</swp-edit-value>
|
||||
<swp-edit-value class="mono" contenteditable="true">15%</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
</swp-card>
|
||||
|
||||
<swp-card>
|
||||
<swp-section-label>Tillæg</swp-section-label>
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>8-21 Hverdage</swp-edit-label>
|
||||
<swp-edit-value class="mono">28,03 kr</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>8-21 Lørdage</swp-edit-label>
|
||||
<swp-edit-value class="mono">56,02 kr</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Søndag</swp-edit-label>
|
||||
<swp-edit-value class="mono">112,07 kr</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
</swp-card>
|
||||
</div>
|
||||
|
||||
<swp-card>
|
||||
<swp-section-label>Lønhistorik</swp-section-label>
|
||||
<swp-section-label>Lønspecifikationer</swp-section-label>
|
||||
<swp-salary-history>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Dato</th>
|
||||
<th>Ændring</th>
|
||||
<th>Ny værdi</th>
|
||||
<th>Periode</th>
|
||||
<th>Bruttoløn</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="mono">01.01.2025</td>
|
||||
<td>Lønforhøjelse</td>
|
||||
<td class="mono">185 kr/time</td>
|
||||
<td>Januar 2026</td>
|
||||
<td class="mono">34.063,50 kr</td>
|
||||
<td><a href="poc-loenspecifikation.html" class="link">Vis</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mono">01.01.2024</td>
|
||||
<td>Lønforhøjelse</td>
|
||||
<td class="mono">175 kr/time</td>
|
||||
<td>December 2025</td>
|
||||
<td class="mono">31.845,00 kr</td>
|
||||
<td><a href="poc-loenspecifikation.html" class="link">Vis</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mono">01.07.2023</td>
|
||||
<td>Provision ændret</td>
|
||||
<td class="mono">12%</td>
|
||||
<td>November 2025</td>
|
||||
<td class="mono">33.290,25 kr</td>
|
||||
<td><a href="poc-loenspecifikation.html" class="link">Vis</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mono">01.01.2023</td>
|
||||
<td>Lønforhøjelse</td>
|
||||
<td class="mono">165 kr/time</td>
|
||||
<td>Oktober 2025</td>
|
||||
<td class="mono">32.156,75 kr</td>
|
||||
<td><a href="poc-loenspecifikation.html" class="link">Vis</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mono">01.08.2019</td>
|
||||
<td>Ansættelse</td>
|
||||
<td class="mono">145 kr/time</td>
|
||||
<td>September 2025</td>
|
||||
<td class="mono">34.520,00 kr</td>
|
||||
<td><a href="poc-loenspecifikation.html" class="link">Vis</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -3884,5 +4037,114 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<!-- Rates Drawer -->
|
||||
<swp-drawer-overlay id="rates-overlay" onclick="closeRatesDrawer()"></swp-drawer-overlay>
|
||||
<swp-rates-drawer id="rates-drawer">
|
||||
<swp-drawer-header>
|
||||
<swp-drawer-title>Lønsatser</swp-drawer-title>
|
||||
<swp-drawer-close onclick="closeRatesDrawer()">
|
||||
<i class="ph ph-x"></i>
|
||||
</swp-drawer-close>
|
||||
</swp-drawer-header>
|
||||
<swp-drawer-body>
|
||||
<swp-section-label style="margin-bottom: 12px;">Grundsatser</swp-section-label>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox" checked>
|
||||
<swp-rate-label>Normal (timeløn)</swp-rate-label>
|
||||
<swp-rate-input><input type="text" value="131,49"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox" checked>
|
||||
<swp-rate-label>Overarbejde (100%)</swp-rate-label>
|
||||
<swp-rate-input><input type="text" value="280,50"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox">
|
||||
<swp-rate-label class="disabled">Kursus/skole</swp-rate-label>
|
||||
<swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox">
|
||||
<swp-rate-label class="disabled">Afspadsering</swp-rate-label>
|
||||
<swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox">
|
||||
<swp-rate-label class="disabled">Fri m. løn</swp-rate-label>
|
||||
<swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox" checked>
|
||||
<swp-rate-label>Ferie m. løn</swp-rate-label>
|
||||
<swp-rate-input><input type="text" value="140,25"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox">
|
||||
<swp-rate-label class="disabled">Kontor</swp-rate-label>
|
||||
<swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox">
|
||||
<swp-rate-label class="disabled">Barns 1. sygedag</swp-rate-label>
|
||||
<swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox">
|
||||
<swp-rate-label class="disabled">Barns hospitalsindlæggelse</swp-rate-label>
|
||||
<swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox">
|
||||
<swp-rate-label class="disabled">Barsel</swp-rate-label>
|
||||
<swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
|
||||
<div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border);">
|
||||
<swp-section-label style="margin-bottom: 12px;">Tillæg</swp-section-label>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox" checked>
|
||||
<swp-rate-label>8-21 Hverdage (udenfor arbejdstid)</swp-rate-label>
|
||||
<swp-rate-input><input type="text" value="28,03"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox" checked>
|
||||
<swp-rate-label>8-21 Lørdage (udenfor arbejdstid)</swp-rate-label>
|
||||
<swp-rate-input><input type="text" value="56,02"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox" checked>
|
||||
<swp-rate-label>Søndag</swp-rate-label>
|
||||
<swp-rate-input><input type="text" value="112,07"> kr</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border);">
|
||||
<swp-section-label style="margin-bottom: 12px;">Provisionsberegning</swp-section-label>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox" checked>
|
||||
<swp-rate-label>Provision på produktsalg</swp-rate-label>
|
||||
<swp-rate-input><input type="text" value="15"> %</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
<swp-rate-row>
|
||||
<input type="checkbox" checked>
|
||||
<swp-rate-label>Provision på servicesalg</swp-rate-label>
|
||||
<swp-rate-input><input type="text" value="15"> %</swp-rate-input>
|
||||
</swp-rate-row>
|
||||
</div>
|
||||
</swp-drawer-body>
|
||||
</swp-rates-drawer>
|
||||
|
||||
<script>
|
||||
function openRatesDrawer() {
|
||||
document.getElementById('rates-overlay').classList.add('open');
|
||||
document.getElementById('rates-drawer').classList.add('open');
|
||||
}
|
||||
|
||||
function closeRatesDrawer() {
|
||||
document.getElementById('rates-overlay').classList.remove('open');
|
||||
document.getElementById('rates-drawer').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue