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

Fix fluctuating tbody heights by not using tables.

master
Kevin Baensch 1 year ago
parent
742a51b674
commit
d89bcbec06
Signed by: derped GPG Key ID: C0F1D326C7626543
3 changed files with 219 additions and 179 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
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
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
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
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