]> gitweb.hhaalo.de Git - feierabend.git/commitdiff
projects / feierabend.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 3de30c1)
viewer table for big screen
authorBastian Dehn <hhaalo@arcor.de>
Mon, 24 Jun 2024 18:04:36 +0000 (20:04 +0200)
committerBastian Dehn <hhaalo@arcor.de>
Mon, 24 Jun 2024 18:04:36 +0000 (20:04 +0200)
src/xmlviewer/viewer.html patch | blob | history

diff --git a/src/xmlviewer/viewer.html b/src/xmlviewer/viewer.html
index da19e9ecd826794c1cbfef52f77109c01a881113..521751faed6edb9f53faa47699d9c6f254b36ac7 100644 (file)
--- a/src/xmlviewer/viewer.html
+++ b/src/xmlviewer/viewer.html
@@ -8,7 +8,7 @@
                        label {
                                font-weight: bold;
                        }
-                       #anfangssaldo {
+                       caption {
                                font-weight: bold;
                                margin-top: 1rem;
                        }
@@ -29,6 +29,9 @@
                        th:last-child {
                                border-top-right-radius: 1rem;
                        }
+                       th {
+                               background-color: lightblue;
+                       }
                        tr:last-child td:first-child {
                                border-bottom-left-radius: 1rem;;
                        }
@@ -44,6 +47,15 @@
                        .green {
                                background-color: lightgreen;
                        }
+                       @media only screen and (min-width: 62rem) {
+                               .tables {
+                                       display: flex;
+                                       flex-direction: row;
+                                       gap: 1rem;
+                                       align-items: start;
+                                       justify-content: center;
+                               }
+                       }
                </style>
        </head>
        <body>
@@ -72,10 +84,6 @@
                                                const xmldoc = parser.parseFromString(data.target.result, "text/xml");
 
                                                const rootNode = xmldoc.children[0]
-                                               let divElement = document.createElement("div");
-                                               divElement.id = "anfangssaldo"
-                                               divElement.innerText = `Anfangssaldo: ${rootNode.getAttribute("anfangssaldo")}`
-                                               element.append(divElement);
 
                                                const tableElement = document.createElement("table");
                                                const MAX_OVERDAYS = 7.5;
@@ -86,6 +94,10 @@
                                                let maxWorktime;
                                                let quota;
 
+                                               const captionElement = document.createElement("caption");
+                                               captionElement.innerText = `Zeitkonto - Anfangssaldo: ${rootNode.getAttribute("anfangssaldo")}`
+                                               tableElement.append(captionElement);
+
                                                trElement = document.createElement("tr");
 
                                                tdElement = document.createElement("th");
@@ -190,49 +202,54 @@
                        </script>
                        <label>Zeitkonto-Datei: </label>
                        <input onchange="loadFile()" type="file" id="filepath" name="file">
-                       <div id="content"></div>
-                       <table>
-                               <tr>
-                                       <th>Arbeitszeit von</th>
-                                       <th>Arbeitszeit bis</th>
-                                       <th>Pausenzeit</th>
-                               </tr>
-                               <tr>
-                                       <td>00:00</td>
-                                       <td>02:00</td>
-                                       <td>00:00</td>
-                               </tr>
-                               <tr>
-                                       <td>02:01</td>
-                                       <td>02:15</td>
-                                       <td>00:01 - 0:14</td>
-                               </tr>
-                               <tr>
-                                       <td>02:15</td>
-                                       <td>04:45</td>
-                                       <td>00:15</td>
-                               </tr>
-                               <tr>
-                                       <td>04:46</td>
-                                       <td>04:59</td>
-                                       <td>00:16 - 00:29</td>
-                               </tr>
-                               <tr>
-                                       <td>05:00</td>
-                                       <td>06:30</td>
-                                       <td>00:30</td>
-                               </tr>
-                               <tr>
-                                       <td>06:31</td>
-                                       <td>06:44</td>
-                                       <td>00:31 - 00:44</td>
-                               </tr>
-                               <tr>
-                                       <td>06:45</td>
-                                       <td>24:00</td>
-                                       <td>00:45</td>
-                               </tr>
-                       </table>
+                       <div class="tables">
+                               <div id="content"></div>
+                               <div>
+                                       <table>
+                                               <caption>Pausenzeiten</caption>
+                                               <tr>
+                                                       <th>Arbeitszeit von</th>
+                                                       <th>Arbeitszeit bis</th>
+                                                       <th>Pausenzeit</th>
+                                               </tr>
+                                               <tr>
+                                                       <td>00:00</td>
+                                                       <td>02:00</td>
+                                                       <td>00:00</td>
+                                               </tr>
+                                               <tr>
+                                                       <td>02:01</td>
+                                                       <td>02:15</td>
+                                                       <td>00:01 - 0:14</td>
+                                               </tr>
+                                               <tr>
+                                                       <td>02:15</td>
+                                                       <td>04:45</td>
+                                                       <td>00:15</td>
+                                               </tr>
+                                               <tr>
+                                                       <td>04:46</td>
+                                                       <td>04:59</td>
+                                                       <td>00:16 - 00:29</td>
+                                               </tr>
+                                               <tr>
+                                                       <td>05:00</td>
+                                                       <td>06:30</td>
+                                                       <td>00:30</td>
+                                               </tr>
+                                               <tr>
+                                                       <td>06:31</td>
+                                                       <td>06:44</td>
+                                                       <td>00:31 - 00:44</td>
+                                               </tr>
+                                               <tr>
+                                                       <td>06:45</td>
+                                                       <td>24:00</td>
+                                                       <td>00:45</td>
+                                               </tr>
+                                       </table>
+                               </div>
+                       </div>
                </main>
        </body>
 </html>
\ No newline at end of file
feierabend calculator