From: Bastian Dehn Date: Mon, 24 Jun 2024 18:35:31 +0000 (+0200) Subject: add responsiv table X-Git-Tag: 1.2.0^2~4 X-Git-Url: https://gitweb.hhaalo.de/?a=commitdiff_plain;h=884f2f8819af4b3546c870a529122ceb10bfe899;p=feierabend.git add responsiv table --- diff --git a/src/xmlviewer/viewer.html b/src/xmlviewer/viewer.html index 521751f..a078689 100644 --- a/src/xmlviewer/viewer.html +++ b/src/xmlviewer/viewer.html @@ -56,6 +56,25 @@ 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) ": "; + } + } @@ -148,46 +167,55 @@ 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); @@ -213,39 +241,39 @@ Pausenzeit - 00:00 - 02:00 - 00:00 + 00:00 + 02:00 + 00:00 - 02:01 - 02:15 - 00:01 - 0:14 + 02:01 + 02:15 + 00:01 - 0:14 - 02:15 - 04:45 - 00:15 + 02:15 + 04:45 + 00:15 - 04:46 - 04:59 - 00:16 - 00:29 + 04:46 + 04:59 + 00:16 - 00:29 - 05:00 - 06:30 - 00:30 + 05:00 + 06:30 + 00:30 - 06:31 - 06:44 - 00:31 - 00:44 + 06:31 + 06:44 + 00:31 - 00:44 - 06:45 - 24:00 - 00:45 + 06:45 + 24:00 + 00:45