marijo/go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Upaid column added

Browse source
This commit is contained in:
marijo 2026-06-09 18:18:05 +00:00
parent 2a12aa0bf7
commit a382f00ba4
3 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app.js
View file

@ -487,6 +487,7 @@ function renderMonthRow(month) {
<td class="num ${month.vacationBalance < -0.001 ? 'bad-text' : ''}"><input class="balance-override-input ${month.hasVacationOverride ? 'is-overridden' : ''}" type="number" step="0.01" value="${month.hasVacationOverride ? Number(month.vacationOverride) : Number(month.vacationBalance.toFixed(2))}" data-kind="vacation" data-year="${month.year}" data-month="${month.month}" aria-label="Vacation days for ${monthNames[month.month - 1]} ${month.year}"></td>
<td class="num ${month.feriefridageBalance < -0.001 ? 'bad-text' : ''}"><input class="balance-override-input ${month.hasFeriefridageOverride ? 'is-overridden' : ''}" type="number" step="0.01" value="${month.hasFeriefridageOverride ? Number(month.feriefridageOverride) : Number(month.feriefridageBalance.toFixed(2))}" data-kind="feriefridage" data-year="${month.year}" data-month="${month.month}" aria-label="Feriefridage for ${monthNames[month.month - 1]} ${month.year}"></td>
<td class="num ${month.flexBalance < -0.001 ? 'bad-text' : ''}"><input class="balance-override-input ${month.hasFlexOverride ? 'is-overridden' : ''}" type="number" step="0.25" value="${month.hasFlexOverride ? Number(month.flexOverride) : Number(month.flexBalance.toFixed(2))}" data-kind="flex" data-year="${month.year}" data-month="${month.month}" aria-label="FLEX hours for ${monthNames[month.month - 1]} ${month.year}"></td>
<td class="num unpaid-col ${month.usedUnpaid > 0.001 ? 'warn-text' : ''}">${days(month.usedUnpaid)}</td>
<td class="num important-col ${balanceClass}">${days(month.availableDays)}</td>
</tr>
`;

1
index.html
View file

@ -43,6 +43,7 @@
<th class="num">Vacation days</th>
<th class="num">Feriefridage</th>
<th class="num">FLEX</th>
<th class="num">Unpaid</th>
<th class="num important-col">Available days</th>
</tr>
</thead>

14
style.css
View file

@ -283,13 +283,14 @@ button.danger { background: #5a2320; color: var(--ink); border: 1px solid #5a232
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.month-table { table-layout: fixed; min-width: 760px; }
.month-table { table-layout: fixed; min-width: 840px; }
.month-table th:nth-child(1), .month-table td:nth-child(1) { width: 8.5rem; }
.month-table th:nth-child(2), .month-table td:nth-child(2) { width: auto; }
.month-table th:nth-child(3), .month-table td:nth-child(3),
.month-table th:nth-child(4), .month-table td:nth-child(4),
.month-table th:nth-child(5), .month-table td:nth-child(5),
.month-table th:nth-child(6), .month-table td:nth-child(6) { width: 7.2rem; }
.month-table th:nth-child(6), .month-table td:nth-child(6),
.month-table th:nth-child(7), .month-table td:nth-child(7) { width: 7.2rem; }
th, td { padding: .75rem .65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: rgba(255,255,255,.04); }
@ -316,6 +317,7 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
}
.pill.approved, .pill.confirmed { background: #17351a; color: var(--ink); }
.pill.unpaid { background: rgba(217,130,43,.22); color: var(--brand-dark); }
.unpaid-col { color: var(--muted); font-weight: 800; }
.important-col { background: rgba(47,143,58,.14); font-size: 1.18rem; font-weight: 900; }
.important-col .balance-override-input { font-size: 1.05rem; font-weight: 900; }
.balance-override-input {
@ -442,7 +444,7 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
.planner-body-table tbody { display: block; width: 100%; min-width: 0; }
.planner-body-table tr {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .18rem .28rem;
padding: .42rem 0;
border-bottom: 1px solid var(--line);
@ -466,7 +468,8 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
.planner-body-table td:nth-child(3)::before { content: 'VD'; }
.planner-body-table td:nth-child(4)::before { content: 'FF'; }
.planner-body-table td:nth-child(5)::before { content: 'FLEX'; }
.planner-body-table td:nth-child(6)::before { content: 'Total'; }
.planner-body-table td:nth-child(6)::before { content: 'Unpaid'; }
.planner-body-table td:nth-child(7)::before { content: 'Total'; }
.planner-body-table td:nth-child(n+3)::before {
display: block;
color: var(--muted);
@ -481,7 +484,8 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
.month-table th:nth-child(3), .month-table td:nth-child(3),
.month-table th:nth-child(4), .month-table td:nth-child(4),
.month-table th:nth-child(5), .month-table td:nth-child(5),
.month-table th:nth-child(6), .month-table td:nth-child(6) { width: auto; }
.month-table th:nth-child(6), .month-table td:nth-child(6),
.month-table th:nth-child(7), .month-table td:nth-child(7) { width: auto; }
.month-table td.entries { min-width: 0; }
.month-entry { margin: .05rem 0 .18rem; }
.planner-entry-meta { display: block; margin-left: 0; font-size: .64rem; }