derped
/
Berichtsheft
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fix fluctuating tbody heights by not using tables.

Browse Source
master
Kevin Baensch 2 years ago
parent 742a51b674
commit d89bcbec06
Signed by: derped
GPG Key ID: C0F1D326C7626543
3 changed files with 219 additions and 179 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 73
      berichtsheft/assets/css/notebook.css
  2. 6
      berichtsheft/assets/js/notebook.js
  3. 319
      berichtsheft/assets/templates/report.html

73
berichtsheft/assets/css/notebook.css
Unescape View File

@ -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) {
.week-foot div:first-child {
text-align: right;
}
.day-line {
align-items: center;
flex-basis: 20%;
}
.day:nth-child(even) .day-line:nth-child(even) {
background-color: #f2f2f2;
}
table.week thead th:nth-last-child(-n+2) {
width: 10%;
font-size: 80%;
.day:nth-child(odd) .day-line:nth-child(odd) {
background-color: #f2f2f2;
}
table.week td:nth-last-child(-n+2) {
text-align: center;
.flexh {
display: flex;
}
table.week tbody:last-child tr:last-child td:first-child {
text-align: right;
.flexv {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.flexgrow {
flex-grow: 1;
}
.vtable {
width: 1em;
.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 {

6
berichtsheft/assets/js/notebook.js
Unescape View File

@ -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;

319
berichtsheft/assets/templates/report.html
Unescape View File

@ -12,164 +12,175 @@
</div>
<div class="pg-content">
<table class="week">
<thead>
<tr>
<th colspan="2">Unterweisungen, ausgeführte Arbeiten usw.</th>
<th>Einzel-<br>Stunden</th>
<th>Gesammt-<br>Stunden</th>
</thead>
<tbody class="day">
<tr>
<th rowspan="5" class="vtable"><div class="vertical">Montag</div></th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="subtotal"></td>
</tr>
</tbody>
<tbody class="day">
<tr>
<th rowspan="5" class="vtable"><div class="vertical">Dienstag</div></th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="subtotal"></td>
</tr>
</tbody>
<div class="week">
<div class="week-head flexh flexfive">
<div class="flexgrow">Unterweisungen, ausgeführte Arbeiten usw.</div>
<div class="flexten">Einzel-Stunden</div>
<div class="flexten">Gesammt-Stunden</div>
</div>
<tbody class="day">
<tr>
<th rowspan="5" class="vtable"><div class="vertical">Mittwoch</div></th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="subtotal"></td>
</tr>
</tbody>
<div class="day flexh">
<div class="vertical">Montag</div>
<div class="day-content flexv" onclick="editDayOpen(this)">
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="subtotal green flexten"></div>
</div>
</div>
</div>
<tbody class="day">
<tr>
<th rowspan="5" class="vtable"><div class="vertical">Donnerstag</div></th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="subtotal"></td>
</tr>
</tbody>
<div class="day flexh">
<div class="vertical">Dienstag</div>
<div class="day-content flexv" onclick="editDayOpen(this)">
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="subtotal green flexten"></div>
</div>
</div>
</div>
<div class="day flexh">
<div class="vertical">Mittwoch</div>
<div class="day-content flexv" onclick="editDayOpen(this)">
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="subtotal green flexten"></div>
</div>
</div>
</div>
<div class="day flexh">
<div class="vertical">Donnerstag</div>
<div class="day-content flexv" onclick="editDayOpen(this)">
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="subtotal green flexten"></div>
</div>
</div>
</div>
<div class="day flexh">
<div class="vertical">Freitag</div>
<div class="day-content flexv" onclick="editDayOpen(this)">
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="sh flexten"></div>
</div>
<div class="day-line flexh">
<div class="flexgrow"></div>
<div class="sh flexten"></div>
<div class="subtotal green flexten"></div>
</div>
</div>
</div>
<div class="week-foot flexh flexfive">
<div class="flexgrow">Wochenstunden</div>
<div class="total flexten"></div>
</div>
</div>
<tbody class="day">
<tr>
<th rowspan="5" class="vtable"><div class="vertical">Freitag</div></th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="subtotal"></td>
</tr>
</tbody>
<tbody>
<tr style="height:1em">
<td colspan="3">Wochenstunden</td>
<td class="total"></td>
</tr>
</tbody>
</table>
<div class="sign">
<table>
<tr>

Write Preview
Loading…
Cancel
Save