justify-content: center;
}
}
+ @media only screen and (max-width: 40rem) {
+ th {
+ display: none;
+ }
+ td {
+ padding: 1rem 0.5rem;
+ min-width: 17rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ tr {
+ border-radius: 0;
+ }
+ td::before {
+ font-weight: bold;
+ content: attr(data-cell) ": ";
+ }
+ }
</style>
</head>
<body>
trElement = document.createElement("tr");
tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Wochentag");
tdElement.innerText = rootNode.children[i].getAttribute("wochentag");
addColorClass(tdElement, quota);
trElement.append(tdElement);
tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Datum");
tdElement.innerText = rootNode.children[i].getAttribute("datum");
addColorClass(tdElement, quota);
trElement.append(tdElement);
tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Anfang");
tdElement.innerText = rootNode.children[i].getAttribute("begin");
addColorClass(tdElement, quota);
trElement.append(tdElement);
tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Ende");
tdElement.innerText = rootNode.children[i].getAttribute("ende");
addColorClass(tdElement, quota);
trElement.append(tdElement);
tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Pause");
tdElement.innerText = rootNode.children[i].getAttribute("pause");
addColorClass(tdElement, quota);
trElement.append(tdElement);
tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Soll");
tdElement.innerText = rootNode.children[i].getAttribute("sollarbeitszeit");
addColorClass(tdElement, quota);
trElement.append(tdElement);
tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Ist");
tdElement.innerText = rootNode.children[i].getAttribute("arbeitszeit");
addColorClass(tdElement, quota);
trElement.append(tdElement);
tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Stunden");
tdElement.innerText = rootNode.children[i].getAttribute("stunden");
addColorClass(tdElement, quota);
trElement.append(tdElement);
tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Saldo");
tdElement.innerText = rootNode.children[i].getAttribute("saldo");
addColorClass(tdElement, quota);
trElement.append(tdElement);
<th>Pausenzeit</th>
</tr>
<tr>
- <td>00:00</td>
- <td>02:00</td>
- <td>00:00</td>
+ <td data-cell="Arbeitszeit von">00:00</td>
+ <td data-cell="Arbeitszeit bis">02:00</td>
+ <td data-cell="Pausenzeit">00:00</td>
</tr>
<tr>
- <td>02:01</td>
- <td>02:15</td>
- <td>00:01 - 0:14</td>
+ <td data-cell="Arbeitszeit von">02:01</td>
+ <td data-cell="Arbeitszeit bis">02:15</td>
+ <td data-cell="Pausenzeit">00:01 - 0:14</td>
</tr>
<tr>
- <td>02:15</td>
- <td>04:45</td>
- <td>00:15</td>
+ <td data-cell="Arbeitszeit von">02:15</td>
+ <td data-cell="Arbeitszeit bis">04:45</td>
+ <td data-cell="Pausenzeit">00:15</td>
</tr>
<tr>
- <td>04:46</td>
- <td>04:59</td>
- <td>00:16 - 00:29</td>
+ <td data-cell="Arbeitszeit von">04:46</td>
+ <td data-cell="Arbeitszeit bis">04:59</td>
+ <td data-cell="Pausenzeit">00:16 - 00:29</td>
</tr>
<tr>
- <td>05:00</td>
- <td>06:30</td>
- <td>00:30</td>
+ <td data-cell="Arbeitszeit von">05:00</td>
+ <td data-cell="Arbeitszeit bis">06:30</td>
+ <td data-cell="Pausenzeit">00:30</td>
</tr>
<tr>
- <td>06:31</td>
- <td>06:44</td>
- <td>00:31 - 00:44</td>
+ <td data-cell="Arbeitszeit von">06:31</td>
+ <td data-cell="Arbeitszeit bis">06:44</td>
+ <td data-cell="Pausenzeit">00:31 - 00:44</td>
</tr>
<tr>
- <td>06:45</td>
- <td>24:00</td>
- <td>00:45</td>
+ <td data-cell="Arbeitszeit von">06:45</td>
+ <td data-cell="Arbeitszeit bis">24:00</td>
+ <td data-cell="Pausenzeit">00:45</td>
</tr>
</table>
</div>
projects / feierabend.git / commitdiff