diff --git a/app.js b/app.js index 8600466..74a0d7a 100644 --- a/app.js +++ b/app.js @@ -487,6 +487,7 @@ function renderMonthRow(month) { + ${days(month.usedUnpaid)} ${days(month.availableDays)} `; diff --git a/index.html b/index.html index c4166cb..89205d5 100644 --- a/index.html +++ b/index.html @@ -43,6 +43,7 @@ Vacation days Feriefridage FLEX + Unpaid Available days diff --git a/style.css b/style.css index 97a7376..7e1c2e4 100644 --- a/style.css +++ b/style.css @@ -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; }