From d89bcbec06f51d3ded0ed5504e733da443dc8a96 Mon Sep 17 00:00:00 2001 From: derped Date: Mon, 19 Apr 2021 17:35:02 +0200 Subject: [PATCH] Fix fluctuating tbody heights by not using tables. --- berichtsheft/assets/css/notebook.css | 85 ++++-- berichtsheft/assets/js/notebook.js | 6 +- berichtsheft/assets/templates/report.html | 319 +++++++++++----------- 3 files changed, 225 insertions(+), 185 deletions(-) diff --git a/berichtsheft/assets/css/notebook.css b/berichtsheft/assets/css/notebook.css index 7f0957a..8bb89ba 100644 --- a/berichtsheft/assets/css/notebook.css +++ b/berichtsheft/assets/css/notebook.css @@ -42,53 +42,82 @@ hr { border-top: 1px solid black; } -td { - height: 1.5em; - word-break: break-word; -} - -table.week { - layout: fixed; +.week { width: 100%; height: 80%; + display: flex; + flex-direction: column; + border: 1px solid #000000; } -table.week th { - height: 2em; - font-weight: normal; +.week-head { text-align: center; - vertical-align: middle; + align-items: center; + justify-content: center; background-color: #f2f2f2; } -table.week tbody:nth-child(odd) tr:nth-child(odd) { +.day { + flex-basis: 18%; + margin-top: -1px; + margin-left: -1px; + margin-right: -1px; + border: 1px solid #000000; +} + +.week-foot { background-color: #f2f2f2; } -table.week tbody:nth-child(even) tr:nth-child(even) { - background-color: #f2f2f2; -} - -table.week thead th:nth-last-child(-n+2) { - width: 10%; - font-size: 80%; -} - -table.week td:nth-last-child(-n+2) { - text-align: center; -} - -table.week tbody:last-child tr:last-child td:first-child { +.week-foot div:first-child { text-align: right; } -.vtable { - width: 1em; +.day-line { + align-items: center; + flex-basis: 20%; +} + +.day:nth-child(even) .day-line:nth-child(even) { + background-color: #f2f2f2; +} + +.day:nth-child(odd) .day-line:nth-child(odd) { + background-color: #f2f2f2; +} + + +.flexh { + display: flex; +} + +.flexv { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.flexgrow { + flex-grow: 1; +} + +.flexten { + flex-basis: 10%; + flex-grow: 0; + flex-shrink: 0; + text-align: center; +} + +.flexfive { + flex-basis: 5%; } .vertical { + text-align: center; writing-mode: vertical-lr; transform: rotate(180deg); + border-left: 1px solid #000000;; } .sign { diff --git a/berichtsheft/assets/js/notebook.js b/berichtsheft/assets/js/notebook.js index 44a87ee..db6d757 100644 --- a/berichtsheft/assets/js/notebook.js +++ b/berichtsheft/assets/js/notebook.js @@ -80,11 +80,11 @@ function populate(pnum) { const week = node.getElementsByClassName("week")[0].querySelectorAll(".day"); let weekh = null; for (let i=0; i < week.length && i < data.days.length; i++) { - let day = week[i].children; + let day = week[i].querySelectorAll(".day-line"); let dayh = null; for (let j=0; j < day.length && j < data.days[i].length; j++) { - day[j].querySelectorAll("td")[0].textContent = data.days[i][j][0]; - day[j].querySelectorAll("td")[1].textContent = data.days[i][j][1]; + day[j].querySelectorAll("div")[0].textContent = data.days[i][j][0]; + day[j].querySelectorAll("div")[1].textContent = data.days[i][j][1]; dayh += data.days[i][j][1]; } day[day.length-1].querySelector(".subtotal").textContent = dayh; diff --git a/berichtsheft/assets/templates/report.html b/berichtsheft/assets/templates/report.html index 9a3ad4d..49358f1 100644 --- a/berichtsheft/assets/templates/report.html +++ b/berichtsheft/assets/templates/report.html @@ -12,164 +12,175 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+
Unterweisungen, ausgeführte Arbeiten usw.
+
Einzel-Stunden
+
Gesammt-Stunden
+
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
Montag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
Dienstag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Mittwoch
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Donnerstag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Freitag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Wochenstunden
+
+
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Unterweisungen, ausgeführte Arbeiten usw.Einzel-
Stunden		Gesammt-
Stunden
Montag
Dienstag
Mittwoch
Donnerstag
Freitag
Wochenstunden